How to customize the WooCommerce Shop page [2019]

customize woocommerce shop page

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

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

The default WooCommerce Shop Page is dynamically built and pre-set and normally you don’t have a lot of 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 a little tweak that i’ll explain below. So read on :)

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.

The page below was customized using the following WordPress plugins

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.

There’s just 4 simple steps

  1. Create a brand new page and customize the WooCommerce Shop page design – see video tutorial below
  2. Don’t set this page to be your new WooCommerce Shop – leave the default WooCommerce shop page
  3. Use this code snippet to change the ‘Return to Shop’ button link (with thanks to Nicola Mustone) Click on the link to get the code https://gist.github.com/jamiemarsland/5ee8f104bc6b19ca8e14d1414549c508. Add this code to your functions.php file located in wp-content/themes/your-theme-name/: or better still use a plugin like this https://github.com/woocommerce/theme-customisations to add your code into. Here’s a video that shows you how to add code to your functions.php file. 
  4. Set your new shop page to be your shop page in 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 [2019] 1

15 thoughts on “How to customize the WooCommerce Shop page [2019]”

  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

Leave a Comment

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