How To Change Template Woocommerce

How to Customize WooCommerce With a Child Theme (In three Steps)

In this article, we'll dig into the more advanced ways y'all can customize WooCommerce. We'll show you lot what you need to know before starting and then accept yous through the procedure of updating your WooCommerce site's checkout process.

WooCommerce'due south customizable nature is a large office of what's made it the most popular e-commerce solution for WordPress. Pretty much anyone tin can employ WooCommerce features and extensions to create a store that suits their needs. Even so, if you're a more avant-garde developer, you may desire greater control over your website's look and functionality.

If this sounds like yous, it's time to learn how to edit WooCommerce kid themes and template files. This does require some prior noesis of WordPress development. Notwithstanding, these techniques will enable yous to customize your site'due south checkout process and even create your own extensions.

A Brief Introduction to Customizing WooCommerce

WooCommerce has made it easy for pretty much anyone to create an online shop in a matter of minutes. That's a big part of why the plugin has go the nearly popular e-commerce solution for WordPress and is currently used to power nearly half of all e-commerce websites.

Yet, information technology'due south non merely the depression bulwark to entry that makes WooCommerce an bonny choice. Like the main WordPress platform, WooCommerce is incredibly customizable. You can employ one of many existing child themes to better your site and increment sales, for example, and y'all can even create your own child theme to further personalize your store's appearance. In add-on, at that place are plenty of extensions available to expand your shop's functionality.

Extensions are plugins that are specific to WooCommerce, which enable y'all to add together to or alter its functionality. This is the nearly common and easy fashion to customize your shop as it is a beginner-friendly and straightforward technique.

All of these methods combined enable yous to create a fashionable, functional WooCommerce site, even if you have express noesis of WordPress development. Nevertheless, if you desire to make a site that'south truly your own, yous volition need to dig a fiddling deeper under the hood of WooCommerce.

To practise that, you'll need to learn how to work straight with WooCommerce template files. Permit's take a closer await at those now.

Why You Might Want to Customize WooCommerce Templates

If you take previous feel with WordPress development, you may already exist familiar with template files. These are PHP files containing markup, which are used to create the structure of your WordPress site. For example, footer.php is a template file that determines the appearance and functionality of your site'south footer on the pages where it'southward used.

Templates files are mainly included in WordPress themes, but plugins tin can add boosted templates if needed. WooCommerce is ane of them every bit it includes templates specific to online stores. For example, the single-product.php template is used to create product pages, while cart.php builds out the shopping cart page.

Past editing these template files or creating new ones, y'all can customize WooCommerce to your liking. This gives yous the control needed to manage every attribute of your store, including the shopping cart and checkout process. This is ideal if yous're a programmer looking to create something unique or you don't want to rely on existing extensions to exercise the chore for you.

Working with template files and a WooCommerce child theme offers plenty of possibilities. Nevertheless, it is also a relatively circuitous chore. With that in mind, let's talk near what y'all should know earlier dabbling in this type of WooCommerce development.

What You lot Demand to Know Before Editing WooCommerce Templates

Earlier nosotros become to the applied information, it'southward important to make certain you take all the knowledge required. Every bit we've mentioned, working with template files is a programmer-level activity so the kickoff thing you'll want to have is a basic understanding of WordPress development.

It volition also be very beneficial for you to have some feel with plugin development or to at to the lowest degree sympathise how plugins piece of work. This is because customizing a WooCommerce template will involve working with hooks, such every bit deportment and filters. Having prior knowledge of these concepts volition therefore be immensely helpful.

Since you'll exist overriding the standard functionality in WooCommerce, it will as well exist useful if you have some familiarity with how WooCommerce works from a development perspective. Finally, y'all'll need a kid theme that y'all tin use. If y'all don't already take ane prepare, take a wait at our tutorial for creating a WooCommerce child theme.

How to Customize WooCommerce With a Kid Theme (In 3 Steps)

The time has come for you to offset customizing WooCommerce. We'll exist using a bare child theme for the official Storefront theme in our examples.

Of class, you tin customize WooCommerce to achieve a wide diverseness of goals. In this tutorial, nosotros'll wait at how you can tweak the checkout process. For instance, you might desire to make edits to the checkout fields or change the way the cart page appears.

We'll show you a few ways you tin can exercise this by using your child theme and the WooCommerce template files. All the same, first, yous'll need to make some preparations.

Step 1: Declare WooCommerce Theme Back up

Before you can make changes to WooCommerce, you need to brand sure that your theme supports them. You do this past declaring theme support, which ensures that WooCommerce tin can utilise your edited templates to override the standard files.

In order to do this, you volition need to edit your child theme'southward functions.php file. This file enables you to add custom code to your site, and nosotros'll be returning to it throughout this tutorial. However, y'all'll offset need to include a office that declares theme back up. You can use this snippet.

              function mytheme_add_woocommerce_support() {              add_theme_support( 'woocommerce' );              }              add_action( 'after_setup_theme', 'mytheme_add_woocommerce_support' );

Paste that into your functions.php file and save it. At this point, WooCommerce volition be able to override the standard functionality with the custom code yous'll exist adding later. Speaking of that, information technology's time to start adding your own code to the child theme.

Step 2: Add Custom Code to Your Kid Theme's functions.php File

