How to Create a WooCommerce Child Theme?

In this article, we will guide you on how to customize the WooCommerce with a child theme. Before heading towards that, we will walk you through what a child theme is and why someone needs it.
A child theme allows you to do changes to the original theme without any risk of losing the website and its content. Using a child theme ensures that the actual theme will remain unedited. This elucidates the process of making any customizations to the WooCommerce website and gives it your fancied appearance.

Why Should a Child Theme Needs to be Created? 

Sometimes, you are using WordPress theme and you feel it’s not everything you want. WordPress themes come with a wide range of customization but still one wants their own design to the theme. For such purpose, you need to edit the theme, but editing the original theme is risky that can root out your website in the future.

If you go into your theme code like function.php or CSS files, write your own functions. When the theme got updated it will vanish the website.

The solution to this heck is creating a child theme of your actual theme. By creating a child theme, you will embed all the functionality plus designing of the parent theme. Editing the function.php file and modifying the built-in functions will conflict with the parent functions file. You can anyhow extend the file and add new features. 

Secondly, you can edit the CSS file to any extent, add your own designing patterns, these changing will override the parent CSS design. CSS never conflicts with the parent CSS.

What are the Themes for WooCommerce?

We are going to teach 5 easy steps of creating a WooCommerce child theme, but before that, it is necessary to know about the particular themes that are best compatible with WooCommerce. 

WooCommerce is an eCommerce solution by WordPress, that was launched in 2011. from that, it is dominating the world of eCommerce builders and 42 percent of all online shops are powered by it. Shopify and Magento are its competitors but Woo left them apart if we see the number of users.

The main reason which is why WooCommerce is so successful is the ease of creating a wonderful store and free of cost. Yes, it’s totally free plugin, though sometimes we need premium addons to offer additional options. If WooCommerce is combined with the right theme you will have endless customization possibilities.

Storefront is a WooCommerce official theme. It comes in a clean layout that is best to focus on PRODUCTS and creating compelling stores.

5 Easy Steps of Creating a WooCommerce Child Theme

Creating a Folder for Child Theme

To create a Child Theme, the first and foremost step is to create a child theme folder in your theme directory. For adding a child theme to your existing site, there is a free application called FileZilla, through it you can create the folder via SFTP.

Once the folder is created, grab your hosting credentials and sign in to the website. After it, your path is wp-content/themes/folder. The website’s themes reside at this location. You can create a new folder here, but remember to assign a name for the same (related to your theme name). let’s say the theme name is the storefront the folder name should be storefront-child.

So, now what to do in this newly created folder?

Firstly create functions.php which would be just a simple text file. Basically, this file holds all the functions of your website and it dictates how the website acts. You can create the file and leave it blank, for the time being.

Creating this file in the child theme folder makes it ready to activate and use. A CSS stylesheet is however needed.

Also Read: Enhance Customer Buying Experience Using WooCommerce

Creating Child Theme’s CSS File

The second step is creating a CSS stylesheet in the child theme of your website. This is exactly the file that contains all applied designs on your website’s pages and the text and image contents. When someone says updating styles it means they are referring to edit the site’s CSS stylesheet file.

Parent theme definitely has the stylesheet, but it’s necessary to create it into a child theme which will override previous styles. First, you have to create a simple text file in the child theme folder and name it as “style.css”.

Below is a code that you can copy-paste to the newly created style.css file. These are actually details about the changes you are doing.

/*
Theme Name: Storefront Child
Theme URI: http://example.com/storefront-child/
Description: My first WooCommerce child theme
Author: Your Name
Author URI: http://example.com
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

You can simply change the Theme Name, Description, and Author according to your names.

Also Read: Dynamic Pricing Strategy

Configuration for Inheriting the Styles of Parent Themes in Child Theme

Now the time is to edit the CSS file to change the styles. First of all note, that styles written in the child CSS file will override parent’s styles but if you remain an element unedited the theme will be using the style of parent theme for that element.

Take an example, suppose in parent theme the background color is red and font size is 17px. When editing the child CSS you set the background color to green and did not touch the font size. Then the background color would be changed and the font size will remain the same as it was in the parent theme.

Doing so is very easy, give a reference to your parent theme by adding the following LOC (line of code) in child style.css.

Template: storefront

We are supposing “storefront” as our theme, you will use your theme’s name here.

Also Read: How Scalable in WooCommerce

Activating the Child Theme

Finally, as the child theme now ready, we should test it. Go to the website dashboard, Hover on Appearance and click the Themes. Then activate the created plugin, which in our case is Storefront Child.

Now go to the frontend have a glimpse of your creation. The important thing is still remaining, the website yet looks similar, for making changes you need to add CSS to that style.css file. 

Adding CSS to style.css file in Child Theme

Now you are all ready to design your website as you want. We hope you know the CSS language. Now you can create the buttons of your style. Give them your desired height and width. You can even give the animation if you are able to do so. You can add desired margins and padding. we, however, will guide you on how you can change the style of the buttons. Add this code to the file.

a.button,
button.button,
input.button,
#review_form #submit {
font-size: 17px;
background: black;
color: green;
border: 2px solid brown;
}

Also Read: WooCommerce Setup Tutorial

Wrapping Up

It’s true that with WooCommerce it’s really simple to make an online shop and customize its look and feel can also be done by using any suitable theme. You are not forced to depend on the creation of others. Making a WooCommerce child theme of your own isn’t as troublesome as you may assume, and most importantly, it gives you the complete liberty to do it according to your target audience and the user experience of it.

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.