How to reorder WooCommerce’s single product template

Let’s set the scene…

We install the latest version of WordPress and upload and activate a bare bones blank theme. Next, we install and activate the latest version of the WooCommerce plugin and add one product ready for play time

We’re freelancing as a front-end dev here, with no input into the design (yet), but a designer has given us a mockup of how they want the single product page to be structured, so let’s take a look

To understand how to reorder the single product template, we first need to get familiar with WooCommerce templates.

Understanding WooCommerce templates

The WooCommerce page templates can be found inside the WooCommerce plugin folder, inside a folder named ‘templates’. Let’s be smart and move the WooCommerce templates from the plugin folder to our theme’s folder

1. Inside the theme folder, make a new folder named ‘woocommerce’
2. Inside the woocommerce plugin folder, find and duplicate the ‘templates’ folder
3. Move the duplicate ‘templates’ folder to the themes ‘woocomerce’ folder. Remember to (re)name the duplicate folder ‘templates’

Why do we do this? So we can now edit WooCommerce template files from within the theme folder and not have to worry about our changes being overwritten when the WooCommerce plugin is updated in the near future.

We won’t be editing any template files today, only looking at two of them.

Inside the theme’s ‘woocommerce/templates’ folder is a template file named single-product.php. This is, in Woo’s own words, “The Template for displaying all single products”.

single-product.php view on github

Open the single-product.php file and have a look at the code. It contains a few “hooks” which grab chunks of code that make up the single product template.

Notice this particular line

wc_get_template_part( 'content', 'single-product' );

It’s calling another template file named content-single-product.php. This file is, in Woo’s own words, “The template for displaying product content in the single-product.php template”.

content-single-product.php view on github

The content-single-product.php file is inside the theme’s woocommerce ‘templates’ folder. Like single-product.php, there are “hooks”.

We can see that, for example, the ‘woocommerce_single_product_summary’ hook includes the code that generates the product title, price, add-to-cart and meta (category and tags), amongst others.

Notice the numbers

/**
  * woocommerce_single_product_summary hook
  *
  * @hooked woocommerce_template_single_title - 5
  * @hooked woocommerce_template_single_rating - 10
  * @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' );

Each number is an order positon inside the hook. The lower the number, the earlier it appears in the layout.

So let’s do it!

// 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_single_product_summary', 'woocommerce_template_single_meta', 5 );