Customizing WooCommerce With a Child Theme: A Simple Guide

Among eCommerce website builders, WooCommerce is on top because of its highly customizable nature. About half of e-commerce websites are powered by WooCommerce.

If you learn to customize it with your own code, it will be the icing on the cake. Learning to customize WooCommerce with a child theme will give you more power over website design, as you can add desired features if they are not available in the theme.

We have already discussed how to create a WooCommerce child theme in a previous article. After creating a WooCommerce child theme, we will guide you on how can you to customize WooCommerce with a child theme, why it should be customized, and what are the prerequisites for the same.

Why Should You Be Customizing WooCommerce?

WooCommerce comes with basic functionality for an e-commerce store and there are plenty of addons and extensions that provides extra options.

However, if the style of the buttons needs to be changed, you need to add the desired margin or paddings. In other words, if you want to implement your own design idea, for this purpose a child theme is needed for the same, which will be used to customize WooCommerce.

In this context, a relevant question that can arise is: why don’t I customize its parent theme?

The answer is editing the parent theme is risky, it can obsolete your website and if you do the theme updates, your website will be ruined.

So, we create a child theme that will override WooCommerce’s default styling.

Also Read: Customize WooCommerce Product Page

Prerequisites of Customizing WooCommerce with a Child Theme

Its prerequisites are knowledgebase rather than tools.

As customizing a theme involves some high-end coding exercise, you need to have a :

• basic knowledge of web programming.
• basic knowledge of plugin development
• a little understanding of how WooCommerce plugin works
• a child theme (which we already have created)

Now we are heading towards Customizing WooCommerce.

3 Easy Steps of Customizing WooCommerce With a Child Theme

We are using storefront an official WooCommerce theme for this tutorial. We created its child theme with the name storefront-child. We are customizing the checkout page. Now, let’s move to the first step.

1) Declaring Woocommerce Support in Themes

Declaring  Woocommerce support is really important if you’re starting to use a custom theme, else the theme override won’t take place as Woocommerce assumes the new theme is not built for it. We can declare theme support easily, with a few lines of code. Copy the below bold written code and paste it to the functions.php file, which you created in the child theme’s folder. It will allow you to put our own code to an existing website.

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

Now the next step is to start writing your custom code.

2) Adding Custom Written (or copy-paste) Code to functions.php File in the Child Theme

If you know the PHP language, you can add any function through this step. However, we are making a few changes to the code so you can get an idea of how to add your own functions.

For example, if you want to display a message that comes ahead of the checkout form, you have to simply paste the following code (in bold) to functions.php file.

add_action( 'woocommerce_before_checkout_form', 'checkout_message' );
function checkout_message() {
echo '<p> Hay! Welcome to Checkout Page. Cheers!</p>';
}

Note, Paste the code carefully, and no semicolons or commas should be missed. Otherwise, errors will emerge and the code will not work.

The text written between <p> </p> tags is the message you are going to display. You can change it with your own. The <p> </p> tags can be changed with <h3> </h3> tags to make the message bigger.

Secondly, we are guiding you to add a field for entering the Mobile number in the checkout form. Copy the following code and paste it to the functions file.

add_filter( 'woocommerce_billing_fields', 'our_new_field' );
function our_new_field( $contact_fields ) {
$contact_fields['customer_phone']['required'] = true;
return $contact_fields;
}

Here [‘required’] is used to make the Mobile Number field mandatory.

The third example is about completely deleting a field. For example, you don’t like the Email field and want to remove it. Simply pick the following code and put it into functions.php file, in which we are already doing code.

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
unset($fields['order']['email_filed']);
return $fields;
}

These are some examples, and it’s not that difficult to add your own functions to WooCommerce if you know the PHP programming language. The techniques described above will add desired functions to your theme, but if your intention is to do more complex things like a totally different layout, then a custom template needs to be created. 

ALSO READ: How to Customize WooCommerce Order Confirmation Email – Tips and Tricks

In the following step, you will learn how to create a custom template in the child theme of WooCommerce.

3) Creating a Custom Template by Customizing WooCommerce Child Theme

If you want to supersede any of WooCommerce’s templates, this can be easily done by making a custom layout file. In simple terms, a custom template is nothing, but just putting new layouts or totally alter the functions of the existing layouts – just like a child theme superseding its parent theme.

To begin with, you should locate WooCommerce’s current layout files, which are normally placed in the wp-content/plugins/woocommerce/templates directory (in most of the cases).

Now, you’ll have to choose which format you need to utilize. Think about what you need to achieve with the checkout procedure cautiously and how much change is needed from WooCommerce’s standard structure. To give an instance, in case you wanted to redo the pages for products, you’d have to utilize single-product.php.

Also Read: Enhance Customer Buying Experience Using WooCommerce

To make a custom document, you’ll have to make another directory which should be in the child theme. And this ought to be named as WooCommerce, which should be put in wp-content/themes/mythemename/. This will guarantee that, while you update your parent theme of Woocommerce, none of the modifications that you did will be eradicated.

So the new folder, can override the default Woocommerce template files. The structure of the folder needs to be coordinated precisely too. Let’s say, you need to alter the file (template) placed in wp-content/plugins/woocommerce/templates/emails/, then you might want to duplicate it and glue it into the wp-content/themes/yourthemename/woocommerce/messages/.

For a better understanding of how to modify your custom template, let’s take a gander at the template record called cart empty.php. You’ll get this in/plugins/woocommerce/templates/cart/.

You have built the template that will show how shopping cart will look when there are no products in it.

The below code is written to do this designing of an empty cart page with a ‘Return to shop’ button and a message before it. In the next step, you will learn how to change it.

if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly
}
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; ?>

The fourth last line contains the text written on the button “Return to shop”. So, we will change this line using a simple text.

<p> There used to be a button here. It’s gone now.</p>

4. Design Customization using the Child Theme

You can customise the design by editing the style sheets in the child theme folder. 

If you want to change the colour of the headings, add the following to the style.css in the child theme folder.

h1 {
    color: #ff0000; /* Red color */
}

Save the file, and the child theme will be activated. This will leave the parent theme unchanged and ensure that future updates to the parent theme will not overwrite the changes made.

Conclusion

Finally, you have learned the complete process of creating a child theme and Customizing WooCommerce with it. To be honest, penetrating the themes and doing code is not for everyone. We suggest you try this on a new website and in case it’s a working website, create a backup of it. Once you have experienced it, there will be no need for buying additional add-ons.

Acowebs are developers of WooCommerce Discount Rules that will help you personalize your stores. It supports the additional option with feature-rich add-ons which are woocommerce product addons, that are lightweight and fast. You can easily update your store with these add-ons and enjoy a hassle-free experience, check out the best options for additional woocommerce custom product options.