Search

Reorder Content on WooCommerce Single Product Page

Listen to this article

Product Summary WooCommerceA single product page in WooCommerce, generally contains, the product details, sorted and displayed in a specified way. Some WooCommerce compatible themes, sometimes change the product summary order. Say, for example, a theme might show the product description in a separate tab, along with reviews, instead of below the title.

But there is only so much a ready-made theme can do. The summary order is predefined. What if you wanted something different. Well, WooCommerce is a well-built plugin. It provides several hooks, which you can use, to change the order of the content on the product summary page. These changes would have to be made in functions.php of your theme or your child theme.

[space]

Show me the Money: WooCommerce Single Product Summary hooks

The content displayed on a single product summary page is displayed on three actions. You can find these actions being executed in ‘woocommerce/templates/content-single-page.php’.

/**
* woocommerce_before_single_product_summary hook
*
* @hooked woocommerce_show_product_sale_flash - 10
* @hooked woocommerce_show_product_images - 20
*/
do_action( 'woocommerce_before_single_product_summary' );
/**
* woocommerce_single_product_summary hook
*
* @hooked woocommerce_template_single_title - 5
* @hooked woocommerce_template_single_price - 10
* @hooked woocommerce_template_single_excerpt - 20
* @hooked woocommerce_template_single_add_to_cart - 30
* @hooked woocommerce_template_single_meta - 40
* @hooked woocommerce_template_single_sharing - 50
*/
do_action( 'woocommerce_single_product_summary' );
/**
* woocommerce_after_single_product_summary hook
*
* @hooked woocommerce_output_product_data_tabs - 10
* @hooked woocommerce_output_related_products - 20
*/
do_action( 'woocommerce_after_single_product_summary' );

Each product detail is displayed on a hook for an action. The number associated with each hook basically sets the priority of execution. Lower the number, higher the priority of execution. Thus on the ‘woocommerce_single_product_summary’, the order of display will be, the product title, price, excerpt, add-to-cart, meta and sharing links, because of the associated weights.

[space]

To change the order you have to change the associated priority and WordPress will take care of displaying the content in the said order. To change the priority, you need to remove the hook and add it again with a new number.

Thus, if you wanted to show the excerpt after add-to-cart button, the weight of excerpt hook should be more than add-to-cart button hook, indicating lower priority.

/** to change the position of excerpt **/
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 31 );

[space]

 

Make it your Own: Showing Custom Fields

Custom data can be added to a WooCommerce custom post type ‘Products’, using meta boxes or by the Advanced Custom Fields Plugin. To show this custom field data on the product summary page, you would have to create a function which displays the fields, and hook it to a WooCommerce action, along with the desired priority.

For example if you wanted to display the custom fields after product excerpt but before add-to-cart, you would have to write a function similar to the one below.

function wdm_add_custom_fields()
{
    /** if your have added information using a metabox **/
    echo 'ABC'.get_post_meta(get_the_ID(), "ABC", true);
    /** if you have used ACF to add custom fields **/
    echo 'XYZ'.get_field(“XYZ”);
}
add_action( 'woocommerce_single_product_summary', 'wdm_add_custom_fields', 21 );

Remember, these changes have to be made in the functions.php file.

[space]

Similarly, instead of reordering content, you can choose to remove unwanted content, or add additional content similar to displaying custom field content. This can help you personalize your WooCommerce product page, by structuring the content the way you like.

Aruna Vadlamani

Aruna Vadlamani

