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>