woocommerce

How to Override WooCommerce Template: A Quick Guide

Learn to Override WooCommerce Template Files

WooCommerce template files contain the markup and template structure for front-end of your store. WooCommerce template files themselves allow editing the markup and page structure of your online store frontend. 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.

You can edit these files in a safe way using overrides.

  1. Templates files can be found within the /wp-content/plugins/woocommerce/templates/ directory.
  2. Login in to your hosting server cPanel or use ftp and navigate to /wp-content/plugins/woocommerce/templates/ directory.
  3. Copy the needed file into the directory within your child theme named woocommerce (create if it does not exist), keeping the same file structure but removing the templates subdirectory.
  4. For example, if you need to overwrite file /wp-content/plugins/woocommerce/templates/archive-product.php, copy this file to /themes/themexxxx/woocommerce folder:
  5. The copied file will now override the WooCommerce default template file.
  6. Do not edit these files within the core plugin itself as they are overwritten during the upgrade process and any customizations will be lost.

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>

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.

WooCommerce template files contain the layout and structure of the interface template (and HTML email message) of your store. If you open these files, you will notice that they all consist of many hooks. They allow you to add/move content without having to edit the template files themselves. This approach helps avoid any updates problems, as the template is completely untouched.

Resources:

https://woocommerce.com/document/template-structure/
https://www.godaddy.com/garage/how-to-override-woocommerce-template-files/
https://www.templatemonster.com/help/woocommerce-how-to-override-woocommerce-temlates-files.html
https://zemez.io/support/wordpress/how-to/override-woocommerce-template-files/