WordPress WooCommerce Customize Storefront Theme

The following post WordPress WooCommerce Customize Storefront Theme post lets you know what you need to customize the Storefront theme.

Last Updated: December 4, 2019

Latest News: Updated the link in the footer.

WooCommerce makes it very simple to customize the Storefront theme using a plugin. This plugin is designed to make adding custom CSS, JS, PHP and even custom pages to your theme. Some might think that it is like a child theme but below you will read the difference between a child theme and this plugin.

Note: It is extremely important to read the readme.txt file first before you begin.

What You Need:

• Filezilla free ftp tool. (Optional and useful. I highly recommended)

WordPress WooCommerce Customize Storefront Theme

Step 1 ) The following image shows where you go to download the Themes Customisations plugin. Go to Appearance -> Storefront and locate the following button Download Theme Customisations.

Step 2 ) Once you have downloaded the plugin to your computer or laptop, you need to install the plugin. After you install and activate the plugin go to Plugins -> Installed Plugins. Located the plugin you just installed and click on Edit link as illustrated in the image below.

Step 3 ) Once you click on Edit link above you will see a few files. Click on the the readme.txt file to learn more about what you can do with this plugin.

Plugin Files

• theme-customisations.php
• custom.js
• functions.php
• style.css
• readme.txt = This file contains instructions on how to use the plugin.

Plugin Readme File

The following are the instructions and information provided in the readme.txt file.

===============================================

(Quoted from the plugins readme.txt file.)

== Usage ==

* Add any CSS snippets to `custom/style.css`. This file is found in this plugin.
* Add any PHP snippets to `custom/functions.php`. This file is found in this plugin.
* Add any jQuery snippets to `custom/custom.js`. This file is found in this plugin.
* Add custom top level template files (page.php, single.php etc) to `custom/templates/`. You will need to create the templates folder.
* Add any WooCommerce template files to `custom/templates/woocommerce`. You will need to create the templates and woocommerce folders.
* Activate the plugin.

== Frequently Asked Questions ==

= Isn’t this what child themes are for? =

Well, kind of. Sure, you can put your modifications in a child theme, but there are many places (including woothemes.com and wordpress.org) to download and use child themes. If you decide to use a child theme built by a third party and make modifications there, you would lose them when performing updates. Also if you make all your modifications in your own custom child theme then realise that you want to use a child theme from your favorite theme vendor, you’ll have to move all of your modifications somewhere else. To avoid that hassle, use this plugin.

= What templates can I override via this plugin? =

As you know, to override a parent themes template file via child theme you can just copy/paste it into your child theme. This is the one drawback of using this plugin – you can only override top level templates – not template partials. This means that you could add a `page.php` template file to the `/custom/templates/` dir of this plugin and it would work fine. You could not however add a `header.php` or `footer.php` template file. Those would not work.

= Should I put all my customisations in this single plugin? =

That’s entirely up to you. There’s nothing to stop you from duplicating this plugin and changing the name. That way you could theoretically keep each of your customisations in their own individual plugins. This can be very handy when debugging, or if you want to quickly enable/disable a specific customisations temporarily.

===============================================

Readme File Usage Instructions

Step 4 ) Under the Usage instructions above it talks about creating folders and adding pages and custom pages.

Earlier I mentioned Filezilla ftp. If you don’t like to ftp into your server you can create all the necessary folders and even add your files locally in your computer/ laptop.

Steps To Take

• Unzip the file you downloaded above in step 1. Once you have unzipped the folder you will see a tree structure showing you all the folders and files.
• Create your new folders like /templates/woocommerce/. Once you have created these templates add your custom pages and other files if any. Remember to keep the tree structure as mentioned in the readme.txt file above.
• Once you have completed the above, zip the folders and files again and give it the same name i.e theme-customisations-master.
• Log into your website and delete the previous version of the plugin if you had installed it. Then upload and install the new version.
• Now you can carry out some editing from the back end as mentioned in step 3 above by selecting the correct file to edit.

===============================================

After reading the above you should know whether to use a child theme or this plugin. In most cases you will probably use this plugin if you are going to do many customization’s. After all it is developed and maintained by WooCommerce plugin developers.

Click on the following URL How To Add Products to learn more.

If you have any questions please let me know.

I will be updating this tutorial from time to time so make sure you come back for the latest.

Enjoy.

WooCommerce Plugin Tutorial List:

• WordPress WooCommerce eCommerce Plugin