Nov 192016

WordPress WooCommerce Install Free Theme Storefront post will show you how to install the free Storefront theme that comes with WooCommerce plugin.

Last Updated: February 14, 2019

Latest News: I have added more information below.

When you look at the default WordPress theme Twenty Sixteen, you can see no style added to the theme. A shopping cart needs more style. Your shop needs to look pretty and presentable so your customers will want to buy your products. Lucky for you WooCommerce includes a free theme that will do just that Storefront.

Latest version Storefront 2.4.3 changelog 

* Feature – Replicate Storefront’s layout logic in the block editor. Wide and Full-width options are made available only if supported.
* Enhancement – Product pagination is now circular and skips hidden products.
* Tweak – Remove unused variables from `inc/customizer/class-storefront-customizer.php`.
* Tweak – Refactored “Posted on” section in `storefront_post_meta()`.
* Tweak – Standardize mixing of static/non static function calls in the `Storefront_Customizer` class.
* Tweak – Remove padding and transition styles from post navigation.
* Fix – Remove hard coded colors for Blocks from `gutenberg-blocks.css` and use colors set in the Customizer instead.
* Fix – Clear floats on alignwide and alignfull blocks.
* Fix – When outputting custom styling for extensions, check if the object `$storefront` is in the expected format and has right properties.
* Dev – Babel added as a dependency.
* Dev – New `assets/js/src/editor.js` file.
* Dev – Revert filter name. `storefront_woocommerce_customizer_css` reverted to `storefront_customizer_woocommerce_css`.
* Dev – New hooks added to post header section: `storefront_post_header_before`, `storefront_post_header_after`.

Note: These instructions are meant for those that have not purchased a theme, don’t know which free theme to use from WordPress repository and want more style and a better presentation for their online store. WooCommerce free theme Storefront has all you need to get your online store up and running. 

What You Need:

WordPress WooCommerce Install Free Theme Storefront

Step 1 ) The following image shows you the site running Twenty Sixteen theme with the shopping cart set up from in the previous tutorial. This is okay but it looks too plain and ugly. Lucky for you, WooCommerce has released for Free Storefront theme.


Step 2 ) Install the theme like you normally do.

Note: You can read more about how to install a WordPress theme from the following URL How To Install WordPress Theme.

Step 3 ) The following image shows you how to get Storefront theme from within WooCommerce plugin. It has the link and instructions.

Go to WooCommerce -> Extensions and locate the theme and install it. You can also read more about the theme. If the link is not working simply download the theme locally to your computer and upload it to your site.


Note: The following instructions are for manually installing the theme once you have downloaded the zip file locally to your computer. 

Step 2 ) Go to Appearance -> Theme to start uploading and installing the new theme Storefront.


Step 3 ) The following image shows you the current theme Twenty Sixteen currently active. Click on Add New link to upload the new theme WooCommerce Storefront which you downloaded in Step 1-a ).


Step 3-a ) Click on Upload Theme link as shown in the following image.


Step 3-b ) Once you have located the zip file you downloaded to your computer click on Install Now button. This will install Storefront to your site.


Step 4 ) The following image shows you the new theme Storefront added to the site. You can already see the difference when compared to Twenty Sixteen above in Step 1 ) There is more style, the cart button is different. There is even a search for product box available.

Note: The following design is the default Storefront design without any customization.


That is all you need to do to add a new free custom store front theme to your site.

Click on the following URL Customize Storefront Theme 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.


WooCommerce Plugin Tutorial List:

Manuel Ballesta Ruiz is a web developer, Blogger and WordPress Enthusiast.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>