How to Create WooCommerce Storefront Child Theme

Storefront Child Theme

Last updated - March 5, 2021

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.

Get WooCommerce Storefront!

Child theme –  An overview

As mentioned in the introduction, a child theme will be using the parent theme as its base, and will confer additional features to the theme. Often this is a good option when you want to make variations for one theme. In the Storefront child themes directory, you can find a good range of premium child themes suitable for varied industries and product types. This way you can easily create your own child theme for Storefront.

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.

Here are some of the advantages in creating a child theme:

  • Helps to create different variations for the same theme to suit different domains.
  • Can save the design customizations separately without modifying the parent theme.
  • Customizations can be preserved even after the update of the parent theme or the core files of WordPress or WooCommerce.

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.

Creating style sheet for Storefront child theme
Creating style sheet for Storefront child theme

Next, change the template field to point to Storefront.

Pointing to storefront
Pointing 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.

You can also upload the child theme through FTP, if you have access to your hosting service. You can use an FTP program like FileZilla.

Top FTP Clients for Mac and Windows.

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.

How to customize the design and functionality of a child theme?

With the above settings, you have created a child theme for Storefront. However, there are no custom properties for your theme yet. You can add functionalities and design customizations to your child theme without modifying the parent theme.

Design changes

For example, in the above stylesheet that you have created for the child theme, you can customize the color for site title with the below code:
.site-branding h1 a {
color: red;
}

Template modifications

You can also modify the template files (*.php) in the theme folder. For example, you can modify a specific code by copying the header.php from the parent theme folder wp-content/themes/storefront/header.php to the child theme folder wp-content/themes/storefront-child/header.php. 

Once the copying has been done, you can edit header.php and customize any code as per needs. The header.php in the child theme will be used in the place of the parent theme’s header.php.

You can also make modifications to WooCommerce templates in this way. Simply create a new folder in your child theme and name it “WooCommerce”. Here you can make changes to the WooCommerce templates to get them aligned with your site design.

This WooCommerce documentation will help you understand more about WooCommerce template structure.

Customizing functionality

When you create a child theme, you would want it to have custom functionality as well. For this, you need to first ensure that your functions.php file is empty and does not contain any information from the parent’s functions.php file. Now, if a specific function in the parent theme’s function is pluggable (wrapped in a conditional if statement), then you will be able to copy that to the child themes functions.php. Once you have copied a pluggable function, you can make changes as required. Below is an example for a pluggable function:
if (!function_exists("parent_function_name")) {
parent_function_name() {
...
}
}

Creating a general child theme

The process of creating a child theme is different and simpler with 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 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.

Example style sheet header for child theme
Example stylesheet header for child 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.

Enqueueing parent and child themes
Enqueueing parent and child themes

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:

Codex recommended example for enqueueing parent and child themes
Codex recommended example for enqueueing parent and child themes

Activating your child theme

Create a zip file of your child theme folder and upload it by navigating through Appearance → Themes → Add New Theme.

Uploading the child theme
Uploading the child theme

Now the new child theme will be visible on the list of themes.

Displaying the child theme
Displaying the child theme

You can activate the new child theme now by clicking the Activate button.

Activating the child theme
Activating the child theme

You can also download a sample child theme from this WooCommerce link to know better. Or read some of our related articles:

  1. How to Choose the Right Theme for your WooCommerce Store?
  2. How to Install and Configure Storefront?
  3. Latest Trends in WooCommerce Themes.

6 COMMENTS

  1. I am using Storefront ver. 2.3.5

  2. I am currently using the parent theme. I made the child theme folder, uploaded the styles.css and functions.php as instructed and the above is what I see in my themes when I go there.

  3. Broken Themes

    The following themes are installed but incomplete.
    Name Description
    Storefront Child The parent theme is missing. Please install the “Storefront” parent theme.

LEAVE A REPLY

Please enter your comment!
Please enter your name here