Where Do I Find My Template Directory In Woocommerce

Today we await into how to customize the WooCommerce template files, in detail, nosotros focus on how to create your template files and use the binder structure for easy WooCommerce theme customization.

In this tutorial, nosotros'll go trough how to create your own home, products, categories, store, cart, checkout, and emails page templates. By the stop of this tutorial, you should be able to create your own WooCommerce custom templates for your WooCommerce store. All changes can exist done your child WooCommerce theme, thus y'all won't lose your customization in future updates.

We walk through all steps, from the near basic elements, system, and easily-on examples.

Let's go started!

The basic structure of a child theme and WooCommerce template files

The start pace of our customization procedure is creating a WordPress child theme. There are many proficient guides online, the official WordPress guide includes very detailed instructions. In its most basic version, a WordPress child theme usually contains only the style.css and functions.php files:

Child theme creation in WordPress

The showtime step of our customization process is creating a WordPress kid theme. There are many proficient guides online, the official WordPress guide includes very detailed instructions. In its virtually bones version, a WordPress child theme ordinarily contains just the mode.css and functions.php files:

As you may know, a kid theme works by a system of standardized file paths and names. Therefore, in order to add your own custom files you just need to use the right filename in the right folder. Thus, if you have a folio.php file in your child theme, WordPress loads information technology instead of the parent theme's file. If you lot don't take a file, WordPress loads the parent WordPress theme files.

The custom WooCommerce template works the aforementioned way. Y'all just need to have your files in the right folders to load them instead of the master WooCommerce files. The primary divergence is that all WooCommerce files are within the /woocommerce folder of your WooCommerce theme.

For example, if you add a file named single-production.php in the woocommerce binder of your WooCommerce theme (for example WooCommerce storefront), information technology replaces the original file. Thus, WooCommerce reads your single-product.php instead of its default file when it is loading that element.

This is a great pace towards an upgrade-safe development. This means that you lot tin customize all the WooCommerce templates without touching the plugin files. Hence, all your custom lawmaking is safe in your ain WordPress theme or child theme folder.

You may be wondering how does WooCommerce fifty-fifty know that I have custom template files? For example, I could exist simply using a folder named WooCommerce for another reason entirely. There is a simple trick though, your theme needs to declare WooCommerce support. You can do that with this code snippet:

function mytheme_add_woocommerce_support() {

add_theme_support( 'woocommerce' );

}

add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Once this is present, WooCommerce searches for a woocommerce folder in your WordPress theme or child theme. When WooCommerce finds that folder, it tries to load files from it, instead of their own. A quick way to go familiarized with all possible files and folders is to cheque WooCommerce's template construction. You lot can detect information technology nether /wp-content/plugins/woocommerce/templates.

The simply exception for a theme file that is loaded outside the /woocommerce folder is the woocommerce.php file. Which is a file you lot add in your theme'due south root folder for older WooCommerce versions for a quick WooCommerce fix. It is intended to conform display bug in example y'all are running WooCommerce older than 3.3. If you aren't, you don't need to use information technology and y'all can rely only on the regular WooCommerce template files.

At present let's get started with some edits.

Your WooCommerce Main Store and Product Archives

The first step is to brand sure yous are running an updated WooCommerce version. Generally, annihilation newer than iii.iii.10 should be fine. This is to make certain that you don't have (or don't need) the woocommerce.php file in your theme'southward root folder. This file overwrites the woocommerce/archive-product.php file, thus keep that in mind in example you admittedly need information technology.

Then brand sure you lot accept declared WooCommerce back up in your theme or child theme as explained above. In one case that is gear up, nosotros can create our /woocommerce binder and add our files there.

To make things easier, copy the files from /wp-content/plugins/woocommerce/templates into wp-content/themes/mytheme/woocommerce. But you should really but copy the files you lot need. Otherwise, if you add together unnecessary files, you lose rail of your customizations. In addition, you lose whatsoever new styling WooCommerce may bring in their own files, as you are overwriting them.

This is the main structure of our child theme now, with our little /woocommerce improver.

WooCommerce folder in your child theme

