Override WooCommerce Templates to customize your online stores and enhance its functionality directly through your plugin. This guide will teach you how to override WooCommerce templates within your own plugin, ensuring your modifications remain intact during updates.
WooCommerce is often customized to expand it’s functionality. Sometimes such customizations involve customizing the default WooCommerce templates. For example, there could be a need to customize the default template of the WooCommerce cart page if additional fields have to be added to the page.
The one point to note here is that if the customizations are made directly to the default WooCommerce templates then these changes will be lost each time WooCommerce is upgraded to a new version. To avoid such a scenario a separate plugin should be developed and the customized template files should be added to this plugin folder. Also, the customizations should be made in such a way that the customized template files should override WooCommerce templates.
Order in which Locations are Scanned
In the post below I’m going to explain in detail how to override WooCommerce templates in your plugin. However before we go on to that we need to know the order in which the WooCommerce template loader scans locations. This information is important in order to override WooCommerce templates. The following is the order in which the WooCommerce template loader scans locations
- theme/template path/template name
- theme/template name
- default path/template name
Now, if you want the templates in your plugin to override the default WooCommerce template then the order in which the WooCommerce template loader scan the location has to be as below. However, your customized template in the plugin will override the default template provided that there is no customized template provided in your theme.
- theme/template path/template name
- theme/template name
- addon plugin/template/WooCommerce/template name
- default path/template name
Override WooCommerce Templates
To be able to change the order in which locations are scanned by WooCommerce loader we will have to use the ‘woocommerce_locate_template’ filter provided by WooCommerce. The following code can be written in any PHP file in your plugin folder.
add_filter( 'woocommerce_locate_template', 'woo_adon_plugin_template', 1, 3 ); function woo_adon_plugin_template( $template, $template_name, $template_path ) { global $woocommerce; $_template = $template; if ( ! $template_path ) $template_path = $woocommerce->template_url; $plugin_path = untrailingslashit( plugin_dir_path( __FILE__ ) ) . '/template/woocommerce/'; // Look within passed path within the theme - this is priority $template = locate_template( array( $template_path . $template_name, $template_name ) ); if( ! $template && file_exists( $plugin_path . $template_name ) ) $template = $plugin_path . $template_name; if ( ! $template ) $template = $_template; return $template; }
Add Custom WooCommerce Templates to Your Plugin
- Now that you have added this code to your plugin a major part to override WooCommerce templates has been completed. The next step would be to customize the WooCommerce templates. To do that just copy the WooCommerce template you need to customize and add it to your plugin folder.
- So for example, if you want to customize the WooCommerce cart template then go to the following path – ‘/WooCommerce/templates/cart’ and copy the cart.php file. Now copy this file in the following path ‘your_addon_plugin/template/WooCommerce/cart’
- Now all the customizations you need to make to the WooCommerce cart page can be made in the ‘cart.php‘ file in your plugin folder.
- Our earlier code will override the default WooCommerce cart template and display the custom template specified by us in our plugin.
Need help with WooCommerce customization? Let our WooCommerce Experts customize your site to fit your unique needs.
Resources for Further Learning:
- How to Add Custom Tab to a WooCommerce Product Page
- How to Set Customer Specific Pricing in WooCommerce
- How to Add Subscribe/Unsubscribe to Email Notifications Option in WooCommerce
FAQ’s
- What is a template override in WooCommerce?
A template override in WooCommerce means that a specific page, feature, or layout of your WooCommerce store is being controlled by your theme instead of the default WooCommerce templates. - How can I override WooCommerce template files in my theme?
To override WooCommerce template files in your theme, you need to create a folder named woocommerce in your theme directory and replicate the file structure of the template you want to override within this folder. WooCommerce will then use the template files from your theme instead of the default ones. - What is the structure of WooCommerce templates for overriding?
WooCommerce template files contain the markup and structure for the frontend and HTML emails of your store. By creating template files with specific names in your theme’s woocommerce folder, you can override the default templates provided by WooCommerce.
10 Responses
Hello i try your code and follow all steps… but it didnt work for me.. its still load template from woocommerce insted from my pluhgin. can please help me to resolve this ?
many thanks.
Hi Priyank,
Try using add_filter( ‘woocommerce_locate_template’, ‘woo_adon_plugin_template’, 1, 3 ); instead, and let me know if this works.
I’m trying to override the content-single-product.php file. But so far it’s no use. I’ve followed your way and it worked for another file i override. product-image.php. I created woocommerce folder inside my plugin and path for product image file is woocommerce > single-product > product-image.php it works. and the path for content-single-product : woocommerce > content-single-product.php. It’s not working. what am i doing wrong?
Hi efat,
Coincidentally a developer here faced the same problem, but couldn’t find a solution. 🙁 I am researching for one. I’ll keep you updated in case I find anything.
In some case you need to unhook the function loading the template and include the custom template by using the same hook .eg:-
//Overriding review-order.php template in checkout page
remove_action( ‘woocommerce_checkout_order_review’, ‘woocommerce_order_review’, 10 );
add_action( ‘woocommerce_checkout_order_review’, ‘wc_order_review’, 10, 1 );
function wc_order_review($template) {
global $woocommerce;
$template = woocommerce_get_template( ‘checkout/review-order.php’, FALSE, FALSE, untrailingslashit( plugin_dir_path( __FILE__ ) ) . ‘/templates/’);
return $template;
exit;
}
Thanks for the input Prafulla.
you are all ways welcome 🙂
How do you override a template which has been used by a theme? For example the theme over-rides form-login.php at the following path = “wp-content\themes\ThemeName\woocommerce\myaccount\form-login.php”
I need to make some text changes within this. How can this be done??
Thanks a lot!
Hey, follow the blog and then change the following code
/*************old************/
// Look within passed path within the theme – this is priority
$template = locate_template(
array(
$template_path . $template_name,
$template_name
)
);
if( ! $template && file_exists( $plugin_path . $template_name ) )
$template = $plugin_path . $template_name;
/*************old End************/
to
/*************New************/
if(file_exists( $plugin_path . $template_name ))
$template = $plugin_path . $template_name;
if( ! $template )
$template = locate_template(
array(
$template_path . $template_name,
$template_name
)
);
/*************new End************/
So your plugins template file gets priority over theme. You can then make changes to the corresponding file from your plugin.
Thanks Karthik, can you please review the original code? I made the changes you suggested but it did not work and then on further digging I found that “woocommerce_locate_template” function is deprecated in 3.0.x
https://docs.woocommerce.com/wc-apidocs/function-woocommerce_locate_template.html
Please assist with an updated code.
Thanks a lot!