Storefront Blank Child Theme For WooCommerce

A Blank Starter StoreFront Child Theme For WooCommerce

The best practice way to customize StoreFront for WooCommerce theme is to create a child theme for your project that allows you to store any code customizations. To make it easy for you to begin customizing StoreFront I have created a simple blank child theme that’s ready for you to install and quickly add your custom code to.

When customizing StoreFront or any WordPress theme for that matter you really should be using a child theme to store any custom code like CSS, HTML and PHP you may need to add to your site. By storing this within a child theme, it means that you can always keep up to date with the latest version of StoreFront via auto updates knowing that none of your custom code will be overwritten during this process.

A product developer may change something within the parent StoreFront theme in the future that may also require a little tweak in a StoreFront child theme, This is far less work than trying to maintain or update a parent theme where code has been added directly to the theme’s template files themselves though.

Never do this, Like Ever!

How To Use The StoreFront Child Theme

Firstly download the child theme from Github below in .zip format and install it on your WordPress site in the way that you would install a normal parent theme by uploading it via the admin dashboard of WordPress.

Alternatively you could upload it via FTP to your sites /wp-content/themes/ folder within your WordPress install.

Adding PHP To The StoreFront Child Theme

Any pluggable functions, custom functions, hooks or filters that you write should be added to the child themes functions.php file.

Adding CSS To The StoreFront Child Theme

Any custom CSS that you write should be added to the child themes style.css file below the information text within that file.

There is also a SASS style.scss file included within the child theme just in case you wish to use SASS instead of plain CSS.

14 thoughts on “A Blank Starter StoreFront Child Theme For WooCommerce

    1. Hey,

      When you compile the style.scss file in the /assets folder you should set that to compile the output to the child themes style.css file which loads automatically. If you use OSX there is an app titled CodeKit and for Windows PrePros both of which will compile SASS files into CSS files.

    1. Hey Janek,

      I haven’t personally used the plugin you reference ChildifyMe so I’m not 100% sure how exactly it creates it’s child themes, which process it uses and what files it creates.

      The blank child theme for Storefront is just a simple starter template with the bare basics included which makes it lean and efficient. Also as Storefront automatically loads the parent themes CSS even if using a child theme this theme does not en-queue any CSS in the traditional child theme manner as it is more efficient than @importing it in the child theme style.css file for example.

      You can read more about this in the child themes functions.php file on Github.

  1. Great work Stuart,

    I’m having problems with the Susy grid…when I try to @import spans into the SCSS file it throws an error. I’ve been looking for a solution…but can’t find one.

    Any suggestions?

  2. Hi there, total newbie here…

    I`m trying to personalize this theme, but the nav menu dont show at the menu options…

    any suggestions ?

    1. Hey Ramos,

      The starter theme does not remove or affect any of the default Storefront theme behaviour with regards to menus or similar. All default WordPress menus including storefronts are located at WordPress Admin > Appearance > Menus.

  3. Hi Stuart!
    I’m totally new to SASS. Is it possible to override the “base color scheme” in _variables.scss in Storefront? How would I do that in the child theme?

    Thanks for any help!

    1. Hey Ben,

      Usually, you don’t need to override all the CSS within a file as you may only be editing certain elements. You can simply copy over the specific elements you are going to change from the original file into your child themes /assets/style.scss file and then make your changes to those before compiling the /assets/style.scss file into the themes style.css file.

      You can learn a little more about SASS from this free course below as it gives a good introduction to what a CSS extension language is and how, why it’s become so popular.

      https://www.codecademy.com/learn/learn-sass

Leave a Reply

Your email address will not be published. Required fields are marked *