In this tutorial we are going to see how to modify a template in WooCommerce so that we do not lose the changes when updating the plugin or theme.
Modify WooCommerce
On many occasions we find that we want to modify or add functionality to a plugin, for example, add a new one that is not included in it.
In such cases, we could use extensions of the plugins themselves, which are plugins themselves that do precisely what we are looking for, add or modify a specific functionality. Other times what we need is to make changes to some plugin templates, or even modify its appearance through style sheets.
In this tutorial we will see the second option, how to make changes in any of the templates of a plugin, specifically of WooCommerceso that we won’t lose them when we update.
If you want to learn more about this plugin, check out the and the . With all that said, let’s get started!
WooCommerce Templates
First of all, clarify that here we are talking about templates / templates but we are not referring to WordPress themes, but to files contained in a folder that include the frontend pages.
This folder is called “templates” and is located inside the WooCommerce plugin directory. That is, in the path: “\wp-content\plugins\woocommerce\templates”.
It should be noted that not all plugins have the folder “templates”This will depend on each plugin. WooCommerce, however, does have it. And precisely this makes it easy to modify it without losing the changes in an update. To do this we will have to follow a few simple steps.
How to override WooCommerce templates
Well, let’s see how we can overwrite templates or WooCommerce templates correctly so that the modifications we make are maintained even if the theme or plugin is updated.
The first thing we will do is access the WordPress installation. We can do it in several ways, through the file manager of the hosting, through an FTP program such as or by browsing directly through the system folders if we are working locally.
Once inside, we will go to the “themes” directory. To carry out the process, we are going to need a child theme of the theme that we have activated in WordPress. In the example we have a .
The next step will be create a folder named “woocommerce” inside this child topic. If we are already working with a child theme it will not be necessary, we can use the one we already have active.
Now we are going to add any of the WooCommerce templates that we want to modify to this new folder, which we remember is in a path similar to this “\wp-content\themes\storefront-child\woocommerce”.
Remember that in your case you will have to replace “storefront-child” with the name of the folder that contains your child theme.
Next, we will go to the plugin directory, and we will access the “templates” folder. Here we will find a list of files that contain templates for frontend pages and also templates for store emails.
To safely overwrite any of these recordsand later make the modifications that we need in them, we simply must copy them from here “\wp-content\plugins\woocommerce\templates” and stick them in the “woocommerce” directory of the child theme, “\wp-content\themes\storefront-child\woocommerce”.
So for example, if we wanted to modify the WooCommerce “content-single-product.php” file, what we would have to do is copy it from the “\wp-content\plugins\woocommerce\templates” folder, and paste it into the directory “woocommerce”“\wp-content\themes\storefront-child\woocommerce”.
Once we have it in the latter, we can customize it as we need. The updates will not affect us, and WooCommerce will be able to load it preferentially when it is inside said directory.
Let’s look at another example. Suppose we want to modify the “my account” page, where the user’s data appears. As we can see, within templates there is another directory, “myaccount”.
In this case, what we have to do is create this same directory inside “\wp-content\themes\storefront-child\woocommerce” and paste “my-account.php” there, so that we can make changes to this copy of the page.
As we can see, we should not carry out any modification directly in the plugin, but in the files of the directory “\wp-content\themes\child_theme\woocommerce”. Otherwise we run the risk of losing the changes in any update.
Finally comment that, if we work with custom themes (Now we are talking about WordPress themes), and we want to follow this method, we’ll need to make sure to add WooCommerce support to the theme.
And that’s all! You can now customize the structure of any WooCommerce frontend page or emails without fear of losing everything in an update :).
Summary and conclusion
We can modify any WooCommerce frontend page in several ways. The appropriate thing if we do not want to lose the changes in a plugin update, is to make a copy of the pages that we want to modify.
We must place this copy in a “woocommerce” directory that we are going to create within the child theme that we have active. Then we will make the necessary modifications to the files in this last folder.
And here is the tutorial, we hope you find it useful. As always, we recommend you subscribe to the . This will give you immediate access to the to create a child theme, to the , to the , plus many others. There are more than 6044 at your disposal 🙂
Facebook Comments
Disqus