78 Responses

  1. Thanks very much, very good info

    I just wanted to ask though about the column layout on the single product page. It seems our product page is split into 2 columns the image on the left and the Title, product description and tabs on the right with the up sell products etc underneth

    How do you make it that the product description is under the Images and spans the entire width of the page. I have looked everywhere but found nothing yet.

    Many thanks

    1. Hi Marty,

      Try this,
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
      add_action( 'woocommerce_after_single_product_summary', 'woocommerce_template_single_excerpt', 10 );

      The above code should move the product short description below the two columns.

      1. Hello,

        Thanks for providing the us the good info,

        My situation is also same, but the below code does not making my tabs to move to below image gallery:

        remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
        add_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_template_single_excerpt’, 10 );

        Instead only the product description is coming below the image gallery.

        Can you please help me in this?

          1. Hi John,

            I tried the following code with the Fruitful theme, and this works, but there is some problem with the CSS.

            remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
            add_action( 'woocommerce_after_single_product', 'woocommerce_output_product_data_tabs', 15 );
            

            I think a better solution would be to override the product page template.

          2. Hi aparna,

            Thanks for the reply. I too checked it and the css is disturbing.

            Can you pls elaborate, override the product page template? means css?

            Awaiting your reply.

  2. Hello Aruna Vadlamani.thanks for this article.i want to know that how can we change the position of product image, summary and meta via these hooks priority. currently my single page is showing image on left then summary on right and i want meta then image and then summary.

    1. Hi Manindra Singh,

      Okay. If I understood you correctly, you want the meta and image on the left and then summary on the right. For this, you can try the below given code:
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
      add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_meta', 5 );

    1. Hi Kelly,

      Try this:
      add_action( 'woocommerce_single_product_summary', 'wdm_show_sku', 5 );
      function wdm_show_sku(){
      global $product;
      echo $product->get_sku();
      }

  3. Hi, great article 🙂 I am trying to put my image below the title instead of above it, how would I do this?
    Any help much appreciated!

    1. Hi Heather,

      It depends on how your theme displays the content. Just try this,

      remove_action('woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);
      add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_images', 11 );

      1. I sure wish this worked on a single page.

        `remove_action( ‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20 );
        add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_show_product_images’, 9 );`

        I had an easier time moving the title above the images – that’ll have to do for me, for now.

        I think the problem is connected to this comment in wc-template-functions.php:

        //Output the product image before the single product summary.

        I can remove the images from the product altogether, but if I use the hook, they come back double!

        Maybe someone can help sort this in person in a few days.

        Thanks for the snippets!

      2. Hello this is a wonderful article, thank you very much. I am trying to have full width page, no side bar, title, short description, image, the long description (no tabs). I can get the above, but cannot make everything centered or remove the lightbox link on the image. Thank you in anticipation

        remove_action(‘woocommerce_before_single_product_summary’, ‘woocommerce_show_product_images’, 20);
        add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_show_product_images’, 11 );

        remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 );
        add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 6 );

        /* remove the meta – cat and tag */
        remove_action( ‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40 );

        (tabs removed and word description removed, no problem)

    1. Hi Ajith,

      To begin with, if product description is placed in a tab, try removing the tab, using the below code.
      add_filter( 'woocommerce_product_tabs', 'wdm_remove_description_tab', 98 );
      function wdm_remove_description_tab( $tabs ) {
      unset( $tabs['description'] );
      return $tabs;
      }

      Okay. The ‘excerpt’ is the ‘short description’. So, to change the position of the description (and add it below the title), try using the below code,
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
      add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

      1. Hi,

        I want to show the short description below the price. For this is had tried above code and now Description tab is hide but it is not being displayed below the price. Here is the live url of site: http://tacotunes.com/car-audio-video/shop/tacoma-speaker-installation-products/toyota-tacoma-6-5-6-75-heavy-duty-speaker-adapter-installation-kit/

        Please help me to sort out this issue.

        Thanks

        1. Hi Anil,
          By default, the short description is displayed below the price. Where was it being displayed before you changed it?

  4. I see this discussion everywhere but no one ever discusses how to change the location of the:

    woocommerce_show_product_images hook

    How do you take this hook out of the ‘woocommerce_before_product_simmary hook’ and insert it into the ‘woocommerce_single_product_summary hook’ under the product_title ?

    1. Hi Sam,
      Try this
      remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
      add_action( 'woocommerce_single_product_summary', 'woocommerce_show_product_images', 9 );

  5. How do make it so that the title is moved above the image on the page that lists all of the products? Not the single product page, but all of them.

    1. Hey Eric,

      I guess you’re referring to the ‘Shop Page’ or any Product Archive page. In that case, you’ll have to override the archive page template (archive-product.php).

  6. Hi, I would like to put some texts under the product picture. It’s the same text for all products. How do I use the echo function in order to place it there. What I’ve tried until now, places the text on top of the right column.

    1. I’ve tried something like this:
      add_action( ‘woocommerce_before_single_product’, ‘text_sub_poza’, 21 );
      function text_sub_poza()
      {
      echo “Hello”;
      }

      But it appears in the wrong column

      1. Hi Vlad,
        Changing the contents on the single image column, seem to be difficult, with hooks. This is because of the CSS applied. An option you have, is to change the single product template, and add any content inside the images div.

  7. Hi,

    I bought the instagram photo, the plugin appear at the end of the product page, i would like to call it just after product description ?

  8. Hi,

    I would like to remove the review tab and put in on another location on the product page.
    Can this be done with a hook?

  9. Greetings, I’m trying to figure a way to place the gravity form addons below the product tabs. Currently it shows above the tabs such as description, reviews, etc. Is this something that can be done through the functions.php and if so, would I copy it to the child theme?

    Thanks

    1. You know Fernando, I didn’t have any knowledge about the Gravity Forms add-on plugin, but my colleague was working with it so luckily he helped me out. 😀

      The Gravity Forms add-on displays the form on the woocommerce_before_add_to_cart_button hook. So try using the below code to display it after the Product Tabs. (I haven’t tried it out, so do let me know if it works)

      // get the Gravity Forms Add-on instance
      global $woocommerce_gravityforms;
      // unhook the current action from  woocommerce_before_add_to_cart_button
      remove_action( 'woocommerce_before_add_to_cart_button', array($woocommerce_gravityforms, 'woocommerce_gravityform'), 10 );
      // add the form after the product tabs using the woocommerce_after_single_product_summary hook
      add_action( 'woocommerce_after_single_product_summary', array($woocommerce_gravityforms, 'woocommerce_gravityform'), 15 );
      
    1. The footer area of the site usually comes from footer.php
      So you will have to write the below code in the footer.php, where ever you want to display the tabs.

      add_action('wdm_after_main_content','woocommerce_output_product_data_tabs', 10 );
      do_action( 'wdm_after_main_content' );
      

      Also, in content-single-product.php, remove the tabs by writing the below code above do_action( ‘woocommerce_after_single_product_summary’ );

      remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
      
  10. Hello, I find this useful but still not being able to achieve what i want,
    Cna anyone guide me,
    How to Replace the Featured images section with Short Description?
    (under Single product detail page?)

    1. Hi Kamran,
      The feature images are displayed using the ‘woocommerce_before_single_product_summary’ hook. Use this hook to remove them and then display the short description instead.

  11. Hi Aruna,
    Very helpful post. It explains the concept thoroughly. I would like to do display price and add to cart button on the same row (Price on left and add to cart on right). Even if i give both of them the same priority i.e. 10 one appears above other. Is there a way to get them on the same row? Any help is much appreciated

    1. Hi Ankit,
      The code provided in this article won’t help. You’ll need to edit the CSS.

  12. Hi there greetings, how do i bring gravity form below my woocommerce product addons in the product page it would be helpful if you could help me out

    1. Imran, what you’re looking for is similar to another query by Fernando asked earlier in the comments. You can use the reply to that comment to fulfill your requirement.

  13. Hi,

    I think this is the only website that discuss this problem. I have been looking for it everywhere!
    I am offering services, so i don’t need product images. So right now my single product page is blank on the left, product price is on the right and product description at underneath.

    How can i make the product description which is currently underneath to fill up the blank area of product images?

    1. You can either display a short product description or the default products tab instead of the product image. It’s important to note that you will definitely need to modify corresponding templates, to fit your requirement. You can change their position using the following code.

      remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );
          
      //code to add Product excerpt -- Product Images place
      add_action('woocommerce_before_single_product_summary','woocommerce_template_single_excerpt',20);
          
      remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
          
      // code to add default Product tabs -- Product Image place
      add_action('woocommerce_before_single_product_summary','woocommerce_output_product_data_tabs',20);
          
      remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 );
      
      1. Hi,

        I did that, the product image area still empty and the product description below is gone. Its not fill up the product image area at all

  14. Hi,
    I cleaned up my functions.php file and try again, it works, its only that the product summary (price, title, etc) is pushed down a bit. How to fix this?

        1. I am assuming that you have added product short description in place of Product Image. Override, ‘short-description.php’ file in your theme and add the following folder structure in it – ‘woocommerce/single-product’

          Just add, class=”wdm_description” – for ‘description’ div.

          Now add the following CSS

          .wdm_description {
            width: 48%;
            float: left;
            margin-right: 3.8%;
          }
          

          It will align all elements properly.

          If you want to add other element, just add the proper css for it. If you want to remove sale tag, you can also use,

          remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_sale_flash', 10 );
          
  15. Hi,

    I want to move price just before Add to cart Button, in product page. Is there anyway i can do this?

    1. Hi Shweta,

      You can try the below code:

      remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
      add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 29 );
      
  16. Hi, I want to move the Product attributes and variations into the product tabs? Is there a way to do this?
    thanks

  17. Hello
    Could you know me from where I get all the list of placement numbers which needed to be changed to change the placement.

    1. Hi Anuj,

      The ‘WooCommerce Single Product Summary hooks’ is what you’re looking for. It lists how every filter is weighted.

  18. Great article! Why doesn’t WooCommerce include this simple breakdown in their documentation is beyond me!
    Thank you!

  19. Hi, I want to display product description for the single product page below the image, but without using tab. Please anyone help me..

  20. Hello not sire if this is where this should go bit I have been trying to change the product tabs to accordions for a while now and I havnt figure this out. Can anyone help with this?

    1. Hey Sazzy,

      Try changing the priority of woocommerce_output_related_products to less than 10. Try using the below code

      /** to change the position of excerpt **/
      remove_action('woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
      add_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 8 );
      

      Hope this helps!

  21. Hi, This is really insightful, Is there a way to display the featured image on full-width format above the main content?

  22. hai…..plz solve my problem i tried from one month….plzzzzz

    ——————————————————————————————–
    i want to transfer the information when clicked (buy now button) on sales flash and single product page to my page template .then tell me how to store that selected product information into database..

  23. hello sir

    i want to add a book now button above the add to cart button that goes with booking price i give and rest amount is to be pay using add to cart button.
    the book now button book the products but when the customer pay the booking amounts. i hope you got what i want to say ……………..
    thanks in advance 🙂

  24. Hi Aruna, firstly wonderful explained. Have applied logic to a couple of sites with success.

    Have had one client though that wishes on the single product page for the “product short description” to be positioned below the “product image (on the left column)” and above the “tabs”.

    Possible to get your assistance in achieving this please. Have tried without success.

    Thanking you in advance
    Emin.

  25. Hi Aruna,
    I’m trying to get the woocommerce_after_single_product_summary to appear before the woocommerce_before_single_product_summary to allow me to put some content on top of the product photo. Is this possible?

  26. Hi, I want to display product description for the single product page below the image, but without using tab. Please anyone help me..

  27. hey. is it possible to place price at the SAME row with ‘add to cart’? so they will be near like
    $10.99 … [ ADD TO CART]
    second: i would like to move rating stars and short description (excerpt) under the image/thumbnails.
    woocommerce v.3.4.4
    thanks!

  28. I want to display product description instead of product expert, but without using tab. Please anyone help me…

  29. I use the 7’s theme, and I cannot find where to enter this text and coding. Can anybody tell me where to find this?

  30. Hello I am simply trying to reorder my add to cart button after EVERYTHING, but have only been able to move the entire summary around , not just the button itself. Any help on moving the ADD TO CART button all the way to the end(bottom) of each product page? So that it’s the last element

  31. Hello,

    I am trying to place product meta under product thumbnail pics. The below works but puts it full width above the pictures:

    // Remove product category/tag meta from its original position
    remove_action (‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40);

    // Add product meta in new position
    add_action (‘woocommerce_before_single_product_summary’, ‘woocommerce_template_single_meta’, 40);

    What am I doing wrong?

    Thank you for your help

Leave a Reply

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

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads

    WordPress Tips & Tricks
    Ketan Vyawahare

    How to Make Responsive Tables using CSS without Tag Read More »