customize woocommerce templates

How to Customize WooCommerce Templates

Looking for ways to edit your templates? In this guide, we’ll show you two different methods to customize WooCommerce templates for your website with and without plugins.

WooCommerce is a great platform to create eCommerce stores. It is very easy to use, has a lot of features, and has many customization options to add functionalities and change the design of your website. Apart from changing the shop page or product page, you can also edit the templates that WooCommerce includes by default.

Why Customize WooCommerce Templates?

WooCommerce has many customizable features. You can personalize virtually any page from the checkout to the shop page to the category pages, Thank you pages, and more. All that helps to give your store a unique style that customers will recognize, but to stand out from the crowd, you might also need to customize your WooCommerce templates.

By editing the default pages on your site, you make sure that they look different from your competition and have a style that fits the look and feel of your store. But if you want to customize them to get a significant competitive advantage, it may be a good idea to edit the default templates too.

By customizing your templates, you can add more details and functionalities to take your online store to the next level. These functionalities can help you provide a better customer experience that shoppers will appreciate. That’s why you should learn how to edit your WooCommerce templates and upgrade your eCommerce store game.

Things to keep in mind before editing templates

Before you start customizing your templates, here are some of the things you should keep in mind.

1. WooCommerce Themes

You will be changing many elements of your website related to WooCommerce through the templates. Make sure that the theme you are using is fully compatible with WooCommerce. If you don’t have one yet or are thinking about changing it, check out our list of the best WooCommerce themes.

2. Install WooCommerce Properly

Before you make any changes to the WooCommerce templates, you have to properly set up WooCommerce on your website. We recommend you don’t miss or skip any step during the setup process. If you aren’t sure about this, our guide on how to set up WooCommerce can help you check that everything is correct.

3. Use Child Theme and Backup Your Website

To edit the WooCommerce templates, you will change sensitive data from your template files. This means that if you accidentally make a mistake, your website might face some serious issues. The good news is that you can prevent that by using a child theme and making the changes to it instead of directly editing your parent theme files.

We also recommend you backup your website before starting this process. If you need help with this, check out our complete guide on how to back up a WordPress website. Similarly, you can also find more information about how to create a child theme in WordPress and regarding child theme plugins.

4. Programming Knowledge

To customize the WooCommerce templates we’ll use code snippets. Whether you do it programmatically or with a plugin, we recommend you have some basic programming knowledge. For some customizations, we’ll use hooks. If you’re not familiar with hooks, have a look at this WooCommerce hooks guide.

If you don’t have any coding skills and don’t feel comfortable editing core files, we recommend you ask for some assistance from a developer.

5. Theme and Template Files

The theme and template files vary depending on the theme you use for your WooCommerce store. For this demonstration, we will use the Divi theme, so some of the theme and template files may be different on your site if you use another theme. However, you should be able to follow the tutorial without any issues regardless of the theme you’re using.

How to Edit WooCommerce Templates

There are 2 main ways to customize the WooCommerce templates:

  1. Programmatically
  2. Using a plugin

In the next section, we’ll have a look at each method so you can use the one that you feel most comfortable with.

1. Customize WooCommerce Templates Programmatically

Even if WordPress is easy to use without any knowledge in programming, it’s developer-friendly as well. In fact, you can edit virtually anything on your website both using plugins and with code snippets. In this section, we’ll show you how to edit templates programmatically in WooCommerce.

There are two approaches to customize templates programmatically:

  • Overwriting Templates
  • With Hooks

Both of these approaches will get the job done, so choose the one that is more convenient for you. Let’s have a quick look at the differences between these two methods so you have a basic understanding of what each one does and when to use them.

Hooks vs Overwriting Templates

Hooks are generally used for simple modifications with actions and filters. On the other hand, you can overwrite templates for more complex customizations by changing the actual template files.

It’s also worth keeping in mind that if you use a hook for a particular template file, you shouldn’t overwrite the template file. This is because when you overwrite the template, the hooks used on that file will be replaced and won’t work anymore.

Make sure that you know what your needs are before you continue and select the method that suits your needs. If you are still unsure about it, we recommend you get assistance from a WordPress developer.

1.1. Overwriting Templates to Edit WooCommerce Templates

You should overwrite your templates when you want to make complex customizations as it gives you more flexibility than hooks.

The process is very similar to that of editing the functions.php file. In this case, you will edit the main WooCommerce template files instead of customizing the theme files.

To access the template files, in your dashboard go to Plugins > Plugin Editor, Select WooCommerce from the dropdown, and then navigate to the template files under the templates tab.

You will find all the main files that you want to edit here such as archive-product.php, content-product-cat.php, content-product.php, and so on. Similarly, you can also edit the template files in the cart, checkout, email, and many more.

As you can imagine, there are many WooCommerce template files that you can edit. You can customize the subdirectories as well as the folders of these files. For more information about what files you can personalize, check out the full list of the template files that you can edit here.

Now let’s have a look at some examples of how you can customize the WooCommerce templates.

1.1.1. Add Shortcode to the WooCommerce Templates

One of the most common practices when customizing code in WooCommerce is to use shortcodes. There are many official shortcodes provided by WooCommerce and WordPress that you can use to edit templates.

The following script will display WooCommerce My Account dashboard on all the single product pages. Simply paste it into the single-product.php file and update it.

<?php
if ( ! defined( 'ABSPATH' ) ) {
   exit; // Exit if accessed directly
}
get_header( 'shop' );
   while ( have_posts() ) : 
   the_post();
   wc_get_template_part( 'content', 'single-product' );
   endwhile; // end of the loop.
do_action( 'woocommerce_sidebar' );
   $t= '<div id="myacc"><h4>My Account</h4>';
   $t.= do_shortcode("[woocommerce_my_account]");   $t.="</div>"; echo $t; get_footer( 'shop' );

After that, preview the product pages and you will be able to see the account dashboard.

my account dashboard example customize woocommerce templates

For more information about how to edit the Product Pages programmatically, have a look at this step-by-step guide.

1.1.2. Remind the Customer that they have Purchased the Product Before

You can also customize WooCommerce templates to provide your loyal shoppers a discount code if they have purchased a product before. Once again, you need to paste the following code into the single-product.php file and update it.

get_header( 'shop' );
   while ( have_posts() ) : 
    the_post(); 
    wc_get_template_part( 'content', 'single-product' );
   endwhile; // end of the loop.
$current_user = wp_get_current_user();
if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo '<div class="user-bought">&hearts; Hey ' . $current_user->first_name . ', you\'ve purchased this before. Buy again using this coupon: <b>PURCHASE_AGAIN_21</b></div>';
endif;
get_footer( 'shop' );

Now as soon as your customers view a product that they have already bought, the following message will appear.

repeated order example customize woocommerce templates

These are some of the ways through which you can edit WooCommerce templates by overwriting the templates. If you want some more references and examples, check out our detailed guide on how to customize WooCommerce templates programmatically.

1.2. Using Hooks to Edit WooCommerce Templates

You can also use hooks to customize WooCommerce templates if you are not fully comfortable with overwriting the template files. Hooks are functions that you can add as an action or a filter and can help you quickly increase the functionality of your website and make simple modifications.

Similarly, you can also use WooCommerce hooks to edit the templates of your store. We recommend this approach only if you want to make simple customizations. For complex modifications, overwriting templates is a more appropriate method.

To add hooks to your online store, all you need to do is go to Appearance > Theme Editor, open the functions.php file and add code snippets with the action or filter hooks.

Here are some example snippets that you can use to edit the WooCommerce templates using hooks.

1.2.1. Add Information above the Image in Single Product

If you want to include any additional information about the products above the product image, simply add the following script in the functions.php file.

// Add custom function
function quadlayers_before_single_product() {
echo '<h2>Everything is 25% off for this week!</h2>';
}

// Add the action
add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 );

This will display the message above the product images in the single product pages.

single product description example customize woocommerce templates

1.2.2. Add Shop Description below the Shop title on the Shop page

You can use the following code snippet to display the shop description on the Shop page. The description will be displayed just below the Shop title.

// Add custom function
function quadlayers_custom_archive_description() {
$new_description = '<p>This is our Shop. Enjoy your Shopping!</p>';
return $new_description;
}

// Add the action
add_action('woocommerce_archive_description', 'quadlayers_custom_archive_description');

After you save the changes, you will be able to see the shop description on the WooCommerce Shop page.

shop description example customize woocommerce templates