As we mentioned in the previous section, the functions.php file enables you to add new lawmaking to your theme. You can use this opportunity to customize the functionality of your WooCommerce site in a few different ways, all by using hooks.

This is specially useful if you lot desire to make changes to existing content. 1 basic example would be to include a message that appears before the checkout form. You can do that past adding this lawmaking to your functions file.

              add_action( 'woocommerce_before_checkout_form', 'checkout_message' );              function checkout_message() {              echo '<p>Please fill all required fields. Thanks!</p>';              }

Another possible use is calculation the following lawmaking snippet to make the Phone Number field in the checkout process optional.

              add_filter( 'woocommerce_billing_fields', 'my_optional_fields' );              part my_optional_fields( $address_fields ) {              $address_fields['billing_phone']['required'] = imitation;              return $address_fields;              }

This part uses a filter to set the billing_phone field as not required. Y'all could also use this aforementioned principle to make other fields non-mandatory, if you wish. All y'all demand to do is change billing_phone to the proper name of the field you lot want to make optional.

You can also remove fields entirely. Let'south say that you don't need the Gild comments field and want to delete it. Add this snippet to your functions file to practice then.

              add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );              function custom_override_checkout_fields( $fields ) {              unset($fields['social club']['order_comments']);              return $fields;              }

These examples demonstrate that it's really pretty uncomplicated to make basic changes to the WooCommerce checkout process. Nonetheless, if you want to practice something a little more complex, y'all can't rely on the functions file alone. For that, allow's take a look at how you lot tin can create your own custom templates.

Step 3: Create a Custom Template

If you want to override ane of WooCommerce'southward templates, you can do and so by creating a custom template file. Put merely, by creating a custom template, you can add new templates or completely alter the functionality of existing ones. This is similar to how a child theme overrides its parent theme.

Start, you will need to find WooCommerce's existing template files. These are located in the directory called wp-content/plugins/woocommerce/templates.

At present, you'll need to make up one's mind which template you desire to use. Consider what you lot want to accomplish with your checkout process carefully and how you lot desire it to change from the standard WooCommerce structure. For example, if you lot desire to customize your production pages, yous'd need to use unmarried-product.php.

To create a custom file, yous'll need to create a new directory in your child theme. This should exist called woocommerce, and needs to be placed in wp-content/themes/yourthemename/. This will ensure that any changes you make will non be erased when you update WooCommerce or your parent theme.

This new binder will be used to override the matching template files in WooCommerce. Every bit such, the folder structure needs to lucifer exactly every bit well. For example, if you want to edit the template file located in wp-content/plugins/woocommerce/templates/emails/, you should copy information technology and paste it into wp-content/themes/yourthemename/woocommerce/emails/.

For a simple example of how you tin can edit a custom template, allow's look at the template file called cart-empty.php. You'll find this in /plugins/woocommerce/templates/cart/.

This template determines how your shopping cart appears when no products have been added. By default, information technology volition look similar this:

As you lot can see, it but includes a basic message and a button. However, what if you wanted to supplant that push button with something else or just get rid of it altogether? This is where the template comes in.

Start by copying the cart-empty.php file and pasting it into wp-content/themes/yourthemename/woocommerce/cart/.

When you view the file, y'all'll see that it contains a lot of comments with developer information. You can disregard those and instead focus on the following section.

              if ( ! divers( 'ABSPATH' ) ) {              exit; // Exit if accessed straight              }              wc_print_notices();              /**              * @hooked wc_empty_cart_message - 10              */              do_action( 'woocommerce_cart_is_empty' );              if ( wc_get_page_id( 'shop' ) > 0 ) : ?>              <p class="return-to-shop">              <a href="<?php echo esc_url( apply_filters( 'woocommerce_return_to_shop_redirect', wc_get_page_permalink( 'shop' ) ) ); ?>">              <?php _e( 'Return to shop', 'woocommerce' ) ?>              </a>              </p>              <?php endif; ?>

This looks like a lot at a glance, merely this snippet is just using deportment and filters to create the Return to shop push. This is what y'all'll want to edit in order to change that characteristic. For instance, you lot could simply supercede the push button with a uncomplicated text string, by removing well-nigh of the code.

              if ( ! divers( 'ABSPATH' ) ) {              exit; // Exit if accessed direct              }              wc_print_notices();              /**                              * @hooked wc_empty_cart_message - x                              */              do_action( 'woocommerce_cart_is_empty' );              if ( wc_get_page_id( 'shop' ) > 0 ) : ?>              <p>There used to exist a push here. Information technology's gone at present.</p>              <?php endif; ?>

If you save the file and open the shopping cart in your store, y'all'll run into that the button is gone and the text snippet displays in its place.

You could also delete the entire if ( wc_get_page_id( 'shop' ) > 0 ) : ?> section if you lot wanted to.

This is a basic instance, of grade, only information technology should give you an idea of how templates can exist used to customize the mode unlike parts of your store wait.

If you familiarize yourself with how WooCommerce uses templates past default, you'll exist able to take the concepts y'all've learned here today to customize your shop without limits. Y'all won't need to rely on extensions anymore and tin can create a store that matches your verbal requirements!

Decision

Digging into a website's code isn't for everyone. Yet, if you take the skills to do information technology, customizing your site can be a hugely rewarding endeavor. By editing WooCommerce kid theme and template files, you won't need to rely on extensions to make your site function exactly how yous want it to.