WooCommerce Visual Hook Guide: Single Product Page

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_before_single_product

 

woocommerce_before_single_product_summarySale!

 


woocommerce_product_thumbnails (may not work)
woocommerce_single_product_summary

 

Product Title

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

This is the short description!

woocommerce_before_add_to_cart_form
woocommerce_before_variations_form

Clear selection

woocommerce_before_add_to_cart_button

woocommerce_before_single_variation
woocommerce_single_variation

 

€554,00 €44,00

 

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_startSKU: htr554yn
Category: Bracelets
Tags: tag1, tag2
woocommerce_product_meta_end

 

woocommerce_share

woocommerce_after_single_product_summary

 

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

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 CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @updated       WooCommerce 4.0
 * @community     https://businessbloomer.com/club/
 */

// 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.

Related content

  • WooCommerce: Disable Variable Product Price Range $$$-$$$
    You may want to disable the WooCommerce variable product price range which usually looks like $100-$999 when variations have different prices (min $100 and max $999 in this case). With this snippet you will be able to hide the highest price, and add a “From: ” prefix in front of the minimum price. At the […]
  • WooCommerce: Hide Price & Add to Cart for Logged Out Users
    You may want to force users to login in order to see prices and add products to cart. That means you must hide add to cart buttons and prices on the Shop and Single Product pages when a user is logged out. All you need is pasting the following code in your functions.php (please note: […]
  • WooCommerce: Add Custom Field to Product Variations
    Adding and displaying custom fields on WooCommerce products is quite simple. For example, you can add a “RRP/MSRP” field to a product, or maybe use ACF and display its value on the single product page. Easy, yes. Unfortunately, the above only applies to “simple” products without variations (or the parent product if it’s a variable […]
  • WooCommerce: Show Number Of Products Sold @ Product Page
    WooCommerce database already stores the number of products sold for you. Therefore, you may want to show such number on the product page, close to the Add To Cart button. As we’ve seen in my book Ecommerce and Beyond, showing the number of sales for each product can increase your sales conversion rate. All you […]
  • WooCommerce: Remove / Edit “Added to Your Cart” Message
    A client asked me to completely remove the message that appears after you add a product to the cart from the product page. This is simply done by using a PHP snippet, so here’s the quick fix for you!

Rodolfo Melogli

Business Bloomer Founder

Author, WooCommerce expert and WordCamp speaker, Rodolfo has worked as an independent WooCommerce freelancer since 2011. His goal is to help entrepreneurs and developers overcome their WooCommerce nightmares. Rodolfo loves travelling, chasing tennis & soccer balls and, of course, wood fired oven pizza. Follow @rmelogli

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

  1. Hello everyone,
    Even if I didn’t understand everything, this article is certainly of great help!
    I don’t see how to add a function to hide the tags on product pages. I don’t want to delete these labels because I use them for classification by type of product.
    I just need to remove the label tag link (and not the attribute) in the product sheet.
    I don’t want to hide the .tagged_as class in the css.
    Can anyone help me?
    Many thanks to you and have a good weekend 😉

  2. Hi, Thats great work.

    I am trying to display weight, length, width, height on the cart, checkout, order and email.

    Can you please give me notation for this.
    Thank you for your response.

  3. Is it possible to add the upsell products in the sidebar?

    1. Hello Gessy, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  4. Great great help as usual on this website !
    I want to add an onclick event function on woocommerce_product_thumbnails , but is that possible with current WooCommerce version as it seems that hook could not work?
    Thanks!

    1. You can add an onclick listener with jQuery anywhere in the page. So it won’t be a problem

  5. Thanks for this Rodolfo. I have saved it for easy go reference. 🙂

  6. Thank you very much, Rodolfo and all who have contributed, for this page! It’s of tremendous help and value.

    For all those who are pulling their hair out over getting these hooks to work in Elementor, please look at the solution offered by WebmonitorBondis on Apr 28 in this Github link: https://github.com/elementor/elementor/issues/5574

    It does need some additional CSS and for some reason Elementor throws a 500 server error every time you try to save a page, but it does save it. I added the additional CSS to that same thread

  7. Almost there but cannot figuring out one thing. I want the product title, the price and the breadcrumbs beneath the variation selection options but whatever I try to do…….cannot get there. Anyone has had the same wish and has the solution?

    1. Hi David thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  8. Thanks for this Rodolfo, we always use your hook guides. Saved us a lot of time 🙂

  9. Very useful post, thanks!
    I used hooks to move my thumbnail gallery to the ‘woocommerce_after_single_product_summary’ hook.
    However now my thumbnails are not interacting with the main product image any more, and instead a click on them opens a new window. Any tips on this matter?

    Best

    1. Hey Stijn, yes, I guess the gallery also requires some JS and therefore the fact you moved it elsewhere is not triggering it. You will either need to match the same classes/ids so that code triggers, or write your custom JS to make it work

  10. Great article thank you.

    I am using the ‘woocommerce_before_add_to_cart_form’ hook to display some ACF values. However, if the product is out of stock, these values get hidden. Do you know how to prevent this?

    Any help is appreciated.

    1. In such case I’d use “woocommerce_single_product_summary” instead, with priority 30

  11. is there a hook to position content in the woocommerce-variation-description area?

    1. Variations use JS to load that info, so that’s very complex to achieve. But a way there is for sure in case you’re asking!

  12. Awesome post, thank you 🙂

  13. Hi! Sorry pretty new to WordPress and Woocommerce. Is it possible to remove content from woocommerce_after_single_product?
    For example, I don’t want to show the product images or change the background color of this.
    If you know any resources I can check, it would be very helpful as well! I tried using woocommerce_after_single_product_summary, but it returns empty from my end. Hope you can help! Thank you.

    1. Hi Frances! The video embedded on this page should help

  14. Thank you. How can I add a shortcode in the woocommerce_after_single_product_summary area?
    I tried adding the following in my child theme functions.php but have errors

    add_action('woocommerce_after_single_product_summary','do_shortcode([twb_wc_reviews])');

    Could you help me fix it?

    1. Untested:

      add_action('woocommerce_after_single_product_summary',function(){ do_shortcode( ['twb_wc_reviews'] ) ) } );
  15. thank you for this, very helpful!

  16. Do you maybe know how to strip HTML from product description with filters?

    1. Hi Greg, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  17. The Visual guide was really helpful

  18. Great article. I finally can create my own WooCommerce Themes! Single Product template is so hard to understand at the beginning.

    1. Nice!

  19. Hello. Thank you for your awesome work. My question is twofold.
    1) Is it possible to change a 2 column product detail page into a 3 column one? We would like The image, Short Description and Add to cart functionality all to be at the top of the page.
    2) Can we reorder where the various hooks go? See my first question as an example.
    Regards
    Richard

    1. Hi Richard, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  20. Hi, thanks for this tutorial which is really help to see clearer in such a maze…
    But I still struggle with something…

    I have created a custom taxonomy that I want to show on the shop page/all products (below the category/tag section), I managed somehow to find the correct template to show it on the one product page, but not on the shop page… I just find hooks, loops and actions, but no html…

    Thanks for your help!

    1. Not sure I follow, sorry

  21. i want to add some static text in my single product page in the end of product main section. actually “woocommerce_after_single_product_summary” this hook add the text below comment section I want to put it above of my comment section , is there any hook?

    1. There are no comments in the single product page?

  22. Thank your for this AMAZING guide. I’m using WooCommerce with Learnpress on a membership website, and your tips help me so much to customize some specific contents.
    1000 thanks, really.

    1. Cool!

  23. is it posible to reverse the column ?
    all hooks on right will move to left, and vice versa

    so the current native layout also will reverse

    1. No need, just use CSS

  24. Hello
    I was always looking for this and now I found it here
    Thank you
    I omid from Iran

    1. Awesome

  25. Please can you add woocommerce_before_add_to_cart_quantity and woocommerce_after_add_to_cart_quantity to the hook guide?
    The hooks are present in add-to-cart/(simple|grouped|variation).
    Thanks, those hooks guides are so time-saving!!!

    1. Done, thanks!

  26. Enjoyed this post 🙂

    Now what about inside tabs? For example how to add a custom field to the Description tab under the product description? Please

    Thank you!

    1. Hey Mac, in this case you’d need to filter the_content(), which is a WordPress function

  27. How do you display the visual hooks in WP?

    1. I haven’t done that yet alright

  28. I just want to add meta data like SKU above to SKU in single product gage as following but don’t know where and how to add this.

    MANUFACTURER:
    MANUFACTURER PART NUMBER:

    Please help me with step by step guide along with copy and paste code.

    I want this both meta data for each product when I will start import the product via .csv file also like regular import.

    1. Hi Naurej, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  29. Hello.
    I am here just to tell you that, at 2020, your page is my woocommerce bible.

    Thanks a lot!!!!

    1. Thank you Javier!

  30. Hello,

    How to manage this action hook “WC_Structured_Data::generate_product_data() – 60” in WooCommerce. I want to move this from woocommerce_single_product_summary action to another action.

    1. Hi Yogesh, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  31. First of all I want to thank you for the beautiful work, it has helped a lot.

    If you can help me with a question. I created the functions using the action woocommerce_after_add_to_cart_button and it works on the products page but when I open the product using quick view the function is not triggered. PHP is processed, but javascript is not. What would be the reason.

    Grateful for the attention.

    1. Hi Jose, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  32. I added some images below the woocommerce_product_thumbnail it works as long as there are no thumbnails

    and this is the log that it should have underneath. I would appreciate your assistance I tried changing the styling around for display and for the position. I can not work out what is blocking it on the pages with thumbnails.

    thank you for your advice

    1. Hi Will, when there are thumbs, WooCommerce “replaces” the whole HTML image element via jQuery. Therefore hooks won’t work because whatever HTML is replaces to make room for the dynamic image gallery.

      This is why with no thumbs the hook works. You will need a different workaround in case you have thumbs e.g. https://www.businessbloomer.com/woocommerce-add-content-below-the-single-product-page-images/

  33. hi, how to convert related products of single page as a slider ?

    1. You’ll need a plugin for that

  34. This is very useful, thanks.

    1. Thank you!

  35. Hi, Rodolfo
    thanks for nice share.
    How can you add_action on a particular product? Instead of the all products?

  36. Thank you, great job !!!

    1. Cheers

  37. Thank you for the visual guide.

    I have some custom options that I want to put in this area “woocommerce_after_single_product_summary” instead of the default “woocommerce_before_add_to_cart_button”. However, it seems that Woocommerce does not process the additional information for custom options in “woocommerce_after_single_product_summary”. Can you help me with this please?

    1. Hello Ray, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  38. Hello Rodolfo,
    great post!!! Is it possible to change the order of cross and upsell products. Meaning that the upsell products are shown before ther cross sell products. Is there any code you can provide for that? I tried some code of your post, but it didn´t work. WOuld be great to know. Thanks mate. Hope you are fine!

    1. Yes, it’s possible. I my course I teach you must remove_action() first, and then add_action() the same function with a different priority. Hope this helps a little

  39. Hi Rodolfo,

    I already hide the description tab on product page. The problem is how to change the description title on the content? Seems like description still there if I want to add some description on each product.

  40. Rodolfo,

    This is immensely helpful for a beginner such as myself. What I want to do is move the tabs of the product description and the additional information ABOVE the product summary so its the first thing you see.. the product requires some explanation before you can purchase.

    What I’ve done is the following:

    remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
    add_action( 'woocommerce_before_single_product_summary', 'woocommerce_output_product_data_tabs', 2 );
    

    As expected it moves the content above the summary as desired. However my variable product drop down box and add to cart button become non-functional.

    I’m just curious if you’ve run across this before and know of a quick fix or can steer me in the right hunting direction.

    Again may thanks this is awesome!

    Bill

    1. Hey Bill, you probably need to add a div with “clear:both” CSS, so that the content after that is clickable

  41. Hi!

    Is it possible to modify hooks in single product page on the mobile version?

    Thank you!

    1. Kinda. Check the wp_is_mobile() function

  42. Awesome! Thanks a lot for help!

    1. You’re welcome!

  43. I really enjoy using the visual hook guides you have put together. Is it also possible to directly edit the woocommerce sections using css? So for example, if I want to add a padding to the ‘woocommerce_single_product_summary’ only but nowhere else, is there a way of finding out the css names for these specific woocommerce hooks?

    1. Not really, no, they’re separate things.

  44. I am just starting to learn Woocommerce, and this project is a real gift for me. Greate idea! Thank you Sir!

    1. Awesome!

  45. Hello Mr. Rodolfo.
    Thank you so much for your site, it really help us here.. very appreciated.

    If i may ask please, in my theme (Supro) the reviews tabs is the one that is open at first sight, as the visitor scroll down the product page, the reviews tab is the one which appears first NOT DESCRIPTION which is bad as i want to show the product description first… Can you please give me a hint or something to fix that.. Thanks

    1. Hi Abdalhady, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  46. Mr Rodolfo Melogli, Thank you so much for this quality information. This was helpful for my business as I needed to add an image at
    woocommerce_after_single_product_summary. with your tutorial I did it.

    1. Great!

  47. Man how I wish I had half your woocommerce knowledge …. how simple coding this donkey would be. Thanks for all the great ‘free’ help. Talk about giving back. And so I am trying my luck that just maybe you are willing to give just a tad bit more.

    I wish to add a ‘buy now’ button to the single variable page. I use the following hook for that:
    ‘add_action( ‘woocommerce_single_variation’, ‘woocommerce_button_proceed_to_checkout’, 30 );’
    and low and behold, it shows a buy now button at the end of the single variable product page.

    When I hover my mouse over the button the link shows: /checkout ….. great!
    But when I click on it it loads up the link /cart and gives me the error:

    “Oops …. this page can’t be found!”

    Clearly I am doing something wrong. Only I don’t know what. Any suggestions? I would be
    truly appreciative of you assistance.

    Thank you in advance.

    1. Thank you Lode. What is the button URL you’re using?

  48. Love the map, thank you! I don’t understand how you’re supposed to use these to move elements around the page though. Would you be willing to elaborate? I’d like to move the product variations price thats listed below the variation dropdown by default above the short product description. I’m looking in functions.php but I’m not seeing anything. Thank you! x

    1. Thank you! Moving = removing and then readding (remove_action and then add_action, but with a different hook). CustomizeWoo.com teaches exactly this, take a look when you can

  49. Hello Rodolfo,

    I want to add a text link before the variation hook… how to do that?

    Thanks
    Stefano

    1. Hi Stefano, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  50. Hi Rodolfo,

    Even Woocommerce isn’t able to find the right handle to do what I am trying to do here, how can I move product meta under product thumbnails?

    Thank you so much

    Best regards

    1. New WooCommerce uses a jQuery product gallery, so the “woocommerce_product_thumbnails” might not work. Try with “woocommerce_before_single_product_summary”, a high priority, and a CSS float:left

  51. Hi! I have spent a lot of time dealing with $input_id variable – which is in use in quantity-input.php file.. i need this specific randomly generated id to use in my js code. but I cant use it out of this file. its not working on single.php and grouped.php.. how to solve this problem?

    1. Hi Alex, thanks so much for your comment! I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  52. can we move the product price and short description under add to cart button using hook?

    1. 100%

  53. Ah! Thank you so much for the tips! It was helpful.

    1. Great!

  54. Hello,
    great page and great explanation.

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

    1. Hi there, you can achieve that with CSS alone

  55. Thanks for this visual.

    I have a question regarding “woocommerce_after_single_product_summary” part

    In the additional information list like (Weight, Dimensions and Option) I want to add a tooltip to show a small description when someone hovers over it like the picture example below. I have been searching online to do such a thing and asked around but no one replied. I tried to edit the “single-product.php” and “class-wc-admin-attributes.php” and nothing is working.

    Is it doable?
    How can I do it?

    1. Hi Bassam, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  56. Hi Rodolfo,

    Recently i tried your hooks, however they are not working and i can’t seem to figure out why.
    I am using the divi theme, however i can’t find anywhere on the internet that divi blocks these hooks.
    Do you have experience with divi and these hooks and maybe know why they don’t work on my website?

    Thanks in advance!

    Lucas

    1. Hi Lucas – if you try your code on a different theme e.g. 2020, does it work?

      1. Hi Rodolfo,

        Good one! Haven’t tested that at the time of writing.
        I just tested it on a clean woocommerce webshop and it did work, so it has something to do with Divi.
        However i still can’t find why it doesn’t work with divi and how to fix it.

        1. Yes, Divi probably customizes WooCommerce, so you have to hook/unhook Divi functions and not WooCommerce default functions

  57. Hi Rodolfo,
    Where is the reviews tab in this visual guide? I wanted to refer some sections of the same.
    Please guide.
    Thanks

    1. Yes you’re right. If you tell me the position I can search for a hook and let you know

  58. Thank you for creating your video and this guide! VERY Helpful!

    1. Thanks!

  59. Hi Rodolfo,

    When we select an external product, How we make a “Buy product” button dislayed ONLY on a single product page AND NOT displayed on Home page or on Category page.

    Thank YoU.

    1. Hello David, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  60. Buenas amigo, muchas gracias por tus aportes!

    Pudieras pasarme tu correo para hacerte una pregunta que no he podido resolver?

    Muchas gracias por tu tiempo

    ——————————————————————————————————————————————————–

    Good friend, thank you very much for your contributions!

    Could you pass me your email to ask you a question that you cannot solve?

    Thanks for your time

    1. thank you Jose – feel free to contact me here

  61. Hello, can you tell me how I could “attach” a single page (the same page) under all products ?
    I would like to display some of my latest comments / reviews on this page.
    Thank you so much.

    1. Hello there, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  62. Hi Rodolfo, Very useful thank you dude!
    Mike

    1. Great!

  63. Hi ! Where is the “+” ?
    Why can not we have more information as before ?
    Your tutorial was great !
    Friendly, Thoven.

    1. Sorry had to take them out as not compatible with Gutenberg. I’ll try to find an alternative

  64. I am very grateful for you for creating the Visual Hook Guide, it will help me very much.
    Thank you Rodolfo 🙂

    1. Great!

  65. Hello
    I did not understand where to put this code?
    Thanks for the answer.

    1. Hi there, please watch this video tutorial: https://businessbloomer.com/customize-single-product-page/

  66. Salve Rodolfo, mi permetto di scrivere in italiano.
    Volevo sapere se c’e’ un metodo “semplice” per spostare la sezione sottostante, quella con la Descrizione e le Recensioni, nello stesso “blocco” dell’immagine, subito sotto di essa. In quanto un plugin delle opzioni che uso crea un sacco di spazio vuoto sotto all’immagine (quindi a sinistra delle opzioni).
    In pratica la scheda prodotto avrebbe una struttura due righe / due colonne ma con le due celle di destra unite in una sola colonna.
    Spero di essermi spiegato 😀

    1. Hi Nicola, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

    1. Welcome!

  67. Just want to say thank you for these visual guides. A incredibly massive help, and saves hours of googling!

    1. Thanks!

  68. Hi Rodolfo,
    I’m realizing my first e-commerce and I find that your blog is a real gold mine :).
    I have a very low budget and I can’t afford private consultancy right now, but I still try to ask you a question.
    My question is this: is there a way to insert a sidebar ONLY on the left side of the product tables? Somethings like this: https://prnt.sc/nxj549
    Thank you for your answer.

    1. Joe, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. Thanks a lot for your understanding!

  69. Hi Rodolfo Melogli,
    i want to know that is it possible on the shop page that along with product title we can add a toggle button also, with the functionality of that on click its show more description about products and on the again click it will be hide and shows us only the title of the products.

    i can’t able to put image here for the example. hope you understand my query and reply me asap.

    thanks.
    Sansa

    1. Hello Sansa, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

    1. You’re welcome!

  70. Hi Rodolfo!

    Amazing Content. Helped a lot. I watched your youtube videos which made it easy to work on my home business. Since it was a small business, I did not want to spend a lot on customizing. Your tutorials went a long way in realizing a decent ecommerce shop.

    Thanks a lot. 🙂

    1. Thank you!

  71. Thank you for these great tips!
    Do you have any tips on how to move woocommerce_after_single_product_summary fields to right after the product image?

    1. Thanks!

  72. I appreciated que quality of your article and the fact that you gave the functions direcly !
    thanks

    1. Thank you!

  73. Thanks for you tutorials. I have a question: for single product page of woocommerce, to add a description of my product I use this code:

    add_action( 'woocommerce_after_single_product', 'bbloomer_custom_action', 5 );
     function bbloomer_custom_action() {
    echo 'TEST';
    }

    So, my description is more complex, and I create that with a plugin widget shortcode like this: [widget id=”custom_html-3″].
    It is possible to use this shortcode instead of ‘TEST’?
    Second question: when I do woocommerce code in function.php, after single product description work on all of products of my shop. It is possible to add that only on a specific product?

    1. Hello Giovanni. Yes, you can use the do_shortcode WordPress function to return a shortcode via PHP. For the other issue, 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 🙂

  74. Thank you for sharing these woocommerce hooks, it’s very helpful.

    1. My pleasure!

  75. I have a child theme in place, but it’s needed updated a few times and sometimes the customizations are lost.

    I have it normally to where the product info that lands at the top of the Woocommerce page, is instead at the very bottom of the page so that the sales copy leads into the purchase. I tried the hooks above, but couldn’t get them to work. I am using the My Custom Functions editor.

    I’m wanting to:

    1. Move the product page box from the top to the bottom of the page.
    2. Remove the tab over the picture that says “Member Discount!”
    3. Move the “You May Also Like” videos BELOW the product box, instead of them being above it on the bottom.

    1. Hello Johnny, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  76. Hi, Rodolfo
    its usefull guide
    thanks for nice sharing

    1. Great!

  77. very detailed info on filters and hooks. I tried the above code to remove the thumbnail image gallery from displaying, it isn’t working. Looks like “woocommerce_product_thumbnails” is no longer available? I heard woocommerce had removed the hook completely and replaced it with jQuery. Any idea how to disable image gallery from displaying? Using css does the trick, “display:none” but it doesn’t stop the page from loading the thumbnails. I want to remove the gallery completely so it doesn’t load and hurt my page speed 🙂

    1. I know your pain, and yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  78. Thanks alot
    How can you add_action on a particular product? Instead of the all products?

  79. Hi, Rodolfo Melogli
    I really appreciate you share the details but i want your help regarding woocommerce color swatches. I want to show color tab in different section like home page but need only color tab not below Add cart button. how i can do this please provide me solution or short code. I am using Custom theme.

    Best Regard!
    Muhammad Adeel

    1. Hello Muhammad, thanks so much for your comment! Yes, this is definitely possible, but I’m afraid it’s custom work. If you’d like to get a quote, feel free to contact me here. Thanks a lot for your understanding!

  80. Hello and thank you for putting this document together, it’s very helpful. My question pertains to woocommerce variations and add-ons (woocommerce extension). I want to know if there is a way to separate them as the default display is a linear single column display. I have several products with several options and the page is not user-friendly because it’s too long.
    Do you know if a way that doesn’t require a lot or any programming to separate the variations and add-ons into multiple columns so the layout is friendlier?
    Thank you!

    1. Hello Geffertz, thanks so much for your comment! Yes, this is possible – 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

  81. This is really great and seems to have great potential for what I am doing. Unfortunately, I can’t get any of it to work. I have a functions.php file in my child theme directory and I have other code in the file that works so I am sure that the file is in the correct place and used by the site.

    I tried simply removing the title in the single product page like in the video and it is still there. I tried accessing on different computers and still no desired results. I am using Avada Theme Fusion. Does that have anything to do with it perhaps?

    I am really looking forward to using everything you cover regarding WooCommerce! Sure hope I can get it to work. Thanks for all your posts and video.

    1. Hey Dave 🙂 Yes, possibly Avada overrides default WooCommerce functions, so you’ll need to override Avada functions in this case. Good luck!

    2. I set the theme to Storefront and your solution works perfectly. Avada is doing something. I sure hope I can figure it out. I have contacted their support. Thanks for taking time to reply.

      1. Yep, excellent!

  82. thank for this tututorial its helpful

    1. Great!

  83. Hey,

    Happy to have found you help and advice.

    Question: I’ve added an action to show the single title, but it doesn’t show. If I try with price also, this doesn’t show. If I insert custom text like ‘test’ this works. But not specifically the title, which I want to add above price.

    add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5 );

    Any help would be helpful.

    Thanks

    1. Hey Tony, thanks so much for your comment! Yes, this is possible – 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

  84. Thanks Rodolfo. You have made my life easier with this! I do have a question…

    How can you add_action on a particular product? Instead of the all products?

  85. Thank you for very detail post, but In your post I don’t see any hook for woocommerce review form. Does it have any hook for review form?

    1. Hey Andy, thanks for your comment! For that you’ll need to do some advanced search inside WooCommerce template files, I’m sure you’ll find something about that. Hope this helps

  86. Hi, Rodolfo !
    Thanks for this WooCommerce Single Product Page [Visual Hook Guide] and its new presentation (+) ! I used the hook to remove default actions about woocommerce show product thumbnails.
    Result is very good for Firefox, but not for Chrome : the thumbnails are still there. How do I get the same result as for Firefox?

    In fact, under the big image of the product, I’ld have preferred to keep the thumbnails but something doesn’t fit : (if I click on the name of a variation, the big image appears; I find it very good.) If I click on a thumbnail, (the big image of the product appears, it’s OK) but unfortunately the right value doesn’t appear in the variation list.

    I hope I’m pretty clear.
    Thanks for helping me.
    Best regards

    1. Hi Jiravion! PHP is independent from browser behavior so you probably need to clear your cache. Hope this helps

    2. Thanks again, Rodolfo. When I saw the problem on Chrome, of course, I used right click on “clear memory cache and run updating” but without any change on MY computer Fortunately, we tried on other computers and it’s ok even on Chrome.
      Have a nice week-end !

      1. Great!

  87. Thank you for the in-depth tutorials.

    I was wonder how do you reorder the cross-sells to be above the Description tabs? This would mean changing the number to reorder the sections?

    1. That sounds right Eric. Give it a go!

  88. This is brillant, thank you for the overview!

    1. Awesome!

  89. This was very helpful… makes it easy to visualise where elements will be displayed. Thank you. Bookmarked to use as a cheat sheet for the future. 😀

    1. Excellent 🙂

  90. Hi, Sir
    Thank you for creating your video and this guide!
    I appreciate it.

    1. Great 🙂

  91. Hi Rodolfo,
    That’s fantastic guide.

    I tried to remove featured image from product gallery image with this code in function.php. However product title and price are still displayed in the center. Could you please help me to solve this issue?

    1. Hey Felix, 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

  92. Thank you so much Rodolfo. But I have no idea how to switch image area and production area?
    Can you teach me how to do that? thank you very much.

    Regards,
    Yuchin

    1. Hello Yuchin, thanks for your comment! For that, maybe CSS is sufficient – just invert float left with float right and vice versa. Hope this helps 🙂

  93. I attended a WordCamp this weekend here in California and was looking for more information on customizing. Found this video & it’s just what I needed! It’s amazing. Thank you so much for making this. Question, does the information here apply to all themes that integrate with WooCommerce, or does this (all that you taught in the video) only apply to the Storefront theme? Also, I’m going to search, but have you done a video on customizing the single product template by adding custom fields that can then be populated with an import of data? Again, HUGE thanks! 🙂

    1. Thank you Tanya 🙂 Hooks are theme-independent, unless themes are badly coded or heavily customized and remove default WooCommerce hooks/function to add their own (see: Avada, Flatsome, Divi, and so on). Sometimes it happens with Storefront as well, but at least it’s easier to handle. For your second question, sorry no I haven’t.

  94. Hi, Mr Melogli
    Thank you for creating your video and this guide! VERY Helpful! I appreciate it.

    1. You’re welcome 🙂

  95. Can you please help me out here.

    I have a woocommerce website. I need to add some content below the product for example here woocommerce_after_single_product_summary

    I have these templates from wpbackery, couple of small tables that say free shipping on all order, free returns, secure site …

    How can I add custom templates to the single product page?

    Thank you and I really hope you can help me out here.

    1. Hello Eddy, 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

  96. Thank you Rodolfo for sharing that, it helped me a lot ans saved lot of time! Very clear and very useful. thank you! i am confused in single product page because of your tutorial now i can understand it …. really your tutorial are awesome…again thank you

    1. Awesome 🙂

  97. Hi,
    I have redesigned the full page. However I am unable to show the variations, quantity and add to cart button.

    How can I do that?

    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

  98. Hello!
    Is it possible to remove “category” https://yadi.sk/i/2K9IK29V3amztw in product meta, using hooks?
    I understand and use a lot of hooks, but what i don`t understand is how to remove only part of meta.

    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

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

    1. You’re very welcome 🙂

  100. Great Tutorial! Thank you so much for being so helpful! You are a gift to us all 🙂

    I have a weird question.

    On your video there is a title above the photo that says “TEST”

    Then there is the title above the price that says “Test Product”

    I am guessing that the “test product” title is the text that is entered into the product name field but confused as to why / how you have two separate titles on the page?

    Again – sorry if this is a stupid question. lol

    Tanya

    1. Hey Tanya – thanks so much for your comment! Yes, “Test Product” is the product title, while “TEST” is a random string of text I wanted to display on the screen to show you can print anything you like, anywhere you like on the single product page 🙂

  101. 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

  102. 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

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

  104. Thanks, bro. Good job!

    1. Great 🙂

    2. Great tutorial

  105. 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 🙂

  106. 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/

  107. 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 🙂

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

    1. Nice, thank you so much 🙂

  109. 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 🙂

  110. 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 🙂

  111. 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!

  112. 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.

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

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

    1. Thank you 🙂

  114. 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?

  115. Very helpful post for developer. Thanks

    1. Great 🙂

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

    1. Brilliant 🙂

  117. 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!

  118. 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 🙂

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

  120. 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

  121. 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. 😉

      1. 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 );
        
    4. 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?

    5. ** 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 ); 
  122. 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!

  123. 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

  124. 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 🙂

  125. 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?

  126. 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.

  127. Hello
    im trying to re-arrange items in products page. I am having trouble with moving this https://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 🙂

  128. 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 🙂

  129. 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

  130. 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 🙂

  131. Luv Ya a lot <3 Peace

  132. thank for this tututorial its helpful

  133. 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

  134. 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 🙂

  135. 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 ); ?>
  136. 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

  137. 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

  138. 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

  139. 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 🙂

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

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

  142. 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 https://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

  143. 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

  144. 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

  145. 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

  146. 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

  147. 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 🙂

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

  149. 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?

  150. 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

  151. 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?

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

  152. 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!

  153. 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

  154. 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/

  155. 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

  156. 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!

  157. 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?

      1. 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’

  158. 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

  159. 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 🙂

  160. 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

  161. 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

  162. 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 🙂

  163. 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

  164. 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 🙂

  165. 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 🙂

  166. 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?

  167. 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?

  168. 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

  169. Thank you for your awesome and helpful article.

    1. And thank you for your feedback Javed!

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

  171. 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/club/, and the $9/€9 would definitely cover your request. Let me know and thanks a lot for your understanding!

  172. 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 🙂

      1. 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 );
        1. Try to play with the “10”, see if that helps 🙂 That’s all I can suggest 😀

  173. 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?

  174. 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!

      1. Hi,

        Thanks for your amazing work! It really helps me a lot!

        I’m trying to move the ‘product title’ to the left column, above the image.
        So I’ve removed the original placing of the product ‘title with:

        remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_title', 5);

        and tried to replace it with the code that I would expected after reading tour explaination, all the comments (pff) and the instruction video:

        add_action('woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 1);

        But this code is placing the ‘product title’ in the main area above the columns (called ‘woocommerce_before_single_product’)

        I also tried:

        remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
        add_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_images', 5 );
        add_action( 'woocommerce_product_thumbnails', 'woocommerce_template_single_title', 4 );

        But in this case the whole left column disappeared.

        Do you have any idear why this code isn’t working?

        Thanks a lot!
        Jason

        1. Hey Jason, you will also need custom CSS in this specific case.

  175. 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?

  176. 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 🙂

  177. 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!

  178. 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!

  179. 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!

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

  181. 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!

  182. 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 🙂

      1. 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!!!

        1. 🙂 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!

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

  183. Awesome stuff!!!

  184. 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!

      1. 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.

      2. 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

        1. 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

          1. 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.

            1. 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/ 🙂

  185. 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!

  186. 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!

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

  188. 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/

  189. 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 🙂

  190. 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 🙂

  191. 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!

  192. 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 🙂

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

    1. Thanks so much for your feedback Mohd!

  194. 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 🙂

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

    1. Thanks so much for your feedback Wayne!

  196. 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 🙂

      1. 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…

          1. 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?

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

  197. 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?

  198. THANK YOU! This is so useful 🙂

  199. 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!

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

    1. Thanks so much Ahtsham 🙂

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

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

  202. 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 🙂

      1. ‘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

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

  203. 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?

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

  204. 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 (https://businessbloomer.com/conditional-logic-woocommerce-tutorial) very soon that should show that exact issue, together with other “conditional” logic.

      Hope this helps 🙂

  205. 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 🙂

  206. 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: https://businessbloomer.com/translate-single-string-woocommerce-wordpress/. Thanks for your feedback 🙂

  207. 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: https://fargkonsulthoganas.se/

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

  208. 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

      1. 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.

        https://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%; 
        }
        
        1. You’re very welcome Cristian 🙂

  209. 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 🙂

      1. 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!!

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

        2. 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!

          1. 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?

            1. 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!

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

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

  210. 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 🙂

  211. 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

  212. 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 🙂

  213. Awesome!

    Now shop/archive page ha 🙂

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

Questions? Feedback? Customization? Leave your comment now!
_____

If you are writing code, please wrap it like so: [php]code_here[/php]. Failure to complying with this, as well as going off topic or not using the English language will result in comment disapproval. You should expect a reply in about 2 weeks - this is a popular blog but I need to get paid work done first. Please consider joining the Business Bloomer Club to get quick WooCommerce support. Thank you!

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