Back to Blog

WooCommerce Visual Hook Display: WooCommerce Product Page Hooks – Easy Visual Guide

View our easy visual guide explaining where all the WooCommerce Product page hooks are displayed in your WooCommerce store.


WooCommerce Product Page Hooks

WooCommerce offers many available hooks added to the WooCommerce product single page for further customizing, you can use these hooks to add any needed functionality to your WooCommerce product pages.

Below is a visual guide of all the WooCommerce product page hooks available on the each single product, so you can easy see where each hook will show up.

Visual display of the WooCommerce Product Page Hooks:

This easy visual guide is shown on WooCommerce Variable Product but it will be similar for all product types.

You can view an example below of how to use the code on your own website and add extra elements or functionlaity to your WooCommerce product pages.

woocommerce_before_single_product
woocommerce_before_single_product_summary
WooCustomizer Image Placeholder
woocommerce_product_thumbnails

There are mentions of this hook not working after the new WooCommerce gallery since WC 3.0

woocommerce_single_product_summary

Product Title

$18.00 – $42.00

This is the product short description.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut dui id mauris laoreet pellentesque. Etiam a nunc turpis.

woocommerce_before_add_to_cart_form
woocommerce_before_variations_form

Color:Clear

Color:Clear
woocommerce_before_add_to_cart_button
woocommerce_before_single_variation
woocommerce_single_variation
$42.00
woocommerce_after_single_variation
woocommerce_after_add_to_cart_button
woocommerce_after_variations_form
woocommerce_after_add_to_cart_form
woocommerce_product_meta_start

SKU: PBTWCP
Categories: Plugins, Themes
Tags: wp, free, woocustomizer

woocommerce_product_meta_end
woocommerce_share
woocommerce_after_single_product_summary
Description

This is the product LONG description.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut dui id mauris laoreet pellentesque. Etiam a nunc turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut dui id mauris laoreet pellentesque. Etiam a nunc turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut dui id mauris laoreet pellentesque. Etiam a nunc turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut dui id mauris laoreet pellentesque.

Related Products

WooCustomizer Image Placeholder

Product Title

$18.00
WooCustomizer Image Placeholder

Product Title

$18.00
WooCustomizer Image Placeholder

Product Title

$18.00
WooCustomizer Image Placeholder

Product Title

$18.00
woocommerce_after_single_product

Available WooCommerce Product Page Hooks:

How to use a PHP hook on your website:

To use these hooks you will need to understand a little bit of php code… You can add the following function to your website using by creating a child theme and then adding this code to the child themes functions.php file, or you can install our Site Customizations plugin and add the php code via the php file provided.

If you are not comfortable jumping into code then please have a look at our StoreCustomizer plugin which offers a lot of useful functionality using all these hooks for you to customize WooCommerce without any coding knowledge.

/*
* My Custom Function
*/
function my_custom_function( array $params ) {
// Some Code Here
}
add_filter( 'woocommerce_before_single_product​', 'my_custom_function', 20 );

All the hooks mentioned above are available on the WooCommerce single product pages, they are all quite self explanatory in where they will display, but do refer to the visual hook guide if you’re not 100% sure on where exactly they hook into on the Single WooCommerce Product page.

Happy Coding!

Our free StoreCustomizer plugin offers different functionality to add stock amounts, remove SKU or any other items, Add a price suffix, edit your product page tabs and lots more functionality you may want added to the WooCommerce Product page, with all settings built into the Customizer you can easily do this all without editing code… Have a look yourself and see what all StoreCustomizer offers.