How to customize the WooCommerce Shop page [2020]

customize woocommerce shop page

‘Step by step’ instructions on how to customize the WooCommerce Shop Page

Updated: January 6th, 2020

Here’s a really simple way that you can customize the WooCommerce shop page.

Quick links: The WordPress plugin you’ll need | Instructions | Video tutorial | Gallery

The default WooCommerce Shop Page is dynamically built and pre-set and normally you don’t have any control in how it is designed. The WooCommerce Shop Page is one of the most important pages on your site, so the more control over the layout you have, the better.

If you follow my tutorial below you will have 100% control over the design of your WooCommerce Shop page, the products that you show, and the sections contained within it.

The good news is that you won’t need a page builder so you site will load really fast – you just need to use the new WordPress Block editor (Gutenberg) and our Storefront Blocks plugin. So read on :)

The plugins you’ll need to customize the WooCommerce Shop Page

The page below was customized using the following WordPress plugins – both these plugins work with the new Gutenberg Block Editor.

  • Storefront Blocks (available as a free trial – click here to read more)
    • Storefront Blocks lets you override the default WooCommerce Shop page design and layout without requiring any code. It also contains 8 premium WooCommerce Blocks, including a Product Table Block, a Square Grid Block, a Masonry Product Block, a Product Slider Block, a Product Carousel Block, and a Product Category Block.
  • WooCommerce Blocks (now included with WooCommerce)
    • WooCommerce Blocks allow you to select and display products across your site. It lets you show products by featured, best sellers, hand-picked, on-sale, and by category and tag. The latest version of WooCommerce Blocks has added pagination – great for stores with lots of products.

Customized WooCommerce Shop Page Example

Below is an example WooCommerce Shop Page that has been customized using this technique. I’ve annotated it to show you what WordPress Blocks were used to create it.

customize woocommerce shop page

The good news is that with the new WordPress Block editor it is very easy to customise your WooCommerce Shop Page anyway you like. Your page can look completely different to the one above.

Just follow the steps below to make a much better looking WooCommerce Shop page and increase your sales.

The 4 simple steps to customize your WooCommerce shop

Important note!
For this to work you will need the Storefront Blocks plugin active (free trial available here) as this lets you override the WooCommerce default shop page design with your own layout. If the Storefront Blocks plugin is not active then the default WooCommerce shop page layout will show.

  1. Create a brand new page (this is going to be your new WooCommerce shop page). You can call this page whatever your like e.g Store
  2. Customize the design and layout or your new Store page using a combination of Storefront Blocks, WooCommerce blocks or any third party WordPress Blocks.
  3. Set this page to be your new WooCommerce Shop page in WooCommerce / Settings / Products
  4. Add this page to your menu

Video tutorial – how to customize the WooCommerce shop page

Here’s the finished customized WooCommerce Shop Page

The animated gif below shows you the finished customized WooCommerce Shop page

How to customize the WooCommerce Shop page [2020] 1

17 thoughts on “How to customize the WooCommerce Shop page [2020]”

  1. Hi there, I love this page builder, and the tutorial is very well done – I just have one problem, I cannot find the woocommerce button in the sidebar for me to add the products in?? Can you help me with this – thanks!

  2. There is something more straightforward than creating a new page and adding a filter to change the shop page link..

    You can override the woocommerce_content function and add a condition if it’s the shop then display the post_content (which will be your gutenberg page) instead of displaying the product loop

  3. Hi Jamie, This looks exactly what I’ve been looking for to drastically improve Woocommerce! I’m little confused though, could you kindly tell me how Storefront Plugin blends with Woocommerce, like deep into the mechanics, ie, CHECKOUT PAGE, MY ACCOUNT, DOWNLOADS etc……. I imagine we still use this as the ‘Operation Hub’ and StoreFront Plugin, is for fantastic, fluid design of SHOP PAGE & PRODUCTS only etc…… ?

    Thanks so much, Au

    1. Jamie Marsland

      Hi Au,

      Everything else stays the same :) This way is very lightweight and doesn’t effect anything else.

      make sense?


Leave a Comment

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

Scroll to Top