Posted on

WooCommerce Visual Hook Guide: Single Product Page

Here’s a visual HTML 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 Single Product Page hooks, all you need to do in your functions.php is “add_action(‘place-hook-here’,’your-PHP-function-here’);” and you can place your custom functions exactly where you like them to show! Need a video tutorial? Watch it now →

NEW! You can now “expand” each hook by clicking on the “+”. You will immediately see the relevant default WooCommerce functions, so that you can remove them, move them or add content in that exact position. Enjoy 🙂

WooCommerce Single Product Page [Visual Hook Guide]

woocommerce_before_single_product +

Default Actions:

add_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );

Remove Default Actions:

remove_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );

Add Custom Action:

add_action( 'woocommerce_before_single_product', 'bbloomer_custom_action', 15 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_before_single_product_summary +

Default Actions:

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 );

Remove Default Actions:

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

Add Custom Action:

add_action( 'woocommerce_before_single_product_summary', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

Sale!


woocommerce_product_thumbnails (may not work... expand toggle to see why) +

One of the latest WooCommerce versions introduced an optimized product gallery on the single product page. If your products have multiple images and therefore use the product gallery, you might want to also add content below the gallery itself.

But it’s now impossible to add content under the image as it used to be done with the "woocommerce_product_thumbnails" hook. So, here’s the workaround: https://businessbloomer.com/woocommerce-add-content-below-the-single-product-page-images/

Otherwise, these are the actions related to this hook.

Default Actions:

add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

Remove Default Actions:

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );

Add Custom Action:

