If you are running a WooCommerce online store, sometimes, you might need to customize or override some specific WooCommerce template. This article covers the ways to customize and override the WooCommerce templates safely.
How to customize or override WooCommerce templates?
First of all, let’s begin with the WooCommerce templates definition.
WooCommerce templates files are containing markup code and structure of WooCommerce front-end design and features.
WooCommerce templates are located inside the plugins folder /woocommerce/templates/
Once you open up those files for view or editing, you’ll notice that they are assembled from blocks of code and hooks.
Those hooks are allowing us to modify the functionality or look of out WooCommerce template without directly altering the template code. This is useful as we can then freely update the plugin without worrying that we might lose our customization and changes.
Now, don’t worry, we will get back to the hooks later inside this same tutorial.
A simple method to customize WooCommerce templates
The easiest way to customize or override the WooCommerce template is to copy the folder /woocommerce/templates/ to your theme root folder, for example, mytheme/woocommerce/.
Now you just need to edit the copied templates files and save changes. These newly copied templates will override the default templates located in the plugins folder.
This method of customizing is safe as the templates files located in your theme folder will not get overwritten once you update the WooCommerce plugin.
Customizing WooCommerce templates via hooks and filters
You can also customize the WooCommerce templates by overriding hooks and filters inside the function.php file of your theme.
What the hell are hooks?
The hooks are an essential part of WordPress’s core functionality that are allowing the changes to the code features without modifying any template files directly. If you add hooks for some of the WooCommerce functionality, you won’t need to copy the templates from the plugins back to your theme. Hooks are allowing an advanced way of customizing the templates.
Hooks are divided into two types, actions and filters.
Action hooks are allowing you to insert the code at various places whenever that hook runs.
Filter hooks are used for manipulating and return variable data which hook passes on.
How to use hooks?
You can add hooks inside your theme or child theme functions.php file.
To execute your code, you need to hook in by adding the action hook do_action('action_name'); followed by the code that will be executed once this action is called inside the template. See this example:
// Add your own custom functionality to the single product template
function my_custom_feature_before_single_product() {
echo '<h3>Don't miss a change to aquire 50% discount today!</h3>';
}
// Calling - executing the above action
add_action( 'woocommerce_before_single_product', 'my_custom_feature_single_product', 11 );
This code will hook into the single product template and insert the message above the product details. The message will display a Heading 2 text with the discount message.
As you can see, the first part of the code is adding custom function with the name my_custom_feature_before_single_product. Then we have the PHP echo command that prints out the message inside the brackets, this is where you should be placing your own code usually.
After that, we are calling the action by specifying the default function followed by the same name of our own custom function which is my_custom_feature_before_single_product.
This is just a simple example, you can build an entirely new feature or functionality inside the hooks.
You should also read our guides on “How to add city or district for shipping zones in Woocommerce as a good example of customizing the WooCommerce features via hooks.
Customizing WooCommerce template using filter hooks
You can also use filters hooks to customize the default features of WooCommerce, see this working example too, “How to remove fields from checkout & ordering form in WooCommerce“.
WooCommerce customization tips
(*) If your theme already has a woocommerce.php file, template overriding will not work for the template woocommerce/archive-product.php. This file has priority over other templates to prevent display issues.
(*) If you are using a theme that doesn’t have built-in support for the WooCommerce plugin, you will need to add the add_theme_support function inside your theme functions.php file.
(*) If your WooCommerce template files located in youtheme/woocommerce become outdated. Don’t overwrite them with the newest template files from the plugins /woocommerce/template folder. You might break the functionality and lose your modification. Yet, you might need to inspect the changes in the new template file and then apply them in your customized file inside your theme.
Summary
This is a brief tutorial that should help you to get a grasp on how to apply customization and how to override WooCommerce templates. We covered the simple template file modification and an advanced way using action and filter hook. We hope you like it. 🙂
If you have any questions on this topic, feel free to share it with us in the comments section below.
