Search

How to Override WooCommerce Templates in your Plugin

Listen to this article
override-woocommerce
Override WooCommerce Templates

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.

[space]

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

  1. theme/template path/template name
  2. theme/template name
  3. 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.

  1. theme/template path/template name
  2. theme/template name
  3. addon plugin/template/WooCommerce/template name
  4. 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;
}

[space]

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.

Discuss your project for free

 

Karthik Thayyil

Karthik Thayyil

10 Responses

  1. 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.

    1. Hi Priyank,

      Try using add_filter( ‘woocommerce_locate_template’, ‘woo_adon_plugin_template’, 1, 3 ); instead, and let me know if this works.

  2. 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?

    1. 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.

  3. 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;
    }

  4. 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!

    1. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get The Latest Updates

Subscribe to our Newsletter

A key to unlock the world of open-source. We promise not to spam your inbox.

Suggested Reads

WordPress Development

Custom WordPress Solutions, for You

LearnDash Development

Custom LearnDash Solutions, for You

WooCommerce Development

Custom WooCommerce Solutions, for You

WordPress Plugins

Scale your WordPress Business

WooCommerce Plugins

Scale your WooCommerce Business

LearnDash Plugins

Scale your LearnDash Business

Label

Title

Subtext

Label

Title

Subtext

Join our 55,000+ Subscribers

    The Wisdm Digest delivers all the latest news, and resources from the world of open-source businesses to your inbox.

    Suggested Reads