add_action( 'woocommerce_product_thumbnails', 'bbloomer_custom_action', 10 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_single_product_summary +

Default Actions:

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 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

Remove Default Actions:

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

Add Custom Action:

add_action( 'woocommerce_single_product_summary', 'bbloomer_custom_action', 60 );

function bbloomer_custom_action() {
echo 'TEST';
}

Product Title

€554,00€6.565,00 €44,00€665,00

This is the short description!

woocommerce_before_add_to_cart_form +

Add Custom Action:

add_action( 'woocommerce_before_add_to_cart_form', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_before_variations_form +

Add Custom Action:

add_action( 'woocommerce_before_variations_form', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

Clear selection
woocommerce_before_add_to_cart_button +

Add Custom Action:

add_action( 'woocommerce_before_add_to_cart_button', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}
woocommerce_before_single_variation +

Add Custom Action:

add_action( 'woocommerce_before_single_variation', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_single_variation +

Default Actions:

add_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
add_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

Remove Default Actions:

remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation', 10 );
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );

Add Custom Action:

add_action( 'woocommerce_single_variation', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

€554,00 €44,00

In stock

woocommerce_after_single_variation +

Add Custom Action:

add_action( 'woocommerce_after_single_variation', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_after_add_to_cart_button +

Add Custom Action:

add_action( 'woocommerce_after_add_to_cart_button', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_after_variations_form +

Add Custom Action:

add_action( 'woocommerce_after_variations_form', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_after_add_to_cart_form +

Add Custom Action:

add_action( 'woocommerce_after_add_to_cart_form', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_product_meta_start +

Add Custom Action:

add_action( 'woocommerce_product_meta_start', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

SKU: htr554yn
Category: Bracelets
Tags: tag1, tag2
woocommerce_product_meta_end +

Add Custom Action:

add_action( 'woocommerce_product_meta_end', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

woocommerce_share +

Add Custom Action:

add_action( 'woocommerce_share', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}
woocommerce_after_single_product_summary +

Default Actions:

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Remove Default Actions:

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

Add Custom Action:

add_action( 'woocommerce_after_single_product_summary', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

Additional Information

Weight 546 kg
Dimensions 546 x 456 x 456 cm
Option Option 1, Option 2

You may also like…

woocommerce_after_single_product +

Add Custom Action:

add_action( 'woocommerce_after_single_product', 'bbloomer_custom_action', 5 );

function bbloomer_custom_action() {
echo 'TEST';
}

WooCommerce Single Product Page Default Actions


// These are actions you can unhook/remove!

add_action( 'woocommerce_before_single_product', 'wc_print_notices', 10 );

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 );

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 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_sharing', 50 );

add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

// function woocommerce_template_single_add_to_cart() generates the following 4 actions
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 );

add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 );
add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

WooCommerce Single Product Page Customization – Video Tutorial

woocommerce-customize-single-product-page-PHP

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 [add_action], how to REMOVE content from the Single Product Page [remove_action] and how to MOVE content around on the Single Product page with a combination of both.

Where to add this code?

You can place PHP snippets at the bottom of your child theme functions.php file (before "?>" if you have it). CSS, on the other hand, goes in your child theme style.css file. Make sure you know what you are doing when editing such delicate files - if you need more guidance, please take a look at my free WooCommerce Customization video tutorial.

Does this snippet still work?

Please let me know in the comments if everything worked as expected. I would be happy to revise the snippet if you report otherwise (please provide screenshots). I have tested this code with Storefront theme, the WooCommerce version listed above and a WordPress-friendly hosting on PHP 7.

If you think this code saved you time & money, please join other Business Bloomer supporters and avail of 365 days of WooCommerce benefits. Thank you in advance :)

Need Help with WooCommerce?

Check out these free videos, tutorials and tips!

  • how-to-edit-woocommerce-with-php-snippets
  • woocommerce-hooks-add_action-list-visual
  • woocommerce-customize-single-product-page-PHP
  • woocommerce-customize-shop-page-PHP
  • woocommerce-advanced-customization
  • how-to-edit-woocommerce-cart
  • woocommerce-customize-checkout-page-PHP
  • woocommerce-email-customization
  • woocommerce-conditional-logic

Rodolfo Melogli

Author, WooCommerce expert, WordCamp speaker and Internet marketer, Rodolfo Melogli has worked as a WooCommerce freelancer since 2011. He helps entrepreneurs and developers overcome their WooCommerce nightmares :) Rodolfo is the organiser of WordCamp Dublin, the Dublin WooCommerce Meetup, the Dublin Ecommerce Meetup and the Dublin WordPress Meetup. He enjoys interacting with people, travelling and chasing tennis & soccer balls. Of course, he loves pizza too.

283 thoughts on “WooCommerce Visual Hook Guide: Single Product Page

  1. hi,
    really useful thank a lot.
    iny situation i have a problem.
    i hide the add to cart button …but the remove action remove as well my personalized button .
    is possible hide just the default add to cart button and keep my personalized one?

    1. Hey Ciro, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding! ~R

  2. I want to add image slider in single product page not a product slider. How to do that in single product page??

    1. Hi there, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  3. Any chance you can add a if else condition to the code? Trying to run a php code on a specific page only

  4. Thanks, bro. Good job!

    1. Great 🙂

    2. Great tutorial

  5. Thank you so much for this guide. This was helpful to me as I needed to add an image at
    woocommerce_after_single_product_summary. I have managed to do this now.

    1. Cool, Somtoo 🙂

  6. I want to add Start & End date at the single product page using datepicker range feature, product price will be calculated according to the number of days chosen by the customer, same update price will show at cart, checkout, and invoice. Per day price will be added by admin panel. Can you please help me to achieve this goal in woocommerce. Any help will be appreciated.

    1. Hey Mitchel, thanks for your comment! Maybe this might help: https://businessbloomer.com/woocommerce-display-advanced-custom-fields-single-product/

  7. Thanks Rodolfo – nice presentation and explaining – makes WooCommerce alterations a lot less scary. Already moved a couple of sections around after your lesson.

    One thing I noticed on your How to Customize the Single Product Page [Video] – on the website you are working on, under your ‘You may also like’ section – your product has an Add to Cart button. This is exactly what I’ve been trying to achieve – getting an Add to Cart button on another product featured on a Single page product.

    Do you have a lesson on how you got that – can you point me in the right direction – I’ve tried loads of plug ins but none allow you to use an add to cart button. Means they can buy an extra product without leaving the current page.

    So glad I found your resource – the only site I”ve discovered in plan(ish) English that explains how to do things to non-code geeks like me.

    1. Hi there, thanks for your comment 🙂 That’s my theme (Storefront) that nicely adds the buttons on the “loop”. Probably your theme has that disabled / unhooked. Check its coding and see if I’m right 🙂

  8. This guide is very useful. Thanks a lot.

    1. Nice, thank you so much 🙂

  9. Ive honestly always found woocommerce to be confusing in general but my biggest problem has always been setting up my product pages exactly how I want them. Your guide is so helpful, I plan on looking up more woocommerce guides to finally stop building out ecom sites on shopify and use woocommerce for all my future ecom sites. Thanks alot.

    1. Thanks a million Sergio 🙂

  10. Can I add some html to wc_dropdown_variation_attribute_options() output, wihtout having to do it in the core files?

    1. Hey Casper, thanks for your comment! That function provides you with a filter “woocommerce_dropdown_variation_attribute_options_html” that you can use to override the HTML output. Hope this helps 🙂

  11. not sure it was possible, but you have made your visual hook guides even MORE awesome and easy to use (with the little “+” sections). Nice work!!!

    I appreciate your efforts and knowledge! Keep up the good work

    1. Awesome 🙂 Planning to do the same with the other visual hook guides. Hope to find the time!

  12. Hi Rodolfo,

    Many thanks for these tips, your post is awesome. Thanks to this I have added an image just after the ATC button. I don’t remember exactly when, but I think this is from the last woocommerce update, the image is duplicated so I have now 2 images. Have you heard something similar quite recently? Do you have any idea why? And how could I fix this?
    Thank you.

    1. Hey Valentin, thanks so much for your comment! It could be true – what hook did you use?

    2. Thank you so much, I used the woocommerce_after_add_to_cart_button hook, and thanks to your question I tried with woocommerce_after_add_to_cart_form and it is no longer duplicated. It was weird because it was duplicated for some products but not for all of them. Do you have any idea why? I like understanding… 😉 Thanks anyway for your job, support and very helpful website.

    3. Awesome 🙂 I think variable products are messing with that hook, but I don’t really remember why at the moment 🙂 Keep learning Valentin!

  13. Fantastic visual guide for using hooks with WooCommerce, very useful indeed!

    1. Thank you 🙂

  14. Is it possible to have the woocommerce_after_single_product_summary appear above the woocommerce_before_single_product_summary. I want to put some content above the Title and Thumbnail.

    1. Hey Bob, please watch the video tutorial as I believe you misunderstood how hooks work. You can totally add content there by using (maybe) the woocommerce_before_single_product hook?

  15. Very helpful post for developer. Thanks

    1. Great 🙂

  16. Wow this change (expand) is definitely great, good job!

    1. Brilliant 🙂

  17. Fantastic, this new setup. Thanks!
    Your visual hook guides helped and still helps me a lot!

    (the only thing is, I had to scroll down for half a day to write my comment here )

    1. Ahah excellent Mieke!

  18. Hi, Rodolpho!

    Since discovering BusinessBloomer, I’ve learned so much. Thank you!

    In the Single Product Page, I want to move the gallery to the top of the page and have all of the rest of the content (the title, short product description, cart, tabs, etc.) below the gallery.

    I’ll restate the problem to be clear: as it is, the gallery appears in a column on the left and the product title, short description and cart appear in a column on the right. I don’t want a single column, rather than two, with the gallery appearing at the top of the page.

    Is that possible just using the hooks? Can you tell me how to do it?

    I’ve tried to figure this out without asking for help, but I’m missing something, I think. Thanks to your excellent Visual Hooks Guide, I have been successful moving some things around the page, but I’ve not been able to move that gallery to a centered spot all by itself at the top of the page. ACK! It’s been 2 weeks of tinkering to figure this out, and I’m about to give up. :-/

    Thank you again,
    –Melynda

    1. Hey Melynda, thanks for your comment! This is possible via CSS first (remove the two columns and make them 100% width), and then maybe some PHP to move elements up or down based on your mock-up. Hope this helps 🙂

  19. Never mind. I’ve figured it out. 🙂

  20. I love your posts! I learned a lot but now I have a problem. I want to insert a ACF before at to cart at affiliate product. At single product it does work but not at a affiliate ones.Do you have a solution?

    1. Hello Melanie, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  21. Hi, Rodolfo!

    Many thanks for this excellent tutorial and for your equally excellent companion video. I have examined both carefully several times and learned ~so~ much! After reading/watching I’ve been able to successfully remove the tabs part of the single product page. However…

    When I tried to use the woocommerce_after_single_product_summary hook, the content I tried to place there (in this case, ‘TEST’), ‘TEST’ appears below the product’s long description, rather than above it, as it shows on your Visual Hook Guide.

    So, then I tried to use the woocommerce_after_single_product hook instead of the woocommerce_after_single_product_summary hook, but that didn’t work, either. ‘TEST’ still appeared at the bottom of the page, below the product’s full description and just above the page’s footer.

    Is the Visual Hook Guide out of date, or did I do something incorrectly or misunderstand something?

    The code I added to my functions.php file to do both things is this:

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
     
    add_action( 'woocommerce_after_single_product_summary', 'replace_tabs_with_long_description', 10 );
     
    function replace_tabs_with_long_description() {
    ?>
        <div class="woocommerce-tabs">
        <?php the_content(); ?>
        </div>
    <?php
    }
    
    add_action('woocommerce_after_single_product', 'move_stuff_to_first_full_width_section', );
    
    function move_stuff_to_first_full_width_section() {
    
        echo 'TEST';
    
    }
    
    

    I also tried changing the priority of that second function, but even giving it a priority of 1 didn’t help; ‘TEST’ still appears at the bottom of the page, below the product’s full description and just above the page’s footer.

    Any idea about what might I might have done wrong?

    1. Whoops! I realize the code I put in my question is missing the priority. I can’t edit it in my question. But even when it’s corrected in my functions.php file, it still doesn’t do the trick.

      Also, I’d like to add, “Thank you!” again. 🙂

    2. I have a screen cap of the product page with a photoshopped note and big green arrow to illustrate my question, but there’s no way to upload it. Would you like me to send it to your email?

    3. *sigh* Nope. I was wrong again. That’s not the correct CSS, but as I suspect the problem ~can~ be solved with CSS, I shall (likely) trouble you no more. 😉

    4. Hey Melynda, thanks so much for your comment! Why not using this (please not the change of hook and the priority of 9 to show the function above the previously added long description):

      add_action( 'woocommerce_after_single_product_summary', 'move_stuff_to_first_full_width_section', 9 );
      
    5. Hi! I love your posts as they’ve been extremely helpful. Can’t thank you enough. I am having a similar issue as Melynda. I am inputting the following code:

       /* **/
      function desc_accordion() {
      	echo do_shortcode('[elementor-template id="9551"]');
      }
      /*
      *
      *
      **/
      remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
      /* **/
      add_action( 'woocommerce_after_single_product_summary', 'desc_accordion', 20 );

      My page is coming out the echo’d function splitting down the middle of the page(between product images and short description columns). Could you assist?

    6. ** This code works, but my echo’d function is below my related products. If i change the priority to 10, then it splits the 2 columns as described in the comment above.

       add_action( 'woocommerce_after_single_product_summary', 'desc_accordion', 10 ); 
  22. Is there a hook for displaying content after product description in the product description tab

    I have found one woocommerce_product_description_heading but that displays custom content before the product description.

    1. Good question Dheeraj! There is no do_action available, however the description tab uses the_content() WordPress function and you can filter that to add some content. Make sure you only filter the_content() if you’re on the single product page, as it also works on WordPress pages, posts, etc.. Hope this helps!

    2. Dearest, most patient Rodolfo,

      Please disregard my entire query, but I just realized that all I really need to do is change the number of columns to 1, which I think can be done with CSS, thus:

      .single-product div.product .woocommerce-product-gallery.woocommerce-product-gallery–columns-1 .flex-control-thumbs li {
      width: 100%;
      }

      Doh! 🙂

      Thanks again!

  23. Hi,

    This is first time i am going to ask for a help from you. I just aw your visual hook guide is really awesome. I really appreciate your help.

    What i want to do is to show Single Product price under ‘Add to Cart’ button. for example, if customer goes to single Product page and add variations the price show correctly under Product Title. When he click + button to make quantity 2. The price doesn’t change because i am using custom calculator plugin.

    What i want to do i want to show ‘Total Price’.$ Total price function under Add to cart button.

    Please see reference here. I will be really thankful if you send me function for this. I have great hope that you will reply with proper hook and function.

    Thanks in advance.

    Regards
    Aadil

    1. Hello Aadil, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  24. Hi Rodolfo,
    On March 27th I wrote a comment about the inability to hook into the woocommerce_product_thumbnails hook.
    A user of stackoverflow did supplied me with a solution to show the product tabs (description, review) underneath the product images. Apparently the HTML is still in the DOM as I’m told over there it is simply not showing. The solution he provided me with is:

    // The following is a temporary hack to work around a bug in WooCommerce and should be removed when WooCommerce is fixed
    add_action( 'wp_footer', function() {
        if ( is_product() ) {
    ?&gt;
    
        jQuery(function() {
            jQuery( 'div.woocommerce-product-gallery' ).append( jQuery( 'div.woocommerce-tabs' ) );
        } );
    
    &lt;?php
        }
    }, 99999 );
    

    I hope this is a help for a lot of us…….

    Best wishes,

    Adri

    1. Thanks for sharing Adri 🙂

  25. Hi there!
    My use case maybe covered but I wanted to state it and see if the community has any ideas.
    I have a product landing page with plenty of standard wordpress content – I simply want to add the whole of the specific product page to that landing page.
    I tried and failed to use a simple shortcode 🙂
    Is there a method I can use to merge a standard wordpress page with a product page – do I need to build a template for each product? Fortunately I only have 5 or 6 products (they are variable products but that is taken care of)
    Any thoughts gratefully received.

    1. Hey Paul! Why not doing the opposite i.e. using the default WooCommerce product page and add standard WordPress content to it?

  26. Hi, Rodolfo,
    Your support and dedication is totally awesome towards Woo-commerce. And here is my question. How to add continue shopping button with custom link? And i need to place it for single product page. And i am using two languages in my website. Can you help me regarding this?

    Thanks in Advance.

  27. Hello
    im trying to re-arrange items in products page. I am having trouble with moving this http://prntscr.com/j1onkl
    I used WooCommerce Products Compare from woocommerce

    Thanks in advance

    1. Hey Aris, thank you so much for your comment! I recommend you ask the plugin developers 🙂

  28. Hi Rudolfo,
    I believe I can use the visual hook guide to add a button below each product page in Woocommerce but how do I make the buttons on each product page behave different when clicked?

    1. Hey Dave, thanks so much for your comment! Good question – however this is really depending on what you need exactly. I suggest you take a look at “conditional logic”: https://businessbloomer.com/conditional-logic-woocommerce-tutorial/ and https://businessbloomer.com/woocommerce-conditional-logic-ultimate-php-guide/. Let me know 🙂

  29. Hi Rodolfo,
    The visual hook guide is extremely helpful. Thank you for creating it.
    Creating a e-commerce site with woocommerce I stumbled into the “woocommerce_product_thumbnails (may not work with the new product gallery since WC 3.0)” issue. You are right it is not working….. ;-( Doing some research I noticed that you brought it up over at Github (https://github.com/woocommerce/woocommerce/issues/16492) but did not discover a solution to it. Did you find a solution or workaround for it?

    I do need the ‘Product Dat Tabs’ right after the thumbnails. Without a gallery it is working fine but with te product gallery the tabs are hidden as explained on the Github thread.

    I hope to hear soon

    1. Hey Adri, thanks so much for your comment! Yes, I found a solution, but is theme-dependent – “woocommerce_before_single_product_summary” might work or might not, as I said it depends 🙂 Sorry but can’t hep more than this1

  30. Hi Rodolfo,
    One of my client have custom WP site for products and he want to setup WooCommerce for eCommerce features. According to your visual hook guide for single product page, I am trying to customize but confuse. So, will you please reply me what are the hooks that I have to used to customize single product page. It’s really helpful for me. Thank you.

    1. Hey Suresh, thanks for your comment! I recommend you watch the video tutorial that you can find on this same page – it should help 🙂

  31. Luv Ya a lot <3 Peace

  32. thank for this tututorial its helpful

  33. Hi Rodolfo,
    I have a strange problem on our website’s small webshop. The description lines and the cart button slithered somehow, for some reason. They are all on top of each other in the case of certain products (2 only). All the other products are just fine. I tried to delete those two and create them again from scratch, but it did not help. I guess the url link is the same and it is saved. Or I don’t know. Do you have any idea what this is? Have you ever met anything like this? I am looking forward to your answer.
    Thanks a lot.
    <3
    Kata

    1. Kata, thanks so much for your comment! Unfortunately this looks like custom troubleshooting work and I cannot help here via the blog comments. Thanks a lot for your understanding! ~R

  34. Hello.

    This information is really helpful. i want to know if this actions can be used in a child-theme.

    1. Yes, of course Ramses 🙂

  35. Hi Rodolfo,

    I cant seem to find a hook for the green text “In stock”. I want to move it bellow the “Add to cart” button or move “Add to cart” button above “In stock” text. Iam sure its very easy but just cant seem to find the right hook. Any ideas?

    1. So i figured it out:
      In wp-content/plugins/woocommerce/templates/single-product/add-to-cart/simple.php

      Need to move “echo wc_get_stock_html( $product );” to the bottom:

      Example:

    2.  <?php do_action( 'woocommerce_after_add_to_cart_form' ); ?>
      <?php echo wc_get_stock_html( $product ); ?>
  36. Hello,
    great page and great explanation.

    I am looking for a solution to add a “break” between the product image and the gallery?

    Cheers,
    oliver

    1. Hey Oliver, thanks for your comment! You can do so with CSS, no PHP needed

  37. Hi,
    Added the action. How I add a page content before add to cart button? This is where I am:


    add_action( ‘woocommerce_before_add_to_cart_button’, ‘page_content_mix’ );

    function page_content_mix() {

    Thanks!

    1. Hey Pedro, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  38. Hi Rodolfo,

    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );

    Thank you so much for this, it helped a lot. I’m new to CSS and I’m able to achieve what I want partially.
    I used the code to remove prices on product page.
    For variable product with more than 1 option, prices appear when I choose an option, this is perfect .
    For variable product with 1 option, prices doesn’t show, how should I make it appear?

    Prob easier to explain with a picture
    https://imgur.com/a/0a3Oh

    1. Hey Lawrence, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  39. Hello, I’m looking for a solution how to add full width gallery to the top of the product page. In best case scenario to add slider Revolution to the top of the product page. Would you have any idea how to achieve this ? Thanks

    1. Hey Tomas, thanks so much for your comment! You could echo the shortcode of your gallery by using one of the hooks provided – this is all I can say here, hope this helps 🙂

  40. I love you! Sometimes a bit of visual learning makes all the difference. Thank you SO much dude.

  41. Thank you Rodolfo for sharing that, it helped me a lot ans saved lot of time! Very clear and very useful. thank you!

  42. Hi Rodolfo, Thank you for what you did here.

    I need help, how to move the add to cart button to below the price?
    So I want to switch the position with short description txt.

    Here’s the screenshot to make it more clear http://prntscr.com/gqlwo9

    1. Hey Kristine, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  43. I would like to place a circle counter above the product image, instead of the product gallery. How can I proceed ? Thanks

    1. Hello Zanskar, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  44. Hi Rodolfo,
    Thank you so much! 🙂
    Your article has helped me tremendously to add text in following hook location: woocommerce_before_add_to_cart_button
    At this point I am struggling to decrease the margin-top (perhaps even make it negative) of this area where I’ve added the text. I’ve looked around but unfortunately haven’t found any useful info on how to address my text area through css.
    Could you please help me out on how to go about this, please?
    Thanks a whole lot in advance!

    1. Nico, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here via the blog comments. Thanks a lot for your understanding! ~R

  45. Hi Rodolfo,
    I’m a designer and very comfortable with html and css.
    Luckily most changes can be done easily.
    I have to dive deeper into php.
    Really great tutorials -I learned a LOT.
    There are two things i would like to learn or need to know.

    1. Is there an easy way to get the hook information on third party plugins.

    Like variations on single product that displays color and size.
    and
    Size Charts.
    Where do I get the hook information so that I can place them right?

    2. been asked before – and I know it is custom work. But maybe you can provide me with some general information or links. So that I get an starting point.

    For example I want to move the “size chart” link next to the heading of “Sizes”
    Two different plugins.
    The “size chart” is not a div tag – simple a.

    Any held, information or advice will be very very much appreciated!

    I am looking forward to learn that…

    Greetings from munich – germany
    Marcus Lee

    1. Hey Marcus, thanks for your comment! I usually search for “do_action” calls in third party plugins and themes to see what hooks they give you. Also, I check for all “add_action” calls to see what they add to WooCommerce. When I have these available, it’s pretty easy to remove or move things. Hope this helps

  46. How to wrap the thumbnails in “woocommerce_product_thumbnails section” inside a slider? TIA

    1. Hey Shakib, thanks for your comment! You will need custom work for that, sorry but I can’t help here via the comments. R

  47. Hello,

    I am trying to put information about our products under the images, and thumbnails using the woocommerce_product_thumbnails function, but I am having little luck. I noticed in one of the threads above somebody said after woocommerce 3.0 was released things would not show up in that column. Have you been able to find a solution for this? Can you point me in the right direction?

    Thanks

    1. Justin, thanks for your comment! Yes I did a custom job for a freelance client recently, same problem. Code is 100% dependent on the theme, so I cannot provide a solution here on the blog. Sorry 🙂

  48. thanks alot for visual html hooks. its very use full for me.

  49. Hello!

    That is a very useful tutorial but im stcuk with 1 thing. I try to move the meta to the bottom of the description tab but no luck with this. Can you provide a solution for this?

    Thank you

    1. Thank you 🙂 What code have you tried with?

  50. […] You can choose to remove an attribute of the product that is being displayed.  To do this use the remove_action function in your child theme’s function.php.  Example: remove_action(‘woocommerce_after_single_product_summary’, ‘woocommerce_template_single_rating’, 5);   This removes the product rating attribute from the woocommerce_after_single_product_summary function. Here is a link to a visual reference of hooks and functions that can be displayed on a WooCommerce single product template page.  Check this out, it was so helpful for me.  https://businessbloomer.com/woocommerce-visual-hook-guide-single-product-page/ […]

  51. Hi, this is a great tutorial thanks! One question:
    I’m struggling to put the price in a div that spans half of the container and put another div with a button in it next to it.
    So basically you’ve got the price and then next to it a custom button (it will say ‘book now’)
    Any pointers?

    1. Richard, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  52. Hi! is there a way to move the short description area (that is above the variation field) to right above the add to cart button (the last field before the add to cart button)?

    1. Hey Yvens, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

    2. thanks for the reply. how much would that cost?

      also, in another post you mention adding multiple add to cart button for single product pages (im not sure if you offered a solution to do this). is this possible for product pages with variations?

    3. Hello Yvens, if you’d like to get a quote, feel free to contact me here. Thanks a lot! ~R

  53. Thanks for this!

    I have the Advanced Custom Fields plugin. How can I create an action to put my custom field under the product gallery/thumbnails?

    Thank you!

  54. Hi Rodolfo,

    excellent guide!

    All those hooks seem to apply to all single-product pages. How do you add a hook to a specific single-product page?

    Best,
    Felix

  55. Hi Rodolfo,

    This worked great and thanks for the additional hooks! Can I ask what the arguments are doing? I couldn’t find anything on these. Ex: , 5 or , 10 or , 20. This is the only part of the code I couldn’t figure understand what it’s doing.

    Thanks again!

    1. Great Karen 🙂 Those “arguments” are called “priority”: https://developer.wordpress.org/reference/functions/add_action/

  56. Thank’s for such a useful information, great videos tutorial.
    Could you please help me to figure out how to move Add to Cart button in Single product pay to right side bar?
    Do you know if that is possible? Please advise.

    1. Hey ManGun, thanks for your comment! Yes, this is possible, but you will need to study how the sidebar is generated on the single product page and maybe add a widget with a custom shortcode into it or use a hook. Kinda complex, and unfortunately this is custom work. Thanks a lot for your understanding! ~R

  57. Dear Rodolfo!
    This has been awesome! Very helpful for me. But now we know how to modify the Single Page Product… How can I do the same for the Shop Page? In my case, I am interested in removing the Short Description (it is long and it disturbs user experience in the main page).
    Grazie mille!

  58. Hi Rodolpho,

    Ever since the WC 3.0 upgrade the action hook ‘woocommerce_product_thumbnails’ doesn’t seem to be working. I had a simple message being added after the product thumbnails, and all worked well until after the upgrade.

    Here is the code:

    function framing_info () {
    	echo '<div id="frame"><p id="frame_info"><i>Need help selecting the perfect display option for your space?</i><br>
    Scroll down to view our informative guide below:</p></div>';
    }
    	add_action( 'woocommerce_product_thumbnails', 'framing_info', 20 );

    Any ideas at all?

    Regards
    Rob

    1. Hey Rob, thanks for your comment! I still see that hook in the coding, have you tried again with this?

    2. I’ve also have a similar issue. If there is no product image uploaded, the code works.

      The code I’m referring to is:

      add_action( 'woocommerce_product_thumbnails', 'bbloomer_add_content_under_product_image', 40 );
       
      function bbloomer_add_content_under_product_image() {
       echo '<div class="under-image">This content will show under the image</div>';
      } 

      But when the product image is uploaded, this disappears. I’m using WOOCOMMERCE 3.1.1. Can you let me know if your code works in the newest update?

    3. You’re right. The Javascript that handles the new product gallery completely overrides the product-image.php file in case thumbnails are present.

      A workaround is needed here, and I suggest taking a look at the pluggable function ‘woocommerce_show_product_images’

  59. Hey Rodolfo Melogli,

    I was watching your videos but I cannot find anything what I need, I am searching 1 month for this…
    What I need is to have Number of stock inside the variation drop down.
    I cannot find anything related to this thing.

    — Variation Drop down of product —
    Size:
    Small – 1 in Stock
    Large – 3 in Stock
    Extra – Out of stock

    1. Peter, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Hopefully I will have time to create a snippet soon 🙂 Thanks a lot for your understanding! ~R

  60. Pretty impressive! Is there a way for me to make the Product image go full width, and all the rest go bellow it?

    1. Thank you Fernando! Yes, you can do that, but via CSS and not PHP 🙂

  61. how to display product description above the product name and product price on page shop in woocommerce

    1. Mounish, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  62. The visual hook guide has been very helpful! I’ve searched everywhere though for how to reorder content on a variable product page template and can’t find it. I wanted the category to appear underneath the product title and the tags below the product description, so for single products I used the following in functions.php:

    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
    add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 50 );
    

    This had the effect of doubling up the single_meta on the top and bottom of the page, and I just hid the duplicated material with CSS. A very messy solution, and it didn’t work with variable products. On variable products, the category and tags appeared below the product description only. So I tried the following:

    remove_action( 'woocommerce_single_variation', 'woocommerce_template_single_meta', 40 );
    add_action( 'woocommerce_single_variation', 'woocommerce_template_single_meta', 10 );
    

    But this only duplicates the category and tags below the description. Any advice?

    1. Hey Kelsey, thanks for your comment! Please take a look at this example on the official documentation to find out how to properly remove an action and avoid the duplication: https://codex.wordpress.org/Function_Reference/remove_action#Example

  63. What is the hook for the attributes? I want to put the attributes in by themselves and not in the tabs?

    1. Hey thanks for your comment! You will need to investigate this within WooCommerce plugin code, sorry but I can’t offer support here in the blog comments 🙂

  64. Hello, this really helped me alot.
    I have few questions.
    Can I have my own button? Or atleast can I change colour of button?
    When I click on product image it redirects me on single product page, can I change it? I want click on image and it take me on my own URL?

    Sorry for my english, thanks alot! 🙂

    1. Hey Thomas, yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

  65. Hello, very nice and interesting post. Please I have a question. How do I move the product description below the product image. Whats the code for product description

    1. Hey Otobong, thanks for your email! I recommend you watch the video below the visual guide to have an idea – let me know 🙂

  66. Hey! Any idea why WooCommerce gallery thumbnails might not display? I’ve tried everything I can think of.

    1. Hey Lex! It could be that your theme is out of date, Woo 3.0 completely changed the Product Gallery 🙂

  67. Hi Rodofol,

    The add and remove action didn’t work anymore after I upgraded to woocommerce 3.0, all the hooks from my single product page restore to default. After I tried to put the add the codes into content_single_product_page.php again, the page layout didn’t change, instead, the it displayed the extra codes at the bottom of the page.

    Can you tell me how to modify the code to make it work on the new version of woocommerce?

    Thanks.

    1. Hey Vincent! Hooks for the single product page didn’t change with Woo 3.0 🙂 Maybe your theme is out of date?

  68. Hello,

    can u tell how to add product to one custom page with option to choose color and quantity and add to cart button? is this possible?

  69. Hi Rodolfo,

    Third time this week i’ve ended up on your site, you have some great tips on here.

    I am currently trying to get the product tabs (woocommerce_after_single_product_summary) to show above the Image (woocommerce_product_thumbnails) and Summary (woocommerce_single_product_summary).

    Is this possible by de-registering and re-registering hooks?

    I’m struggling to see how.

    Cheers

    Stuart

    1. Hey Stuart, thanks for your comment! Yes, if you take a look at the “Single Product Page” video tutorial below, you will see you can remove first and then re-add. Also note that since 3.0 WooCommerce completely changed the product gallery, so hooks might have slightly changed since.I will schedule a revision for this article soon. R

  70. Thank you for your awesome and helpful article.

    1. And thank you for your feedback Javed!

  71. Thank you for your special and unique article, It was very useful for me and helped me for developing my themes

  72. Thanks Rodolfo Melogli for this wonderful tutorial .. i used your Visual hook guide single product page however there is one little thing i don’t get perfect whatever I try. I hope you can help me with this

    The product page is 100% width but the summary entry-summary css is the only container who is looking stretched

    1. Hey Sneekerz thanks for your comment! I’m afraid I can’t help this time – this is custom work and unfortunately I can’t provide premium support to free subscribers. Hope this is ok 🙂

      Just for your interest, I just launched https://businessbloomer.com/bloomer-armada/, and the $9/€9 would definitely cover your request. Let me know and thanks a lot for your understanding!

  73. Why does

    add_action( 'woocommerce_after_single_product', 'woocommerce_template_single_meta', 20 );

    broke my site?

    Message: Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘woocommerce_template_single_meta’ not found or invalid function name in /wp-includes/class-wp-hook.php on line 298

    1. Hey Florian, thanks for your message! There is nothing wrong with that, really weird. Try checking the single quotes > ‘ and make sure they’re all consistently vertical and not rounded > ’. Let me know 🙂

    2. Hi Rodolfo,

      sorry it doesn’t work.

      This code additionally doesnt work good, because Product Description would be insert after . Its very strange:

      function woocommerce_template_product_description() {
      woocommerce_get_template( 'single-product/tabs/description.php' );
      }
      add_action( 'woocommerce_after_single_product', 'woocommerce_template_product_description', 10 );
    3. Try to play with the “10”, see if that helps 🙂 That’s all I can suggest 😀

  74. Hi Rodolfo, nice tutorial congrats.

    One question: is that possible to do one loop in single product page? How can i do this?
    I would like to show all products in my home but with the single product layout… one by row

    1. Hey Anderson, thanks for your comment! You can try using the shortcodes WooCommerce supply you with, and forcing the shortcode to show one per line. Is this what you meant?

  75. Quality work here and a big thanks to Rodolfo for the super site. I’m wondering if you have a video or tutorial on how to find the template you want to edit. I’ve been trying to find the hooks used here, single product, but not sure how to find the correct php file or where it’s located in the file structure.

    1. Hey John, thanks for your comment! Why editing the “template”? These hooks are supplied in order not to override templates, as all the customization can be placed in your child theme’s functions.php. Let me know!

  76. Hi Rodolfo,
    I really love your visual hook guides, they help me a lot in understanding the woocommerce framework.
    One question though:
    I use the product add-ons plugin, and I want these add-ons (which consists of some simple questions and a file uploader) to be placed beneath the product image. I cannot figure out which hooks or filters to use to get this done

    1. Hey Toon, thanks for your comment! Well, you’ll need to see how your specific plugin add its content, then remove_action with the exact same call, then add_action under product images. A little tricky but it’s a good exercise 🙂 Let me know!

    2. Hi Toon,
      I am having the same problem with the product add-ons hook name that I cannot find.
      Did you manage to fix your problem and if so would you mind sharing?

  77. Hi Rodolfo, excellent post! Is it possible to move the variations grid, price and add to cart on the right side of the page, next to the title (like amazon template)? I have searched for hours for a solution but I could not find anything… Thanks a lot!

    1. Hey Marco thanks for your comment! Yes, of course it is, but it requires a good amount of PHP and CSS work, maybe that’s the reason why there is not much online 🙂

  78. Hi There!

    Excellent tutorial. Helped me plenty! One question, is there any way to move a component of the single product template (for examples reviews tab) to the end of the entire page? I would like to have a customized product on top, then my own materials, descriptions and pictures (which will be done manually) and then right above the footer, have reviews for this product. I would be essentially breaking the single-product into two parts.

    Is it possible?

    Thanks!!

    1. Hey Michal thanks so much for your comment! I recommend you watch my video tutorial about the Single Product Page, where you can learn how to “move” blocks within that page: https://businessbloomer.com/woocommerce-customization-single-product-page/. Hope this helps!

  79. Hello businessbloomer!

    How can i move the product short description to below the thumbail?

    And by the way – Thanks for the cool guide!

    1. Thank you so much Louise! I recommend you watch my video tutorial about the Single Product Page, where you can learn how to “move” blocks within that page: https://businessbloomer.com/woocommerce-customization-single-product-page/. Hope this helps!

  80. […] debes saber que puedes quitar prácticamente casi cualquier cosa de WooCommerce, solo tienes que saber cuáles están disponibles y quitar el […]

  81. Hello, Rodolfo!
    You have created the unbelievable site! I haven’t seen something like that – so simple and useful at one time. Your tutorials are really very useful for me while researching the Woocommerce plugin.
    Unfortunately my knowledge is not so high to solve some unusual tasks.
    So – I need to combine two products inside one product. The main product mustn’t have its own price.
    The grouping of the simple products suits me with several “no” – I need the ability to choose attributes (the size) of the product for each of the combined product.
    For example – I have “Grouped product #1”. It contains “Simple product #1 + Simple product #2”. Both of the simple products have different attributes (types of sizes). They are shown in the description tab as a default.
    So I added the code to the template of the grouped products (thorugh the “

    wc_dropdown_variation_attribute_options()

    “) that shows the dropdown list (it resembles the variation type product) from the attributes. Now I can choose the sizes for both products, but I can’t understand how to save this values to cart.
    I’ve read many tutorials, topics and core functions, but I’ve just found the way how to add my own fields in the checkout page and exactly in the order page, but how to tie the size attribute with the item in the cart?
    Questions: When the item gets to the cart, does it create some new post type? Or how to add the temporary variable which I can later use on the checkout page?

    p.s. … I can use

    add_action('woocommerce_add_to_cart', ...);

    And I can see my variables in the $_POST array. But what can I do with this variable? I want to add it through the WordPress&WooCommerce rules, not just by cookies or MySQL =)
    Your help is very important for me!
    Anyway – thank you a lot for the spent time!

    p.s.s. sorry for probably bad Enlgish – it’s not my own language!

    1. Hey Sergey, thanks so much for your feedback 🙂 All I can say in regard to your request is to take a look at the “Product Bundles” plugin, which gives you more flexibility in relation to that. Hope this helps a little!

  82. Fantastic Informational Tutorial !!! Exactly what I needed to break the surface. Thank you.

    1. Thank you so much Joe!

  83. Hi Rodolf,

    I would like to add product description below the product title. How do i do that… ? I would like to show product description not short description.

    thanks in advance.

    1. Hey Loki thanks for your comment! Take a look at this other blog of mine, where you will find the way to echo the long description: https://businessbloomer.com/woocommerce-remove-product-tabs-echo-long-description/. Hope this helps!

  84. Hello, Rodolfo! I’m still watching your video (again), hoping to get more clues. 🙂 I THINK this is the relevant action for removing the Pre-orders message, “This item will be released on Soon.”

    		add_action( 'woocommerce_single_product_summary', array( $this, 'add_pre_order_product_message' ), 11 );
    		add_action( 'woocommerce_after_shop_loop_item_title', array( $this, 'add_pre_order_product_message' ), 11 );
    

    I think the problem is the array and “$this”, but I’m not sure.

    Here’s what I ended up trying (based on this article: https://codex.wordpress.org/Function_Reference/remove_action), but it’s still not working:

    add_action( 'wp_head', 'remove_my_class_action' );
    function remove_my_class_action(){
        global $my_class;
        remove_action ( 'woocommerce_after_shop_loop_item_title', array( $my_class, 'add_pre_order_product_message' ), 11 );
    }
    

    Any idea what I’m doing wrong?

    Thanks a bunch!

    1. Uhm, I got in trouble with these add_actions added by classes so many times. At times, to optimize my time, I just give up and find a plan B.

      A couple of ideas: ask this question on the FB Group “Advanced WordPress”, you might be able to get decent answers. Also, the solution here might be not to move the pre-order up/down, but instead move the default WooCommerce elements above/below it depending on what you’re looking for.

      Just my honest thoughts 🙂

    2. That’s a great idea. I’ve never been to that group before. I sense danger. 😉

      I’m actually wanting to REMOVE the action altogether.

      Thanks for the lead, Rodolfo!!!

    3. 🙂 Also, another thing I forgot – if the plugin comes with support, that should be the #1 go-to place for this sort of things. Let me know!

    4. Yeah, I already placed a ticket. 🙂 Thanks again!!!

  85. Awesome stuff!!!

  86. Your article was very useful. I want to appreciate about your efforts to share your knowledge with other people.
    I have a question about the single page structure. Single product page is based on 2 columns. If I want to have a 3 columns instead of 2 columns and put my elements together in 3 columns, which action should I use? I didn’t see similar action that I can change single page layout. I dispose to change my layout of single product page and use from 3 columns. Can you help me or give me a notation how can I do this? many thanks for your response

    1. Hey Mehdi, thanks for your comment! The 2 columns are generated by WooCommerce via CSS, so if you know a bit of CSS coding you can easily change the layout to three and then use PHP to move elements into the correct column. Hope this helps!

    2. Many thanks your reply, I’ll try it in my child theme and then I’ll inform you about that. Many thanks for your answer.

    3. Hi Rodolfo, I hope you are good and everything is OK.
      Many thanks for your response about my previous question. I could change the layout by CSS and I have 3 columns on my product page. Now I have faced with another issue. Basic version of Woocommerce doesn’t allow to add several images in each part of your product variation. I want to add a field in woocommerce that I’ll be able to add several images to each product variation. Unfortunately, I tested 2 different plugins (additional variation images and smart variation images) but none of them didn’t work correctly. I know the reason because I used from third party theme (Enfold) and they don’t support it. Now I want to write it by myself. I need some information about how can I add this additional field inside the variation product part and after that I want to filter a product by them and show related images based on filter that customer has applied it (e.g. I have a T-shirt and it has several colors with several sizes. each color has several images. shopping customer wants to filter one of color and with this filtering, I want to load related images with this color in the thumbnail part) At the moment for filtering I use from Yith color and label plugin.
      Sorry for long question but I haven’t found any good reference to ask it. I put my questions in several forums but I haven’t gotten any reply yet.
      Many thanks for your guides

    4. Mehdi, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide a complementary solution here on the blog. Thanks a lot for your understanding! ~R

    5. Many thanks your answer. I got you and I don’t want to disturb you so much. Could you give me a reference to do that? I really like to register in your classes but I can’t do that. I’m living in Iran and due to sanction, we don’t have any access to having credit cart.

    6. I don’t have a reference in this case, sorry! And by the way, my classes are free, so you should be able to register (definitely no credit card required!). Try here for example: https://businessbloomer.com/master-woocommerce-shipping-tutorial-zones/ 🙂

  87. Thanks a lot! we just used this in our woocommerce.
    In our case, “woocommerce_single_product_summary” hook appeared below product title, just what we were looking for!

    1. Excellent, thanks for your comment!

  88. Thanks, this was very helpful! I used woocommerce_before_add_to_cart_form to display my product dimensions.

    1. Awesome, thanks so much for your feedback!

  89. This is really beautiful. Keep up your good work 🙂

    1. Thanks Ibrahim! 🙂

  90. First of all, 100% perfect content. not kidding. and iguess you know it.
    you dont find every day so many guides.

    i have a question, for the single product page, i hope i will be able to explain my self 😀
    i want to add a short description, then the add to cart button, and then more info.
    something like that :
    best x-mas socks ever
    *add to cart*
    size: 30 color: green bla: bla bla
    and have no idea how to .

    would love to know how, thanks a lot
    yoni.

    1. Hey Yoni, thanks for your comment! Try watching this tutorial, it should help you: https://businessbloomer.com/woocommerce-customization-single-product-page/

  91. Hi Rodolfo,

    I tried to write some comments earlier, but they seem to be missing now, so I will try again 🙂

    I watched your video and it’s great! I have some questions though:

    I am using WooCommerce subscriptions on 4 of my products. That means that the products are grouped and on the single product page you can choose wether to buy a single product or a subscription. I then want to add some custom text for each product just above the “add to cart” button. I used the hooks in your guide but I see now that they not seem to work with grouped products. How do I add an action that can insert custom text for each product just above the “add to cart button”? 🙂

    Thanks so much

    1. Hey Mai, thanks for your comment! I guess this is custom to grouped products, it could be they have a special hook. Try to take a look at the file that generates the add_to_cart inside the WooCommerce plugin > Templates > Single Product > Grouped. Maybe you can get some info there 🙂

  92. Hi There,
    I am so glad to see your post. I had an issue with my product page layout. I searched a couple of days but no luck.

    I just simply like to move the product variation (including attribute label and options) to be under the main image, above the product tabs (or even better to the product description tab area. The reason for this is that i have many colours for a product, the colour images will be listed very long (using Swatch plugin) in Product Summary area. I use these below codes, but nothing changes.

    remove_action( ‘woocommerce_single_variation’, ‘woocommerce_single_variation’, 10 );
    add_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_single_variation’, 15 );

    Please, can you advise where i am doing wrong?

    Thanks a lot!

    1. Hey Johnny thanks for your comment! To move them below the main image you’d use the hook “woocommerce_product_thumbnails” – let me know 🙂

  93. Just a quick thank you 🙂
    I thought I was in for a headache, but your post made my edits easy.
    Thanks much for sharing!

    1. Thanks so much for your feedback Martine!

  94. Thank’s for such a useful info. One question though:
    I use Woocommerce Version 2.6.9.
    Watching the hooks under the title”oCommerce Single Product Page Default add_actions” I count 24 hook functions.
    On the other hands if I watch the default Woocommerce template for a single product which is content-single-product.php, I can see only 13 functions(for instance the function woocommerce_show_product_thumbnails is missing)
    What is your explanation to that?
    Regards

    1. Hey Izack, thanks so much for your comment! So, the single product page template is generated by different files, not only the one you mentioned. For example, the hook you can’t find can indeed be found in the product-image.php file. Hope this helps 🙂

  95. You are awesome guys. You have save my day.thank u so much Rodolfo Melogli

    1. Thanks so much for your feedback Mohd!

  96. Thank you, this saved me from a lot of headache! 🙂 very useful info shown in a clear way.

    1. Awesome JanneK, thanks for your valuable feedback 🙂

  97. […] I found this article at Business Bloomer. […]

  98. This is very useful. So easy and clear to follow. Thanks.

    1. Thanks so much for your feedback Wayne!

  99. Ciao Rodolfo!
    i saw all your videos on youtube and i’ve read your hook guides here, but… i still haven’t found what i’m looking for!
    i’m building a music website and i’d like to add, right under the song title, it’s own author name, linking to his author page with bio and other stuff.
    i really don’t know where to start, there are no plugins for this… and also i’m not a “genious coder”.

    i hope you can help!
    thanks in advance!

    1. Ciao Marco! First, I need to understand where you have stored the author name. Is this a custom field that you added to each product? Or is it the author of the post (like for a “Post”, that can have different authors)? Or you haven’t started yet with any of the solutions above? Thanks 🙂

    2. still didn’t start with anything of that…
      i noticed that some themes have clickable post authors, linking to their archive page; so i think something like this would be perfect for me.
      since we’re talking about products, is it possible to assign each one of them to an author? like a post? i tried something some time ago with a custom post type, but it was not the same as the themes i told you before…

    3. this looks super useful!
      but how can i show the author name, linking to (i guess) his archive page, under the product name in the product page?

    4. Hey Marco – I don’t know 🙂 I think that plugin already does the job. If not, you’ll need a bit of custom PHP!

  100. all i want is to show my product price before a product description, kindly help me by providing a code
    thank you

    1. Usama, thanks so much for your comment! Yes, this is possible – but unfortunately this is custom work and I cannot provide you with a complementary solution here on the blog. Have you watched my video tutorial yet: https://businessbloomer.com/woocommerce-customization-single-product-page?

  101. THANK YOU! This is so useful 🙂

  102. Hi,

    I copied the actions into my functions file. The meta always seems to be above the cart. Even at default without any actions added it’s like that.
    Reordering makes no difference or it overlaps.

    I am trying to add the yith wishlist and have it set to display below the cart but it is always above. I’ve tried adding it with shortcode but it does the same thing.

    Help would be appreciated.

    Thanks

    1. Hey Jason, thanks for your comment! Very difficult to hep in this case as I don’t have sufficient information. Disable any cache plugins and server-side cache if anything, that might help you see the changes you apply 🙂 Let me know!

  103. well finally i found something more helpful and FANTASTIC 🙂

    1. Thanks so much Ahtsham 🙂

  104. Thank you so much for this. You’re a hero!

    1. Thank you Thiago – you’re a hero too for sending over your feedback! 🙂

  105. I have a feeling I will be studying on this website for a LONG TIME lol .. but I need help just to get started

    where(?!) is the “”” add_action(‘place-hook-here’,’your-PHP-function-here’); “”” inserted ? I tried the functions.php of the added theme (goodstore) with no luck. The goodstore-child folder doesnt have a functions.php … AND … this theme has several ‘woocommerce’ folders in different folders of its main folder ….

    I have a feeling that maybe I should only use woocommerce add just modify as needed, but that is a way down the road and I need to get my site up sooner better than later ..

    Thanks much for help and this resource!
    Jon

    1. Hello Jon, thanks for your comment! So:

      1) these PHP snippets go into the functions.php file of your active theme – better if it is a child theme so that you won’t lose such customization once you go updating the parent theme

      2) if the child theme is the active theme and doesn’t have a functions.php file – no problem – just create it from scratch! All you need is ” < ? php" on line 1 (no spaces & dbl quotes!) 3) if you have no child theme or are not using, start doing so now, before you mess too much with your original theme! Hope this helps 🙂

    2. ‘all you need is ‘ lol … cant see what I need (that is looks like more was to be added to the message and … is there a ‘Read more’ gone MIA?) rotfl

    3. You’re right – I fixed my previous comment now 🙂

  106. […] Great thing about single product pages in WooCommerce is that WordPress knows they are “posts”. So, you can use is_single. The list of hooks for the single product page can be found here. […]

  107. Hello Sir,
    Can you help me please?
    How can i move the “woocommerce_single_product_summary” to the right column as same as “Visual Hook Guide”.
    And now my single product page there is only one column.

    // My theme is the shophistic-lite on wordpress //

    Regards,
    Wanicbut

    1. Hey Wanicbut, thanks a million for your comment! I’m afraid I don’t know and don’t own that theme so I have no idea about this. Have you tried asking your theme developers?

    2. Many thanks for replying me sir, I’ll try again.

  108. Hi,
    Wonderful write up.
    I am using woo commerce for developing a site for a NGO. I have to add simple membership page like below. (wasn’t able to paste screenshot )

    Annual Membership:
    Student – $30 [] (checkbox)
    Individual – $45[](checkbox)
    Senior- $35[]

    News letter preference
    Print (radio button)
    Email (radio button)

    Add to Cart(button)

    Due to financial issues i cannot use other paid extensions/plugin for woocommerce and also I need this only for a single page.
    Could you please help me how to build a single page using woocommerce , Also how to remove thumbnail image for only a single page .
    Your help is much appreciated.
    Regards,
    Goud

    1. Hey Ashwini, thanks for your comment!

      I’m afraid I can’t help you as much as you’d like as many features are custom. For the membership, you could just create a variable product with different options.

      To add the newsletter preference, you should use “Advanced Custom Fields” plugin and then show this radio button on the single product page.

      In regard to the “Also how to remove thumbnail image for only a single page”, I will be running a free WooCommerce class (http://businessbloomer.com/conditional-logic-woocommerce-tutorial) very soon that should show that exact issue, together with other “conditional” logic.

      Hope this helps 🙂

  109. Hi Rodolfo,

    Many thanks for all this fantastic information about WooCommerce. As a newbie I find it hugely educational.

    I watched your ‘How to Customize the WooCommerce Single Product Page’ video and could not see an option to remove the Product description tab at the bottom of the single product page. Could you please let me know what command I need to remove the Long description at the bottom of the Product page.

    On another issue I also need to replace the white background colour from all WC pages and include the light yellow branded background. Is there a way to do this globally and simply? Many thanks for all your help.

    Nick

    1. Hey Nick, thanks for your comment!

      Well, to remove the description tab is very easy – do not enter any content in the product “long description” area when editing/creating a product from the dashboard 🙂

      If you need to remove the tab programmatically, you can do so by using this documentation: https://docs.woocommerce.com/document/editing-product-data-tabs/

      In regard to your last issue, well, that’s pretty simple CSS but it’s custom to your install/theme so I can’t help you without seeing your website first 🙂

  110. […] Visual Hook Guide by Genesis Framework – Click here to see WooCommerce Visual Hook if you are not using Genesis […]

  111. Hi, I really enjoy this article!

    But, i would like to know if is possible to change e “Choose an option” text from variations..

    Tnx!

    1. Hello Rodrigo! If you wish to change just a few strings of text, this snippet will be of help: http://businessbloomer.com/translate-single-string-woocommerce-wordpress/. Thanks for your feedback 🙂

  112. Hi again.

    Thanks for all the resources on the page.
    I have managed to clean up my functions.php and custom css by using remove_action instead. Shop runs faster now!

    I am trying to add a field (recommended retail price) to the single product page.
    Have added the field (+ content) to the product page, added script, added location and field name. Can’t make it work.
    Can I purchase some support here? Client really wants this.

    Site: http://fargkonsulthoganas.se/

    1. Johan, thanks so much for your comment! I will be emailing you shortly 🙂

  113. Thank you for creating your video and this guide! VERY Helpful! I appreciate it.

    I was able to remove several items, including the featured image, SKU, and category in a individual woocommerce product page that I am currently designing. However, I’ve been unsuccessful in expanding the “woocommerce_single_product_summary” to fit 100% full width. Since I removed the featured image, I’d like to use that space to fit the rest of my product information.

    Do you know if that is possible? Please advise.

    1. Thank you Cristian 🙂 Of course that is possible, and you should just use CSS for that – if you give me a URL I will send you the CSS snippet right away! ~R

    2. Thank you so much for leading me in the right direction on what to do with my product page. Thanks to your other WooCommerce post regarding CSS changes to one page/product I was able to expand my product page description to full page.

      http://businessbloomer.com/woocommerce-apply-css-changes-one-pageproduct/

      I ended up using the following CSS and it worked. THANK YOU!

      /* stretches the product description on full width */
      .postid-6039 .product .summary.entry-summary {
          margin-left: 0%; 
      }
      
    3. You’re very welcome Cristian 🙂

  114. Hello,

    the article is very helpfull for me. I bought a theme and now with this guide I am trying to customize it. Just only one question…I bought also a plugin for dealing with pre-orders. Once the plugin is installed it adds the text line “This item will be released on (desired date)” just below the price on the single product page. I would like to move that text line below the Pre-Order Now button so do you know how to approach this task with the visual guide? Could it be complicated to do?

    Thank you!

    1. Hey Luciano, thanks so much for your comment. this is not complicated, but it 100% depends on your plugin – which I’m afraid I don’t own. You will have to look into the plugin PHP files for the “woocommerce_single_product_summary” call.

      You should find something like that, with priority 11 to 19 (“just below the price”). When you find it, you can then remove it and re-add it below the Pre Order Now button. You can watch my tutorial “How to Customize the Single Product Page” to understand how remove_action and add_action work.

      Hope this helps 🙂

    2. Thank you so much Rodolfo, I did what you said and it worked perfect…A little difficult was to find the “call” but it worked!!

    3. Awesome Luciano, thanks for the follow-up 🙂

    4. Hello Luciano! Do you by chance remember the call you found? I’m in the same boat!

      I’m not surprised my search led me back to you, Rodolfo! 🙂

      Thank you both!

    5. Actually, I found the call, but I can’t seem to figure out the correct path to override the template. Is there a trick to this, Rodolfo?

    6. Sorry about the naive question about the templates. I’m trying to remove a hook, but it’s not disappearing. Argh. I think it’s the right hook, as the element is disappearing when I temporarily delete it from the template. But when I simply change “add_hook” to “remove_hook” in my functions.php (as you described in your fantastic video), nothing happens. Any idea what I might be doing wrong? Thanks!

    7. Sharon, what’s the code you’re using? Let’s take a look 🙂

    8. Awesome! I just posted in a separate comment… 🙂

  115. What a time-saver! Love being able to see where every thing is! Thank you soooo much!

    1. Diana, brilliant, thanks a lot for your feedback! Much appreciated 🙂

  116. I’m SOOOOOO glad I found your blog! Your tips are snippets are fantastic! Thank you!!!!!

    1. Thank you Patty 🙂 I just completed the next visual hook guide (archive page), it will go live on Monday – more value coming soon! Thanks so much for your amazing feedback! ~R

    1. You’re welcome Jan!

  117. Said it previously and I’ll say it again; these are absolutely brilliant. It helps a lot – there isn’t a lot of great documentation for woocommerce and I’ve learnt a lot with your posts – thanks doesn’t seem enough !!

    1. Thank you so much David! Hope to see you at the webinar 🙂

  118. Awesome!

    Now shop/archive page ha 🙂

    1. Fantastic! Thanks for your feedback 🙂 Archive page it is then!

Questions? Feedback? Support? Leave your Comment Now!
If you're writing code, please wrap it between: [php] code_here [/php]

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.