How to Change the Woocommerce Product Page Template

So you have a wordpress woocommerce theme but you want to make some design changes / additions the woocommerce product page.  Maybe you want to add a text area,  additional tabs or maybe add an additional button.

So the default product page is built up from the following files plugins/woocommerce/content-product.php  and  plugins/woocommerce/content-single-product.php.  If you have a an integrated woocommerce theme that you purchased from themeforest, the original woocommerce files are likely to have been overridden by the themes own content-product.php and  content-single-product.php files, with their own coding changes – normally to enhance the pages functionality or design aspects.  The content-product.php file contains the wordpress woocommerce loops and PHP hooks.   The content-single-product.php is the file you will want to edit if you want to add or make changes the product summary layout area.

 

Just follow these steps:-

 Step 1:  Run a Woocommerce system status check

In wordpress dashboard, browse to Woocommerce – system status and click on ‘GET SYSTEM REPORT’

 

 

 Step 2: View the system report and look at the overrides section

This will list the template files that are over riding the woocommerce template files.

You can see here that this site is using the atelier theme and that the themes content-product.php and  content-product.php is over riding the woocommerce plugin equivalent files.

So to add and make changes to the woocommerce product page,  you will need to one or both of these files.

 

 Step 3: Make a copy of the content-single-product.php file

 

It’s preferable to use a child theme for any theme files you are changing.  This prevents the files from been over written when you update the theme.. All you need to do is copy the single-product.php file to the child theme directory in the correct folder structure.

 

 Step 4:  Make  changes to the content-single-product.php file

In this example,  we wanted to add an order sample button, so simply added this code to the single-product.php, within the entry-summary class.
<p><a href=”/product-category/samples/”><button type=”submit” class=”sampleProductButton”><i class=”fa-plus”></i> Order Samples</button></a></p>