Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code/templates and resolving potential conflicts, select a WooExpert or Developer for assistance.
What is a child theme?
↑ Back to top- Theme developers can use child themes as a way to offer variations on a theme, similar to what we do with the Storefront child themes
- Developers can use child themes to host customizations of the parent theme or any plugin on the site since the child theme will get priority over the plugins and parent theme
Make a backup
↑ Back to topGetting started
↑ Back to topMaking the child theme
↑ Back to topstyle.css
and put this code in it:
/* Theme Name: Child Theme Version: 1.0 Description: Child theme for Woo. Author: Woo Author URI: http://woocommerce.com Template: themedir */Next, we need to change the Template field to point to our installed WooTheme. In this example, we’ll use the Storefront theme, which is installed under
wp-content/themes/storefront/
. The result will look like this:
/* Theme Name: Storefront Child Version: 1.0 Description: Child theme for Storefront. Author: Woo Author URI: http://woocommerce.com Template: storefront */ /* --------------- Theme customization starts here ----------------- */Note: With Storefront, you do not need to enqueue any of the parent theme style files with PHP from the theme’s
functions.php
file or @import
these into the child themes style.css
file as the main parent Storefront theme does this for you.
With Storefront, a child theme only requires a blank functions.php
file and a style.css
file to get up and running.
Uploading and activating
↑ Back to top- Through FTP. If you’re using FTP, it means that you go directly to the folders of your website. That means you’ll need FTP access to your host, so you can upload the new child theme. If you don’t have this, you should talk to your host and they can give you your FTP login details, and then download an FTP program to upload your files.
- Through the WP Dashboard. If you create a .zip file of your child theme folder you can then simply upload that to your site from the WordPress > Appearance > Themes > Add New section.
wp-content/themes/
, for example, wp-content/themes/storefront-child/
. Once uploaded, we can go to our WP Dashboard > Appearance > Themes and activate the child theme:

Customizing design and functionality
↑ Back to topDesign customization
↑ Back to top/storefront-child/style.css
:
.site-branding h1 a { color: red; }After saving the file and refreshing our browser, you will now see that the color of the site title has changed!

Template changes
↑ Back to topNote: This doesn’t apply to Storefront child themes. Any customization to a Storefront child themes files will be lost when updating. Instead of customizing the Storefront child themes files directly, we recommended that you add code snippets to a customization plugin. We’ve created one to do just this. Download Theme Customizations for free.
But wait, there’s more! You can do the same with the template files (*.php
) in the theme folder. For example if w, wanted to modify some code in the header, we need to copy header.php from our parent theme folder wp-content/themes/storefront/header.php
to our child theme folder wp-content/themes/storefront-child/header.php
. Once we have copied it to our child theme, we edit header.php
and customize any code we want. The header.php
in the child theme will be used instead of the parent theme’s header.php
.
The same goes for WooCommerce templates. If you create a new folder in your child theme called “WooCommerce”, you can make changes to the WooCommerce templates there to make it more in line with the overall design of your website. More on WooCommerce’s template structure can be found here.
Functionality changes
↑ Back to topNOTE: The functions.php in your child theme should be empty and not include anything from the parent theme’s functions.php.
The functions.php
in your child theme is loaded before the parent theme’s functions.php
. If a function in the parent theme is pluggable, it allows you to copy a function from the parent theme into the child theme’s functions.php
and have it replace the one in your parent theme. The only requirement is that the parent theme’s function is pluggable, which basically means it is wrapped in a conditional if statement e.g:
if (!function_exists("parent_function_name")) { parent_function_name() { ... } }If the parent theme function is pluggable, you can copy it to the child theme
functions.php
and modify the function to your liking.
Template directory vs stylesheet directory
↑ Back to topget_template_directory()
will reference the parent theme. To make it use the file in the child theme, you need to change use get_stylesheet_directory();
.
More info on this from the WP Codex