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.

content-single-product.php

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.

functions.php

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).

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.

categories.php

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.

functions.php

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
Facebook
Share on Google+
Google+
Tweet about this on Twitter
Twitter
Pin on Pinterest
Pinterest
Share on LinkedIn
Linkedin

No Comments »

No comments yet.

Leave a comment