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.
There are mentions of this hook not working after the new WooCommerce gallery since WC 3.0
Product Title
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.
Color:Clear
- In Stock
SKU: PBTWCP
Categories: Plugins, Themes
Tags: wp, free, woocustomizer
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
Available WooCommerce Product Page Hooks:
- woocommerce_before_single_product
- woocommerce_before_single_product_summary
- woocommerce_product_thumbnails
- woocommerce_single_product_summary
- woocommerce_before_add_to_cart_form
- woocommerce_before_variations_form
- woocommerce_before_add_to_cart_button
- woocommerce_before_single_variation
- woocommerce_single_variation
- woocommerce_after_single_variation
- woocommerce_after_add_to_cart_button
- woocommerce_after_variations_form
- woocommerce_after_add_to_cart_form
- woocommerce_product_meta_start
- woocommerce_product_meta_end
- woocommerce_share
- woocommerce_after_single_product_summary
- woocommerce_after_single_product
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.
