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: June 5, 2020

Latest News: Updated the documentation.

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.5.7 changelog release notes.

* Fix – Edit, reply and author icons are now displayed in comment list. #1319
* Fix – Updated font-weight of the All Products block so it matches the other product grid blocks. #1344
* Dev – Include FontAwesome brands icon set. #1345

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 Storefront theme has all you need to get your online store up and running in no time.

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.

woocommerce-install-storefront-theme-twenty-sixteen

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.

woocommerce-extensions-storefront-theme

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.

woocommerce-install-storefront-theme-appearance-theme

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 ).

woocommerce-install-storefront-theme-add-new-theme

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

woocommerce-admin-appearance-upload-theme

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.

woocommerce-install-storefront-theme-install-new-theme

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.

woocommerce-new-storefront

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.

Enjoy.

WooCommerce Plugin Tutorial List:

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 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>

(required)

(required)

We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept
Reject
Privacy Policy