And this is our copy of the WooCommerce templates that we edit in this tutorial:

WooCommerce files in our child theme folder

Then it's a matter of editing the files we want to customize. For the main store and production archive layout, we utilize the /woocommerce/archive-product.php. Due to how well coded these files are, frequently it's easy to sympathize what is going on.

For example, the archive-production.php file is a main WooCommerce template file. This means that this file loads other files within of it. Thus, if you demand a header, you demand to phone call information technology. If you demand a loop, you need to call information technology.

On the other hand, yous can employ some other custom template files for smaller elements of your production page layout. For example, the /woocommerce/global/breadcrumb.php is a helpful file, and a lot of other files load it. Whenever you meet a breadcrumb feature, it is in that location.

Dorsum to our archive-product.php, there you can change anything you want. For instance, let'southward add a custom message earlier our products list. Y'all merely demand to add together this lawmaking before the line 33:

<h1> This is just my store </h1>

<p> Thanks for stopping past! </p>

This can be used for calculation custom headers, removing the sidebar, changing classes and other theme options.

The Single Product WooCommerce Template

Yous can edit the single product page view in the single-production.php file. Thus, we tin can use a very similar edit past adding your own code snippets. For case, on line 33 you could add this one:

<h1> This is an astonishing hand-crafted product </h1>

<p> Check out related products, or read more than about our values </p>

It is worth noticing that other WordPress and WooCommerce functions still work in these pages. Thus, you tin can add together custom messages depending on the product ID, category and other aspects. Furthermore, all user-related functions piece of work as well. Therefore, you can customize the production brandish depending on the current user, user roles, past orders. For instance, you could show a bulletin if that user has bought that production or a similar 1 from the same product category earlier. Or even if they accept visited like products from your online shop.

Some other interesting customization idea is using the kid theme itself. Although you lot are using the custom WooCommerce template, you tin re-create the single-product.php file in the root folder of your child theme. And then, you can use the WordPress template hierarchy naming for completely custom files. For example, if yous rename that file to single-product-{$slug}.php that file is loaded merely for the product with that particular slug. Hence, the single-product-flying-ninja.php file is loaded but for the site.com/product/flying-ninja.

Custom WooCommerce Cart Template

The WooCommerce cart has a folder for itself. And that's for a good reason.

There are many variations for the cart states and elements, and you can customize each of them using these files. The main file is /woocommerce/cart/cart.php. You tin can edit the line 21 and add together this for a message to your customers when they attain the cart:

<h1> Welcome to our shop! </h1>

<p> If yous take whatever questions, experience complimentary to ask! </p>

There are many other files y'all can utilise for your edits, here is a summary of them:

cart-empty.php
cart-item-data.php
cart-shipping.php
cart-totals.php
cart.php
cross-sells.php
mini-cart.php
continue-to-checkout-button.php
shipping-calculator.php

For example, if you want to change the markup for the cart widget, you could utilize the woocommerce/cart/mini-cart.php file.

WooCommerce Templates for the Checkout Workflow

Ane of the almost of import elements of your online store is the checkout characteristic. Thus, you lot may want to ensure that the checkout experience is as smooth and every bit clear as possible. Therefore, a custom markup for that section can provide you custom elements or additional coding opportunity.

The checkout files are under /woocommerce/checkout. As yous can see, there are many files for this section. WooCommerce calls each template in each step. For case, class-aircraft.php is called when y'all are adding the shipping details.

Don't forget that if you want to add together new fields to these elements you need to change the backend code as well. You lot can read more than about this in our commodity on "How to create WooCommerce customer registration with custom fields".

Maybe you want custom widgets, JS or WordPress plugins to format your fields. Ofttimes these plugins just crave you to add a custom ID or CSS form to target them. And so you can open one of the cart files, grade-shipping.php, for example. And so edit it to include your desired class or ID. For instance, edit line 21 to exist:

Conclusion

Today we looked into how to create custom WooCommerce template files. We investigated how the WooCommerce templating works, and how to contain that into your WordPress child theme. In improver, we dived into how to customize different elements of your WooCommerce online shop.

We hope you enjoyed and see you again side by side time!