WooCommerce Visual Hook Guide Single Product Page 2024 (Simple and Variable Products)
Leave a comment / By John Cook
Welcome to my Woocommerce visual hook guide for the single product page. With this guide you can get a visual understanding where each hook is located so that you can add custom functions with greater ease. To use this Woocommerce visual hook guide for the single product page simply locate the location that you need to use, copy the hook and paste it into your custom function. The functions with the toggle will allow you to expand to see further additional hooks for that location. To use simply follow this simple procedure. In your functions.php file (or functions plugin) and enter the code as follows: “add_action(‘place-hook-here’,’your-PHP-function-here’);” and then place it exactly where you want it to be. How easy it that?
Where to add this code?
As with most other snippets, you use these hooks with your custom snippets at the end of the theme functions.php file before the closing ?> (if your file has it), or a functions plugin. These hooks will allow you to more precisely place the snippets so that they appear exactly where you want them to. Should you need to style the outputted code place any custom CSS in your themes CSS file, a CSS plugin or the CSS of your child theme.With this WooCommerce single product page hooks guide you will be able to customise the look and feel of your products page beyond just CSS styling. Want to add recent sales? You can do so as demonstrated in this guide showing how to show recent sales. Want to add an image below the add to cart button? It's easy using hooks, as shown in our guide on how to add an image to the WooCommerce single product page. In short, this visual WooCommerce product page hooks guide will give you immense power to customise the page to suite your unique requirements.Do they still work?
Please leave a comment below if you find that one of the hooks no longer works. With each update to Woocommerce there is a chance that something will change that can result in a hook no longer being part of the page.woocommerce_before_single_product
woocommerce_before_single_product_summary
Sale!
woocommerce_product_thumbnails (may not work)
woocommerce_single_product_summary
Product Title
$44.99 - $54.99 $39.99 - $44.99
This is the short description!
woocommerce_before_add_to_cart_form
woocommerce_before_variations_form
woocommerce_before_add_to_cart_button
woocommerce_before_single_variation
woocommerce_single_variation
$44.99 $39.99
In stock
woocommerce_before_add_to_cart_quantity
woocommerce_after_add_to_cart_quantity
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: SpecialSku
Category: Shirts
woocommerce_product_meta_end
woocommerce_share
woocommerce_after_single_product_summary
Description
Main product decription...
Additional Information
| Weight | 0.46 kg |
|---|---|
| Dimensions | 32 x 44 x 3 cm |
| Option | Option 1, Option 2 |
You may also like…
Ninja Shirt
$32.99
Ninja Shorts
$22.99
Ninja CD
$12.99
woocommerce_after_single_product
WooCommerce Visual Hook Guide Single Product Page 2024 (Simple and Variable Products) Default Actions
// 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' );
hi if was product out of stock, what hooks fire?
Hi mojtaba,
If you are looking to display a message or similar when the product is out of stock you can use a conditional with
$product->get_stock_status();