---
title: "A Simple Guide to Override WooCommerce Templates"
url: https://wpvibes.com/blog/simple-guide-to-override-woocommerce-templates/
date: 2024-08-05
modified: 2026-01-19
author: "Rashi"
description: "When running an online store, customizing your store's appearance often involves customizing WooCommerce templates. Typically, you'd use WooCommerce hooks to make these changes because they allow you to modify functionality..."
categories:
  - "Tutorials"
  - "WooCommerce"
tags:
  - "woocommerce"
image: https://wpvibes.com/wp-content/uploads/2024/08/override-woocommerce-templates-1024x576.jpg
word_count: 1331
---

# A Simple Guide to Override WooCommerce Templates

When running an online store, customizing your store's appearance often involves customizing WooCommerce templates. Typically, you'd use WooCommerce hooks to make these changes because they allow you to modify functionality without altering the core files. This method is efficient and maintains compatibility with updates. However, there are times when you need to make more specific changes, which cannot be achieved through hooks alone.

In such cases, overriding WooCommerce templates becomes essential. This process involves overriding the default WooCommerce templates to meet your specific needs. In this article, we'll guide you through the steps to override WooCommerce templates. By the end, you'll be able to tailor WooCommerce templates precisely to your requirements.

## Key Takeaways

- Learn when and why to override WooCommerce templates

- Step-by-step guide to override templates using a child theme

- Customize product pages, prices, and cart layout easily

- Keep your changes safe from future WooCommerce updates

## What are the Benefits of Overriding Templates in WooCommerce

