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.