Last updated - August 24, 2020
A child theme is a modification of an existing theme retaining its basic style and functions. The original theme is called a parent theme and the new modified one is called a child theme. Creating your own WooCommerce Storefront child theme is a good way to go when you want to personalize your store without purchasing a new theme.
Advantages of using a child theme
Directly modifying a theme runs the risk of losing the modifications during the update. A child theme ensures that the modifications are preserved intact. Overall, developing a child theme is a faster process than creating a fresh theme. In addition, to those who are interested in WordPress theme development, creating a child theme is a great way to experiment and learn.
Creating a WooCommerce Storefront Child Theme
It is advisable to have a proper backup of your site before you attempt to customize a theme. You need FTP-access to your host to upload the new child theme.
To start the process, create a style.css file for the child theme with the following example code given in the WooCommerce Docs.
Next, change the template field to point to Storefront.
One difference that you may have noticed here is that with Storefront you do not need the enqueue step that was followed while creating a child theme for the twenty fifteen theme. When creating a child theme using Storefront, you only require a blank function.php file and a style.css file to start the process.
You can simply transfer the file to a child theme folder, create a zip file, and upload. Once this is done, activate the new child theme from Appearance → Themes.
Now you can customize by adding codes to the child theme stylesheet and template files. For example, you can copy any template file from Storefront theme folder to the child theme folder. This file in the child theme folder can be customized by modifying the code as per your requirement.
Creating a general child theme
The process of creating a child theme is different and simpler in storefront compared to other themes. In this article, we’ll look at the basic details of the general method too.
The first step is to create a theme directory. Next, create a stylesheet (style.css file) for the child theme. WooCommerce recommends creating a functions.php file, which is useful to correctly enqueue styles.
Creating child theme directory
Create and place the child theme directory in wp-content/themes. Appending the name of the child theme directory with ‘-child’ is suggested, though not mandatory. Care should be taken not to leave spaces in the child theme directory name to avoid any issues.
Creating the child theme’s stylesheet
Create a stylesheet header to start the process. Below is a WordPress Codex example of a stylesheet header created for a child theme based on Twenty Fifteen theme.
While creating a child theme, you can use this example text as a reference point and can replace it with details relevant to your theme. The Template line gives the directory name of the parent theme. You have to adjust it according to the theme that you are working with.
Enqueueing the parent and child themes
Create a functions.php file in the child themes directory to enqueue the parent and child themes. Enqueue the parent theme stylesheet by adding a wp_enqueue_scripts action, and by using wp_enqueue_style() in the child theme’s function.php. Open your child theme’s function.php with a PHP tag (<?php). Next, enqueue the parent and child theme stylesheets. Below screenshot is an example that will work only if your parent theme uses one .css file to hold the CSS. If there is more than one .css file, like style.css, main.css, ie.css, then ensure to maintain all parent theme dependencies. A good level of coding knowledge is clearly an important factor in getting this right the first time.
You also have to enqueue the actual CSS code in your child theme style.css. To ensure that the child theme stylesheet loads after the parent stylesheet, you can set the parent style as a dependency. Additionally, include the child theme’s version number to ensure that you can bust cache also for your child theme. The recommended example in Codex is as given below:
Activating your child theme
Create a zip file of your child theme folder and upload it by navigating through Appearance → Themes → Add New Theme.
Now the new child theme will be visible on the list of themes.
You can activate the new child theme now by clicking the Activate button.
You can also download a sample child theme from this WooCommerce link to know better. Or read some of our related articles: