How to Override WooCommerce Template Files with a Child Theme
Default WooCommerce template files contain the front-end markup of your eCommerce site. Understanding how to properly modify and override template files will give you much more control over your website and allow you to achieve deeper levels of customization. In this Upload WP tutorial you'll learn how to override any WooCommerce template file via the use of a child theme.
We'll build on the WooThemes Template Structure documentation and provide step-by-step instruction (written and video) on how to apply it to your WooCommerce powered website. Our intention is not for you to focus on the specifics of the file customizations that we make in our examples. Instead, we want to demonstrate the Overall Process so that you can apply it and make updates to any file. Before we dive into the details, take a minute to view the WooCommerce Template Structure and full list of modifiable files…
All WooCommerce template files are found in the following directory… /wp-content/plugins/woocommerce/templates
In a nutshell, the process for overriding template files with a child theme goes like this…
Simply replicate the exact same directory structure (as in: /plugins/woocommerce/templates) in your child theme (e.g. /themes/YourChildTheme/woocommerce/single-product) and drop the modified file in the proper directory.
Individual files can be customized in any way you wish but the process of overriding them via a child theme is always the same. It's important to note that this process is not theme specific meaning it works for any WooCommerce powered site. Also, you should never modify template files within the /plugins/woocommerce/templates directory because using a child theme to override them ensures that your customizations are safe when you upgrade to the latest version of the plugin. Now let's take a closer look at the exact steps involved in this process of overriding WooComm template files.
Step One – Install a child theme
Before you begin overriding template files you should install and activate a child theme. Making changes to template files via the use of a child theme will ensure you're modifications are saved forever. If you need help creating a child theme or would like to use one of our WooCommerce specific child themes simply Opt-In to the Upload WP Newsletter on the right sidebar of this site.
Step Two – Locate file(s) to modify, make modifications, save modified file(s) in Notepad++
I'll use a specific example to demonstrate the exact process for overriding template files with a child theme. I'm going to modify the following file; title.php. Specifically, I'm going to reduce the size of our product detail page titles from h1 to h2. Here's how to go about doing that…
Open FileZilla (any FTP client will work) > connect to your server > public_html > yourwebsite > wp-content > plugins > woocommerce > templates > single-product > right click on “title.php” > View/Edit > title.php will open in Notepad where you can make your updates > when modifications are complete copy/paste from Notepad into Notepad ++ > save file as “title.php”
Important Note: Like directory structure, individual files must been named exactly the same as their default name when saving them via Notepad ++
The following screen captures illustrate the process of locating files in /wp-content/plugins/woocommerce/templates
Important Note: the process of locating, modifying and saving files is the same for any file.
Step Three – Replicate the WooCommerce template structure in your child theme
Sticking with our example of overriding the title.php file, the next step is to replicate the directory structure within your child theme. Here's how to do that…
Connect to your server via FTP > public_html > yourwebsite > wp-content > themes > open your Child Theme > right click and select “Create Directory” > name the new directory “woocommerce” (all lower case) > open the woocommerce directory and create another called “single-product” > drag-and-drop your customized title.php file into the newly created single-product directory
That's it… the default /woocommerce/single-product/title.php file has been overridden with your customized title.php file and the product detail page title will now be an h2 instead of an h1.
Again, this overall process for overriding any template file is the same. I simply used a specific example so that you could see each step in detail.
The following screen captures illustrate the process of creating the /woocommerce/single-product directory and uploading the modified title.php file within your child theme…
Take some time to watch the tutorial videos below for more detailed examples of how to customize your WooCommerce site by overriding template files with a child theme.
Watch our tutorial video below to see the entire process of overriding template files with a child theme and making updates to the single-product directory.
Watch our tutorial video below to learn how to customize files in the /woocommerce/templates/cart directory.
This video builds on our “Customizing the WooCommerce Checkout Page” tutorial. Specifically, you'll see how to make updates to the /woocommerce/templates/checkout directory files.
- All template files are found within the following directory… /wp-content/plugins/woocommerce/templates
- The template structure and files are case sensitive. Directories and files need to mirror the default structure and file names in your child theme.
- This process applies to all WordPress themes – it's not theme specific because you're modifying WooCommerce Template files, not your theme files.
- Tools you'll need to override template files are FileZilla and Notepad++ both of which are 100% free – simply do a Google search and you'll find the download links.
Thanks for taking time to view our tutorial on Overriding WooCommerce Template Files via the use of a Child Theme. If you have questions or comments please feel free to post them
below in the Upload WP Community Forums. Finally, if you found this tutorial to be helpful, please share it with your friends.