Vijayan's Blog

WooCommerce Theme Overriding

—

by

admin
in ,

Introduction

  1. For every task there are many good and bad ways to do that
  2. WooCommerce theming also fall under this prey like directly editing the WooCommerce template files
  3. In one fine day WooCommerce may release a new version, you unintentionally update the WooCommerce plugin which results in replace of your beautiful custom shop page into default template
  4. So to avoid this we have to override our WooCommerce template in our theme directory
  5. Let’s we see it in detail

Detect Template to Override

  1. To detect which template your current page renders you can place this snippet in your activated theme’s functions.php file
  2. Let’s we see the explanation for this snippet
  3. On line 2 of the snippet we using WordPress provided API helper function add_action which hook our function (we pass it as second parameter) in specific point or event in the context of first parameter (the action’s name wp_head technically it is called as tag)
  4. add_action accepts totally 4 parameters in that 2 are mandatory
  5. The first parameter (mandatory) is tag which is the name of that action hook like wp_head, muplugins_loaded, shutdown
  6. The second parameter (mandatory) is the function to be called at the time hook action triggers
  7. The third parameter (optional) execution priority
  8. The fourth parameter (optional) is accepts number which denotes number of arguments the hooked function accepts
  9. In our anonymous function we echoed global variable $template which output the full path of the rendering template file

Override Product Listing Page

  1. Assume that you declared the template path identifying snippet in your theme’s functions.php file
  2. Go to any page in your WordPress you will find at the top of your page the rendering template’s file path
  3. Now go to your shop page where you will find the template path as in the given image
  4. Now we will override this without disturbing the original file
  5. In order to do that first create a directory with the name woocommerce in your active theme directory for example wp-content/themes/twenty-twenty-child/
  6. Copy the template file archive-product.php from WooCommerce plugin for path reference see the image in 3rd point and paste it in your newly created directory woocommerce i.e. inside your theme
  7. Hurray! You succeeded you learned overriding the WooCommerce template

Edit Customised Shop Page

  1. To check whether we correctly implemented we will change few things in copied file archive-product.php in our theme directory not in the WooCommerce plugin’s template directory
  2. Open the file and replace the header section with the following snippet
  3. If you has an eagle eye you clearly note that the change is one line
  4. In line 3 changed the h1 text case to upper
  5. By default WooCommerce function woocommerce_page_title echoed the title instead of that we passed boolean false as first parameter to that function to return the title as a string
  6. woocommerce_page_title function’s return is passed as an argument to the php string function strtoupper
  7. Now if you refresh your shop page you will find that the title is uppercase
  8. We only covered tip of the iceberg of WooCommerce to customise archive page

Conclusion

  1. You learned why must avoid overriding the WooCommerce plugin’s template directly
  2. You understand the basics of action hooks and some action hook tags
  3. You can able to detect the current page’s template
  4. You can able to modify the WooCommerce template file without disturbing the plugin’s template directory