Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

WordPress 5.0 is out. Test all the great new features before upgrading your Live website. Read How!

Reorder Content on WooCommerce Single Product Page

Updated on July 25, 2017

5 Min Read
Reading Time: 5 minutes

A WooCommerce product page has a predetermined structure that shows product details in a fixed order. Generally, WooCommerce store themes do change this situation slightly by modifying the order of the information, but things do stay the same more or less.

Content Reorder Product Page

The problem is that the product summary order is predefined and no theme could do enough to give a new order to the summary. Fortunately, the solution to this problem (reordering product page contents) is simple: change the order of the product summary page through WooCommerce hooks. Remember that the code will go into functions.php (located in the main or the child theme).

Hooks of WooCommerce Single Product

The content of the single product summary is displayed through the action of the following hooks. These hooks are executed in ‘woocommerce/includes/wc-template-hooks.php’

Every hook displays one product detail. You will notice that each hook has a number associated to it. This number sets the priority of the hook and determines the execution order of the hook. In this case, the higher the number, the lower would be the priority of the execution. For example, the execution order of the ‘woocommerce_single_product_summary’ would be product title, price, excerpt, add-to-cart, meta and sharing links:

Now in order to change the order of the items, just change the associated priority and the WordPress will change the display order. For this, just remove the hook first and then re-add the hook with the revised priority. Check out the following code snippet for an implementation of this process:

Create and Show Custom Fields

Use  Advanced Custom Fields Plugin to add a WooCommerce custom post type ‘Products’. This is then used to add custom data.

Now in order to display the custom data on the product summary page, I will use a function that hook the fields to a WooCOmmerce action (with the desired priority). In the following code example, I will display custom fields after product excerpt but before add-to-cart:

Note:  these changes have to be made in the functions.php file


In this tutorial, I discussed how to reorder content of WooCommerce Product page, This is a great way of personalizing the WooCommerce product page through a custom structure. If you need any help, do leave a comment below.

Share your opinion in the comment section. COMMENT NOW

Owais Alam

is the WordPress Community Manager at Cloudways - A Managed WooCommerce Hosting Platform and a seasoned PHP developer. He loves to develop all sorts of websites on WordPress and is in love with WooCommerce in particular. You can email him at

Be the first to check out WordPress 5.0

Use our Staging feature before upgrading your website to WordPress 5.0.

Get Our Newsletter
Be the first to get the latest updates and tutorials.