Reorder Content on WooCommerce Single Product Page

by Owais Alam  July 25, 2017

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

Conclusion

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.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About 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 owais.alam@cloudways.com

Stay Connected:

You Might Also Like...