Contact us
Search
Contact us

Reorder Content on WooCommerce Single Product Page

Picture of Aruna Vadlamani

Aruna Vadlamani

  • Published on April 10, 2014
  • Last updated on April 24, 2025

Product Summary WooCommerce

Still struggling to grab your customers’ attention in your WooCommerce store? Reordering content on your product pages can help boost engagement and make the shopping experience on your WooCommerce store smoother. 

In this article, let’s explore how to effortlessly reorder content on WooCommerce single product pages.

A single product page in WooCommerce follWooCommerce-compatibleows a pre-defined page structure that generally includes product details, sorted and displayed in a specific order. However, some WooCommerce compatible themes may modify this default layout, altering the order of the product summary or order details. 

If you want to customize the product summary page, WooCommerce is a well-built plugin that provides several hooks. 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.

Reordering content involves customizing and updating your store’s product pages by adjusting description, changing gallery placement, moving price above title etc. These modifications can improve customer engagement and potentially increase your sales.

How WooCommerce Displays Product Content By Default

By default, WooCommerce has a set layout for product pages, including product details like the title, price, description, and images, displayed in a particular order. However, some themes might change this default layout.

If you want to customize your product page layout, WooCommerce offers several built-in hooks that allow you to reorder the content the way you want. You’ll be working with the functions.php file in your theme or child theme for this.

Reordering the content lets you tweak things like:

  • Moving the price above the title
  • Changing the gallery’s placement
  • Shifting the product description

Understanding WooCommerce Product Page Hooks

The content on a product page is controlled by action hooks. These hooks define where each piece of content appears on the page. You’ll find these hooks in the woocommerce/templates/content-single-product.php file.

Here are the main hooks that control the content placement:

  • woocommerce_before_single_product_summary: This hook runs before the product summary (e.g., sale flash, product images).
  • woocommerce_single_product_summary: This is where most of the product details appear, like the title, price, and add-to-cart button.
  • woocommerce_after_single_product_summary: This runs after the product summary (e.g., related products, product data tabs).

How to Reorder Content Using WooCommerce Hooks

Each element in the product summary is attached to a specific hook, and the number associated with each hook controls the order. Lower numbers mean higher priority—so items with lower numbers appear first.

For example, here’s how the woocommerce_single_product_summary section works:

  1. Product Title
  2. Product Price
  3. Short Description
  4. Add to Cart Button
  5. Product Meta (Categories, SKU, Tags)
  6. Sharing Links

To change the order, you can adjust the priorities of the hooks or remove and add them in the order you want.

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.

Need Help Reordering WooCommerce Content? Get Woo Expert Advice Now!

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

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.

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.

Also Read:

Picture of Aruna Vadlamani

Aruna Vadlamani

78 Responses

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

    Reply

    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.

      Reply

      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?

        Reply

          1. Hai, thanks for reply.

            I am using the below theme.

            http:// themes . fruitfulcode .com/fruitful/product/flying-ninja/

            Thank you..!

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

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

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

    Reply

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

      Reply

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

      Reply

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

    Reply

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

      Reply

      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!

        Reply

      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)

        Reply

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

      Reply

      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

        Reply

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

          Reply

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

    Reply

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

      Reply

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

    Reply

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

      Reply

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

    Reply

    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

      Reply

      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.

        Reply

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

    Reply

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

    Reply

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

    Reply

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

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

  14. 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?)

    Reply

    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.

      Reply

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

    Reply

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

      Reply

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

    Reply

    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.

      Reply

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

    Reply

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

      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

        Reply

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

    Reply

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

  19. Hi,

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

    Reply

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

  20. Hi, I want to move the Product attributes and variations into the product tabs? Is there a way to do this?
    thanks

    Reply

    1. Hi Shaun,

      I haven’t tried this, but I do believe this link has an answer for you https:// gist .github .com/renegadesk/3967956
      🙂

      Reply

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

    Reply

    1. Hi Anuj,

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

      Reply

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

    Reply

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

    Reply

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

    Reply

    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!

      Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    Reply

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

    WooCommerce Development

    Get Expert Tips to Override WooCommerce Templates Seamlessly

    Hire Woo Experts
    LearnDash Development

    Custom LearnDash Solutions, for You

    Explore services
    WooCommerce Development

    Custom WooCommerce Solutions, for You

    Explore services
    WordPress Plugins

    Scale your WordPress Business

    Explore Now
    WooCommerce Plugins

    Scale your WooCommerce Business

    Explore Now
    LearnDash Plugins

    Scale your LearnDash Business

    Explore Now
    Service Label

    Services Title

    Services Subtext

    Explore Services
    Label

    Title

    Subtext

    Explore Now
    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

      About Us
      Our Work
      Connect with Us
      Address
      • 105, Aniket, Kolbad, Thane (West), India - 400 601
      • 2035 Sunset Lake Road, Suite B-2, Newark, Delaware, 19702, United States
      Contact Us
      Skype ID : wisdmlabs
      WisdmLabs © 2025. All rights reserved