Editing WooCommerce Product Page Layout – The Right Way 2018

I need to edit the order of elements on the product page in WooCommerce. What I’ve done in the past is copy over the single-product.php from WooCommerce templates folder into my theme into a woocommerce folder. Then I would edit the crap out of it.

The correct way to do this is to look in the content-single-product.php located inside templates folder in Woocommerce plugin and see what order those elements are set to.


As you can see, woocommerce_template_single_title is set to 5, woocommerce_template_single_rating is set to 10 and so on.

Your mission is to remove that element and add it back in with the correct order inside your functions.php file.


This reorders the elements and puts them where you need them so then you can CSS to your heart’s content.

Adding Custom Content Into The Summary Section

To add custom content you just need to create a woocommerce folder in the root directory of your theme and inside create another folder named single-product. Here, copy the code below and paste it into a new file (name it whatever you want, for this tutorial we’ll call it mynewelement.php).


Now edit this file to contain the code for whatever you need. Here is what I did. I needed to separate the SKU from Categories into separate files. So I created 2 files, categories.php and sku.php.



Now you need to add these new elements to the product summary section. To do this, we go back to functions.php and add functions to include these new files and then we will pull them into the summary section and give them an order number.


That’s it. Now we just CSS it and bam, it’s done.

Don’t forget to save. haha

Share this with your friends!
Share on Facebook
Tweet about this on Twitter
Pin on Pinterest
Share on LinkedIn

No Comments »

No comments yet.

Leave a comment