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

This tutorial will show you how to get 100% control of the WooCommerce Storefront Home Page. You will be able to edit the entire design and layout of the Storefront Home Page, and no coding what so ever is required.

The WooCommerce Storefront Theme comes with a home page template that automatically brings your products and categories into a page.

You’ll typically start with the following headings

  • Shop by Category
  • New in
  • We recommend
  • Fan favourites
  • On sale
  • Best sellers

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

But don’t worry there is a really easy way for you to customize your WooCommerce Storefront home page.

To customize your Storefront Theme home page just follow the following steps

  • Click edit home page
  • Change the Page template from homepage to either default or full width.
  • Re-build the page using WooCommerce Blocks and Storefront Blocks

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 πŸ™‚

Storefront Pro and Storefront Blocks are optional but using them will help you take your designs to the next level.

Video tutorial

How to Edit the WooCommerce Storefront Home Page in two steps

1) Change the Storefront Theme Home Page Template

First you need to go to the edit screen of the WooCommerce Home Page and change the Page Template setting that is found in the right hand customizer, underneath Page Attributes.

You need to change the template this to either Default or Full Width. Full Width is great if you want to have a full width banner on your WooCommerce Home Page.

When you change the Storefront Page Template so that it’s not Homepage none of the sections will be pulled in automatically and you’ll have complete control over what is shown on the page.

change page template type

2) Build your new WooCommerce Storefront Home Page using the WordPress Block Editor

The second step is to build the WooCommerce sections and/product into our Storefront Home page. You can either use the Storefront Blocks plugin or the WooCommerce Blocks that come with WooCommerce. Storefront Blocks comes with ten premium blocks that will take your Storefront Home Page to the next level. You can see the Blocks included with Storefront Blocks here.

Storefront Blocks

You’ll find all the WooCommerce Storefront Blocks available in the Block Library.

edit woocommerce storefront home page

Storefront Blocks include;

  • Product Table Block
  • Product List Block
  • Masonry Category Block
  • Masonry Product Block
  • Product Square Grid Block
  • Product Card Block
  • Product Normal Grid
  • Product Slider
  • Single Product Block
  • Product Carousel
  • Sale Countdown Block
  • Product Flip Book

WooCommerce Blocks

WooCommerce comes with it’s own set of Blocks that you can use for your customize Storefront HomePage.

woocommerce blocks

WooCommerce Blocks include;

  • Reviews Block
  • Featured Category Block
  • Featured Product Block
  • Hand Picked Products Block
  • Best selling Products Block
  • Products Categories List
  • Products by Attribute
  • Product Search
  • Product Filter
  • Top Rated Products
  • Products by Tag
  • On sale Products
  • Best selling Products

The finished result

customize woocommerce storefront homepage

This is what it looks like in the block editor

change the layout of WooCommerce Storefront home page

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


Comments

35 responses to “How to change the layout of your WooCommerce Storefront Theme home page”

  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. Jamie Marsland Avatar
      Jamie Marsland

      Hi Robert,

      That’s now part of Pootle Pagebuilder Pro,

      Kind regards,
      Jamie

      1. Tiffany Borgman Avatar
        Tiffany Borgman

        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. Jamie Marsland Avatar
          Jamie Marsland

          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 pootlepress.com/support-form

          many thanks
          jamie

          1. Tiffany Borgman Avatar
            Tiffany Borgman

            ok !

      2. Hello, how i can remove the footer colunns ? i only need one

  2. how to make this page appear on the homepage.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi, just go to settings / reading

      and set it as your front page πŸ˜‰

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

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Tom,

      Yes you can by just adding WooCommerce shortcodes into rows https://marketpress.com/2015/woocommerce-shortcodes-list/

      The pro version gives more control however

      Hope that makes sense,

      jamie

    2. Hardly absurd, they guy has to make a living!

      1. Jamie Marsland Avatar
        Jamie Marsland

        Thanks Alex πŸ™‚

        And I have three growing daughters to feed,

        Jamie

  4. 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 Avatar
      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 https://pootlepress.com/support-form

      Many thanks,
      Jamie

      1. Thanks for the speedy response.

      2. Hi Jamie, sorry to barge in here but I am having a similar issue. Production site OK, staging site says I need to activate??

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

  6. 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. Jamie Marsland Avatar
      Jamie Marsland

      Hi Jamie

      Did you create a new pagebuilder page to start with?

      jamie

      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.

      2. No i missed that part– i didnt see that in the video?

  7. 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!
    Regards

  8. how to download Pootle Pagebuilder free version?

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

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi

      Yes you can do this with storefront blocks and storefront pro πŸ™‚

  10. Hi Jamie, is there any possibility of adding a product slider on the storefront homepage?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Yes πŸ™‚

      If you use our storefront pro plugin, it’s part of that.

      Or you could use our storefront blocks plugin – that has a product slider block πŸ™‚

      jamie

  11. Hello,
    It is possible to add the headings (Shop by Category, New in, We recommend, etc) without on Default template?

  12. hello
    great video
    how can we enable infinite scrolling on that page?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi,

      You’d probably need some custom development or find a plugin (like our storefront pro plugin) that has it built in.

      jamie

  13. thank you!! !

  14. Hi Jamie,

    There is no Template option in Page atttibutes on my site, only Parent Page is visible. Latest Wp and Storefront vefrsion (plus Storefront Pro) installed. What to do?

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Aarne,

      It’s still there – so maybe something is different on your site (maybe another plugin).

      If you need help, feel free to contact support (with login) here pootlepress.com/support-form

      thanks
      jamie

  15. Kevin Avatar

    I was going to use you theme and buy your plugin because I have not been able to get my products sorted in the order I would like on my homepage with Elementor pro. However when I changed to your theme It was much worse.

    Also for me, it’s nothing like what I saw in your video. It wouldn’t even let me edit a page. only the header and footer can be editied which is weird. I cannot even click on add a block or anything. I don’t know if it’s a bug or what.

    Even when I created a new page. I also watched your half hour video.

    My issue is manually sorting the product order on the homepage. Whenever I have set a page to home the sorting order goes back to random and it looks terrible.

    I don’t know how manually sorting one’s woocommerce products on the Home page is such an issue. You would think this would be the #1 thing people want and complain about not having.

    I spent at least 8 hours so far trying to find a way around this. Various plugins etc. Nothing has worked so far.

    1. Jamie Marsland Avatar
      Jamie Marsland

      Hi Kevin,

      Could you email me at jamie@pootlepress.com and I’ll take a look for you.

      jamie

Leave a Reply

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