Here’s a visual hook guide for the WooCommerce Single Product Page. This is part of my “Visual Hook Guide Series“, through which you can find WooCommerce hooks quickly and easily by seeing their actual locations (and you can copy/paste). If you like this guide and it’s helpful to you, let me know in the comments!
Now that you know the product page hooks, you can override the WooCommerce Single Product Page via your child theme’s functions. You can remove default elements (for example, the featured image, the add to cart form, related products…), you can add your custom elements by picking the correct positioned “hook” and triggering your function, and you can even “move” existing elements. Need a video tutorial? Watch it now →
WooCommerce Single Product Page [Visual Hook Guide]
woocommerce_product_thumbnails (may not work)
Product Title
€554,00–€6.565,00 €44,00–€665,00
woocommerce_before_add_to_cart_form
woocommerce_before_variations_form
| Clear selection |
woocommerce_before_add_to_cart_button
woocommerce_single_variation
In stock
woocommerce_after_single_variation
woocommerce_after_add_to_cart_button
woocommerce_after_variations_form
woocommerce_after_add_to_cart_form
woocommerce_share
Additional Information
| Weight | 546 kg |
|---|---|
| Dimensions | 546 x 456 x 456 cm |
| Option | Option 1, Option 2 |
You may also like…
-
Test product
€1,00
Add to cart
woocommerce_after_single_product
WooCommerce Single Product Page Default Actions
This is the list of WooCommerce actions you can unhook/remove by simply changing “add_action” to “remove_action” in your functions.php. WooCommerce uses its own hooks e.g. “woocommerce_before_single_product_summary” to assemble the single product page together. Because it’s done this way, you can therefore use “remove_action” to remove one of these elements. I’ve also added other “do_action” which don’t have a trigger function at the moment, but that you can use for adding content to the product page.
/**
* @snippet List of Default Actions @ WooCommerce Single Product
* @how-to Get tutoraspire.com FREE
* @author Tutor Aspire
* @updated WooCommerce 4.0
* @donate $9 https://tutoraspire.com
*/
// Before content
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );
add_action( 'woocommerce_sidebar', 'woocommerce_get_sidebar', 10 );
add_action( 'woocommerce_before_single_product', 'woocommerce_output_all_notices', 10 );
// Left column
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
// Right column
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
// Right column - add to cart
do_action( 'woocommerce_before_add_to_cart_form' );
do_action( 'woocommerce_before_add_to_cart_button' );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
add_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );
add_action( 'woocommerce_variable_add_to_cart', 'woocommerce_variable_add_to_cart', 30 );
add_action( 'woocommerce_external_add_to_cart', 'woocommerce_external_add_to_cart', 30 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
do_action( 'woocommerce_before_quantity_input_field' );
do_action( 'woocommerce_after_quantity_input_field' );
do_action( 'woocommerce_after_add_to_cart_button' );
do_action( 'woocommerce_after_add_to_cart_form' );
// Right column - meta
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
do_action( 'woocommerce_product_meta_start' );
do_action( 'woocommerce_product_meta_end' );
// Right column - sharing
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );
do_action( 'woocommerce_share' );
// Tabs, upsells and related products
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_product_additional_information', 'wc_display_product_attributes', 10 );
do_action( 'woocommerce_product_after_tabs' );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
// Reviews
add_action( 'woocommerce_review_before', 'woocommerce_review_display_gravatar', 10 );
add_action( 'woocommerce_review_before_comment_meta', 'woocommerce_review_display_rating', 10 );
add_action( 'woocommerce_review_meta', 'woocommerce_review_display_meta', 10 );
do_action( 'woocommerce_review_before_comment_text', $comment );
add_action( 'woocommerce_review_comment_text', 'woocommerce_review_display_comment_text', 10 );
do_action( 'woocommerce_review_after_comment_text', $comment );
// After content
do_action( 'woocommerce_after_single_product' );
do_action( 'woocommerce_after_main_content' );
WooCommerce Single Product Page Customization – Video Tutorial
Check this video where I explain how to customize the single product page and how to use the visual hook guide.
You can find out how to ADD content to the Single Product Page without overriding the WooCommerce plugin. Call the WordPress add_action function, select the correct WooCommerce Single Product Page hook (a.k.a. the correct position in the page), and trigger your custom function.
You can for example add banners, text, variable values, iframes, and so on without even touching the WooCommerce core files.