Overriding [WooCommerce](https://wordpress.org/plugins/woocommerce/) templates gives you a lot of control over how your online store looks and works. It allows you to make your store fit your exact needs. Here are the main benefits:

**Consistency Across Updates**

Using a child theme to override templates preserves your customizations even when WooCommerce or theme updates occur. This approach ensures that your changes remain intact and functional, avoiding potential conflicts with new versions of the plugin.

**Ability to Add Unique Features**

If you need to include custom features in your website, overriding templates provides a straightforward way to integrate these elements seamlessly into your product pages, checkout process, or other areas.

**Enhanced Customization**

Overriding templates allows you to make detailed changes to your WooCommerce store's design and layout. Unlike WooCommerce, which uses hooks with limited customization, template overriding provides complete control over how elements are displayed and structured.

## Understanding Default WooCommerce Template Structure

The default templates for WooCommerce are stored in the WooCommerce plugin directory. You can find them at `/wp-content/plugins/woocommerce/templates/`. These templates control various parts of your online store, such as how prices are shown, the layout of the cart, products, and more.

If you want to change the look and feel of your WooCommerce store, you will need to override these templates. For example, you might want to add custom information to the price display. Later in this article, we will discuss **how you can customize the look by overriding templates**.

![Default WooCommerce Template Structure](https://wpvibes.com/wp-content/uploads/2024/08/VSCode-Path-to-WooCommerce-Template-Structure.png)Default WooCommerce Template Structure

## How to Override Templates in WooCommerce

This section will talk about how to override WooCommerce templates easily. It can make your work easier and more organized. Here are the steps for overriding templates in WooCommerce:

### Step 1: Create a Child Theme in WordPress

The first step in overriding your WooCommerce templates is to **[create a child theme in WordPress](https://qikly.ink/create-child-theme)**. It is a simple process, and if you need help with it, our detailed guide can walk you through it step by step.

![Create Storefront Child Theme in WordPress](https://wpvibes.com/wp-content/uploads/2024/08/Create-Storefront-child-theme-in-WooCommerce.png)Create Storefront Child Theme in WordPress

### Step 2: Create a WooCommerce Folder

After you create a child theme, the next step is to create a folder named `woocommerce` in its directory. It is important to override WooCommerce templates. The path will be` /wp-content/themes/your_theme_name/`.

![Create WooCommerce Folder Under Child Theme in WordPress](https://wpvibes.com/wp-content/uploads/2024/08/Create-woocommerce-folder-under-child-theme.png)Create WooCommerce Folder Under Child Theme in WordPress

### Step 3: Locating the Template File to Override

After creating a child theme and a `woocommerce` folder in it, you can start customizing WooCommerce templates. Here's how you can do it:

- First, go to the WooCommerce plugin directory. Then, find the template file you want to modify. For example, if you want to customize the price display on product pages, locate price.php under `/wp-content/plugins/woocommerce/templates/single-product/`.

![Navigate to price.php WooCommerce Template File](https://wpvibes.com/wp-content/uploads/2024/08/Navigate-to-price.php-woocommerce-template-1024x48.png)Navigate to price.php WooCommerce Template File

- Then, copy the `price.php` file and create a similar folder structure in your child theme directory, like `/wp-content/themes/your_theme_name/woocommerce/single-product/`. Paste the `price.php` file into this new folder.

- Now that you have the `price.php` file in your child theme, you can make any changes. Open the file in a code editor and modify it to fit your needs.

![Paste price.php WooCommerce Template in Child Theme](https://wpvibes.com/wp-content/uploads/2024/08/Copy-price.php-to-woocommerce-child-theme.png)Paste price.php WooCommerce Template in Child Theme

## Customizing Overriding Templates

Once you've found the template you want to change, you can adjust it and see how it looks on your site. For example, if you're changing the `price.php` template file, you modify it in different ways, and then check your website to see how the changes appear. Below, we'll show three ways to customize the `price.php` template file.

### Adding an Icon Before the Price

To add an icon before the price for the single product page, you'll need to customize the `price.php` in your [child theme ](https://qikly.ink/create-child-theme)that you've already copied. Here's what you need to do:

- Open the `price.php` file in a code editor.

- Insert the code to display the icon before the price and save your changes.

`<p>
<img src="path/to/your/icon.png" alt="Price Icon"> <!--path of your icon uploaded on WordPress media library -->
<?php echo $product->get_price_html(); ?>
</p>`

After you save the template file, your single product page will show the icon before the price on the frontend.

![Default View of WooCommerce Product Price](https://wpvibes.com/wp-content/uploads/2024/08/Before-add-icon-to-WooCommerce-product-price.png)Default View of WooCommerce Product Price

![After Adding Icon Before WooCommerce Product Price](https://wpvibes.com/wp-content/uploads/2024/08/Add-icon-in-WooCommerce-price-1024x526.png)After Adding Icon Before WooCommerce Product Price

### Changing a Paragraph Tag to a Div

Next, we will do another customization in the `price.php` template file. This time, we'll convert a paragraph tag (`<p>`) to a div tag (`<div>`). This is a simple adjustment that involves updating the HTML structure. You need to replace the `<p>` tag with a `<div>` tag.

`<div>
<?php echo $product->get_price_html(); ?>
</div>`

After you save the code, visit a product page on your site to ensure that the price is now enclosed in a `<div>` tag instead of a `<p>` tag.

![Default View of Price p Tag](https://wpvibes.com/wp-content/uploads/2024/08/Make-woocommerce-price-tag-as-p.png)Default View of Price p Tag

![](https://wpvibes.com/wp-content/uploads/2024/08/Make-price-tag-as-div-in-WooCommerce-1.png)Make Price p Tag to Div

### Adding Custom Text Before the Price

Another customization we will do while overriding the `price.php` template is adding custom text before the price. It can be helpful to include a special message or label before your prices. You need to replace it with the code provided below. This new code will add your custom text before the price.

`<p>
<span>Buy at:</span>
<?php echo $product->get_price_html(); ?>
</p>`

In this example, "**Buy at**:" is the custom text that will appear before the price. You can change this text to whatever you like.

Overriding your `price.php` file allows you to add a unique touch to your product pages and highlight important customer information.

![Default Add to Cart Functionality](https://wpvibes.com/wp-content/uploads/2024/08/Before-add-custom-text-to-woocommerce-products.png)Default Add to Cart Functionality

![Changed Add to Cart Button Text](https://wpvibes.com/wp-content/uploads/2024/08/Add-Custom-Text-to-WooCommerce-product.png)Changed Add to Cart Button Text

Want to **[customize Add to Cart Button](https://wpvibes.com/blog/customize-woocommerce-add-to-cart-button/)**? Check our detailed article.

## FAQs on Override WooCommerce Templates

### What is the safest way to customize WooCommerce templates?
The safest method is to use a child theme to override WooCommerce templates. This ensures your changes aren’t lost when the plugin or theme updates.
### What happens if I edit WooCommerce templates directly?
Editing WooCommerce core files directly is not recommended. Your changes will be lost when WooCommerce updates, and it can break your store functionality.
### Can I use a page builder like Elementor instead of overriding templates?
Yes, page builders like Elementor are often easier and safer for layout and styling changes. However, overriding templates may still be required for core WooCommerce functionality changes.
### What is a child theme in WordPress, and why should I use it?
A child theme is a WordPress theme that inherits the functionality of another theme (called the parent theme). It's used to safely make customizations without affecting the original theme files.

## Start Overriding Your WooCommerce Templates

We discussed how WooCommerce templating works and how you can customize your online store by overriding template files. You can safely make changes without losing them during updates by copying template files from the WooCommerce plugin to your child theme.

We also covered specific examples, like adding an icon or custom text before the price on product pages. With these techniques, you can tailor the look and functionality of your WooCommerce store to better suit your brand and meet your customers' needs.