One of the greatest advantages WordPress has over other CMSs is its built-in child themes functionality. By creating a child theme we are able to customize all aspects of a theme’s code without affecting the original file; not only does this protect our theme files from any accidents in our modifications, it also allows us to update the theme safely without worrying about losing all our changes. Unfortunately, though themes have this feature, it’s a different story for plugins; we must rely on the actions and filters created by the plugin developer to make such changes. Thankfully, one of the biggest, most popular plugins, the WooCommerce ecommerce solution, has a similar feature built-in. With this solution we are able to overwrite specific WooCommerce fragments that are displayed in our theme, as well as protect our changes from plugin updates (and it’s updated quite often).
How does overwriting in WooCommerce work?
The mechanics behind overwriting files is startlingly simple. In the WooCommerce files there is a templates folder which contains the files that can be overwritten for use in our own theme; specifically, the path to it in your WordPress installation will likely be wp-content/plugins/woocommerce/templates.
To create an override, all we need to do is copy the file that we want to change from the aforementioned templates folder to the woocommerce folder in our theme, then make the modifications in the copied file. For example, if we wanted to overwrite the structure of the product search used in the dedicated WooCommerce Search widget, then we’d copy the search form’s file from this location:
wp-content/plugins/woocommerce/templates/product-searchform.php
And copy it to the WooCommerce folder in our theme:
wp-content/themes/my-theme/woocommerce/product-searchform.php
Where “my-theme” is the name of your current theme’s folder. Once done, we can make any modifications we need in the copied product-searchform.php file, and WooCommerce will use this copied file instead of the original, applying the changes on your site.
Important things to remember when overwriting files
Overwriting files in this manner is not a solution without any disadvantages. We need to remember that the WooCommerce code is constantly being changed and updated, so if we overwrite any files we’ll need to check back from time to time to see if the core files are updated.
If we don’t keep our files updated, we risk running into issues such as:
- Broken JavaScript scripts (if elements required by the scripts are missing).
- Lack of new features or updated interface elements.
- Security errors – sometimes updates provide security fixes that rely on modifying the core files; if we’re overwriting the file then these updates won’t be applied on our live site.
Summary
Overwriting the code fragments generated by WooCommerce is very simple thanks to the built-in overwrite mechanism. However, before we overwrite any file we need to make sure that this method is necessary for our planned changes, and also pay careful attention to updates to ensure the overwritten files include any important changes that affect functionality or security.