Theming WooCommerce: How to Override WooCommerce Template Files

Custom theme

To override WooCommerce template files in your theme (or better yet, child theme) simply make a folder named ‘woocommerce’ within your theme directory, and then create the folders/template file you wish to override within it.

Example

As an example, lets override the price template for the single product page to add a notice. First we locate the template file in question at: woocommerce/templates/single-product/price.php (see the full list of templates).

Next, copy price.php to the following location: yourtheme/woocommerce/single-product/price.php. Open the file up and make whatever changes you require; here we will add a notice about the price:

<?php

/**
 * Single Product Price
 */

global $post, $product;

?>
<p itemprop="price" class="price"><?php echo $product->get_price_html(); ?></p>
<p>Notice: price shown excludes tax and shipping.</p>

Easy right? Using this simple technique you can override a vast amount of the WooCommerce frontend UI, as well as the HTML emails, in a reasonably upgrade-safe manner.

Beka Rice is a Sr. Director of Product Management at GoDaddy where she focuses on building an amazing WooCommerce experience. She’s been working with WooCommerce since 2013 and has built dozens of plugins used by hundreds of thousands of online stores.