For more information about how to edit the templates using hooks, check out our tutorial on how to customize WooCommerce templates programmatically.

2. Customize WooCommerce Templates using a Plugin

If you don’t have coding skills, there’s another solution for you. You can edit WooCommerce templates using plugins.

There are several plugins to customize your templates. For this tutorial, we will use Edit WooCommerce Templates. It is a straightforward free plugin that allows you to personalize the templates of your theme. You can make changes to your templates and also reset to default whenever you want with a few clicks.

Unlike the programmatic approaches, with this plugin, you can directly select the templates you want to edit instead of searching for them in the theme and WooCommerce files. Once you find the template you want, all you need to do is add the code snippets to overwrite the template and save the changes. This way, you can save a lot of time as you won’t have to find and open every template file that you want to edit.

Let’s better explain this with some examples.

2.1. Install and Activate the Plugin

To start using the plugin, you need to install and activate it first. In your WordPress dashboard, go to Plugins > Add New and search for Edit WooCommerce Templates. Click Install Now and then activate it.

Alternatively, you can download the plugin and install it manually. If you want more information about this process, check our guide on how to install WordPress plugins manually.

2.2. Edit the Templates

After you have activated the plugin, you can start customizing the WooCommerce templates. In your dashboard, go to WooCommerce > Theme Templates and you will be able to see all the templates you can change in your current theme. For every template, you will see the title, path, and the status of whether it has been changed in the current theme.

To edit any template files, all you need to do is press Edit on the template you want. If you can’t see the template you want to edit, you can also search for it using the search bar.

edit template customize woocommerce templates

After that, you will be redirected to the template editor where you need to add your code snippets. For this, you can use any one of the snippets mentioned above in the programmatic section. Of course, you can also take them as a base and customize them to create your own custom solution.

Once you add the code snippet to the editor, click Save Template to Theme.

save template to theme customize woocommerce templates

If later you change your mind and you want to reset any changes you made to the template, simply click Reset to undo the changes.

After you have saved your customization, the changes will be applied to the template of your current theme. To check whether the changes were correctly saved or not, go to WooCommerce > Theme Templates and the status under the “Changed in Current Theme” column should change to Yes.

That’s it! This way you can customize any WooCommerce template and stand out from your competitors.

Bonus: How to Edit WooCommerce Email Templates

We have already shown you different ways to customize WooCommerce templates. One of the first templates we recommend changing is the email template. You probably send several automatic emails to your customers regarding their orders, so email templates are a good way to start.

As an online store, you would want to have the correct contact information of your shoppers. But the default WooCommerce email template might not offer everything you need in every scenario.

The good news is that editing the WooCommerce email templates is quite easy and you can make most of the changes from the WordPress dashboard without any plugins or code snippets. Just go to WooCommerce > Settings and open the Emails tab. There you will be able to see all the customizable options for the email sender and the email templates.

From the Email sender options you to edit the “From” name and address. This will change how the sender’s name and address are displayed in the emails you send to your customers.

Similarly, you can also change the header image, footer text, and body, as well as the text and background color of the email templates.

After you have made all the changes you want, you can preview the email template by clicking on the “Click here to preview your email template” link.

If you are satisfied with the preview, just Save the Changes and that’s it. This is a great and quick way to customize your store and make an impression on your shoppers.

This is just an example but there are more ways you can change the WooCommerce email templates. For more information about it, have a look at our guide on how to edit WooCommerce email templates.

Conclusion

In summary, editing your templates is an excellent way to provide a better experience to your customers and stand out from your competitors.

In this guide, we’ve seen two main ways to customize the WooCommerce templates:

  • Programmatically
  • Using a plugin

If you know how to code, the first method is the one for you. You can edit templates either by using hooks or overwriting the templates. Using hooks is a recommended practice when you want to apply simple and small changes, whereas if you want more complex customization, you’ll need to overwrite the templates.

Alternatively, you can use a plugin to customize your templates to save time. With a plugin, you won’t need to find particular template files on your website. You can just start customizing the template files provided by the plugin and edit them directly on your website.

Finally, we’ve also shown you how to edit email templates so you can make an impression on your shoppers from the moment they buy from you.

We hope that you can make any changes to the WooCommerce templates without any issues now. Which method have you used? Let us know in the comments below!

If you found this guide helpful, here are some more articles that might interest you: