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
Woo’s default single product template
Our starting point. This is how the template looks before we play with any code.
- Short Description (if exists)
- Category/Tag (if exists)
- Product Description, Additional Information, Reviews
- Related Products
(visible when 2 or more products in shop)
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
New reordered single product template
The new layout. This is how the template looks after we’ve done our front-end thing.
- Product Description
- Additional Information
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
- Inside the theme folder, make a new folder named ‘woocommerce’
- Inside the woocommerce plugin folder, find and duplicate the ‘templates’ folder
- 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!
The reorder code
We use two simple actions to reorder the single product template,remove_action and add_action, and we add them to functions.php file.
// 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 );
- Remove a piece of content from it’s original order position
- Add the content to a new order position
In the code example above, we are removing the single product template’s meta content from the ‘woocommerce_single_product_summary’ hook. Then we add it back to the hook, changing its order from 40 to 5.
We’re repositioning content by changing it’s order number.
[snippet slug=reorder-woocommerces-single-product-template lang=php]