How to Create WooCommerce Storefront Child Theme

0
1286

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 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 with 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 twenty fifteen theme. When creating a child theme using Storefront, you only require a blank functions.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 to create 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 style sheet 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 are 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 among 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 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.

LEAVE A REPLY