Customizing WooCommerce With a Child Theme: A Simple Guide

After creating a WooCommerce child theme, we will guide you on how can you customize WooCommerce with a child, why it should be customized, and what are the prerequisites for the same.

Among e-commerce website builders, WooCommerce is on top because of its highly customizable nature. As we have mentioned earlier that about half of e-commerce websites are powered by WooCommerce.

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

Why Should You Be Customizing WooCommerce?

WooCommerce comes with basic functionality for an e-commerce store and there are plenty of addons and extensions who suffice the needs of 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 have created 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

Through this step, you can add any function, if you know the PHP language. However we are doing a few changes with 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’ve 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, no semicolons or commas should be missed. Otherwise, errors will emerge and code does 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 for making the message bigger.

Secondly, we are guiding you to add a field for capturing 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 Mobile Number field mandatory.

The third example is 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;
}

Actually, these are some examples and it seems it’s not a heck to add your own functions to WooCommerce. Knowing the PHP programming language is of course essential. 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 ever 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, as in the image above, can override the new WooCommerce template files, above the default one of Woocommerce. Accordingly, the structure of the folder needs to coordinate 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 with 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 the cart. See the following photo.

Look at the photo above, it has a button “Return to shop” and a message before it. The below code is written to do this designing. 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>

The new form will be something like:

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.