If you've ever wanted to change the layout of the single product page, the cart page, or even one of the e-mails sent out by WooCommerce, you can do that by overriding the templates in WooCommerce. If you're familiar with WordPress theme templates, they are very similar. If you copy a WooCommerce template to your theme, WooCommerce will load your template instead of the default template that is in the plugin.
Being able to overload any template in WooCommerce means you can customize every aspect of how WooCommerce looks to your customers. If you want to remove something, change something, or add something new, that's all possible.
For our purposes, we'll be adding some CSS classes to the HTML. If we can reuse existing CSS classes that we've already styled, then that saves us a lot of time as we won't need to rewrite those styles.
Overriding WooCommerce templates is similar to using a child theme and overriding templates in the parent theme. The first step is to copy an existing file in the WooCommerce plugin to your theme. You can copy any file in the templates folder in WooCommerce to a woocommerce folder in your theme.
For example, you could copy woocommerce/templates/single-product.php to your-theme/woocommerce/single-product.php. In the following steps, we discuss in more detail overriding the WooCommerce templates:
- Using your regular file browser, navigate to the
WooCommerceplugin folder and copytemplates/single-products/tabs/tabs.phptowoocommerce/single-products/tabs/tabs.phpwithin your theme. - Using your code editor, open up the
tabs.phpfile we just copied to your theme. - Look for this line of code:
<div class="woocommerce-tabs">.This div element wraps around the tabs. We're going to add a CSS class to that line to help style it.
- Add a blank space and append this line of code right after
woocommerce-tabs:tabs-wrapper
- Save and upload the file.
WooCommerce will run a search for any templates that you may have overridden and use those instead of the file that comes with the WooCommerce plugin. You could override one template or every single template if you wanted.
You can do just about anything to these files. We added a CSS class that will help with styling, but you could just as easily add or remove extra HTML, JavaScript, or PHP.
Note
When you update to a new version of WooCommerce, make sure your templates still work. It's rare, but sometimes templates need to be updated and, if you have out-of-date templates, something could break. You can check the status of your templates in the WordPress admin, under WooCommerce | System Status.
If you ever have out-of-date templates, copy the new files from the updated WooCommerce plugin to your theme and then modify the new files to include your old changes.