How to change the layout of your WooCommerce Storefront Theme home page [2019]

customize woocommerce storefront theme home page

Updated – 14th May 2019

Version 2.5 of the WooCommerce Storefront theme now has in-built support for the new Gutenberg Block editor. 

When you first install the WooCommerce Storefront Theme, you’ll get a basic home page layout, that has been built using a selection of blocks

And you can edit the layout of your home page quite easily.

However you are still somewhat limited if you really want to make your WooCommerce Storefront home page really stand out!

And your Storefront home page is one of the most important pages on your website.

Below you can see a much more exciting WooCommerce Storefront Home page

Click here to see a live demo of the WooCommerce Storefront home page I built

This was built using the three plugins listed below and the new WordPress block editor :)

customize woocommerce storefront homepage

This is what it looks like in the block editor

change the layout of WooCommerce Storefront home page

Important – how to customize your WooCommerce Storefront Home page if you didn’t start by installing version 2.5 of the Storefront theme

If you installed Storefront a while ago then you will still be using the old version of your home page.

The WooCommerce Storefront theme came with a home page template that automatically brings your products into a page.

It’s great because it’s automated, however the downside is that you are then stuck with the order and layout of the page.

In my view there is a better way for store owners to build a WooCommerce Storefront home page.

To customize your home page just follow the following steps

  • When view the home page click edit page
  • Change the template from ‘home page’ to default or full width
  • Now add your blocks (as in the first part of the tutorial above)

If you have any questions, please feel free to leave a comment below,

25 thoughts on “How to change the layout of your WooCommerce Storefront Theme home page [2019]”

  1. When I try and add products, it tells me there is an addon for Woocommerce, then gives me the error:

    Sorry, you are not allowed to access this page.

      1. Dear Jamie, I just bought the Pootle Pagebuilder (Premium), I have installed it successfully.
        But this option still is not working? I still get the error. What to do?
        Am I doing something wrong?
        I got this plugin just for to display products on the main page.
        Hope to hear from you as soon as possible!
        Greetings, Tiffany

        1. Hi Tiffany,

          Could you raise a support ticket with login details to your site and we’ll take a look for you :)

          Here’s the link

          many thanks

  2. So we cannot add products without Pro version?

    That’s absurd that we have to find that out after hours of installing and building… major turnoff to this product and company.

  3. Hi Jamie, I have the pro version for my own website but I can’t seem to use it on my staging site to trial a new shop. Do I need a licence for the staging site even though it won’t be published? I can’t seem to activate the free version on my staging site because it thinks I have a pro account so its all getting a bit circular!

    Any help would be gratefully received. Laura

    1. Jamie Marsland

      Hi Laura,

      You should be able to use 1 licence on 1 production site and 1 development site, but it sounds like you may have a glitch.

      Even though it hasn’t activated it should still work however,

      If not, could you raise a support ticket with login details

      Many thanks,

  4. Hi Jamie, I am not sure if I have the correct place for my question. I have storefront for my collegiate business. I love it, but am not sure how to manage the front page. For example, I just want to list schools names ( not too large) and a small picture for each school and a link to the page of their respective products. Also, I did not want the “new in” and “best sellers.” Can you please help me. Thank you so much, Bebe in Marietta, Ga.

  5. Heyo!

    Installing this plug-in and then using the edit function doesn’t show the same layout of adding rows like yours does. Did i miss a step after installing and activating the plugin?

      1. No i missed that part. I’m just trying to edit the static homepage. The product sections in there do not apply so trying to re-create the sections with relevant headers and sort the products accordingly.

  6. First of all: nice plugin! I really like using it.
    Is there a way to make the blocks from the “Triple Trouble” Pootle Cloud template to become links? I can make the text inside each block to behave as a link, but I would like to make the whole block to be a link, is this possible?
    Thanks in advance!

  7. Hi there, Is there any way to hide product price and add to cart from homepage? All the documents just mention how to hide them in shop page, product page etc but not in homepage.

Leave a Comment

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