How to customize the WooCommerce Shop page using Gutenberg the new WordPress Block Editor and the Storefront Blocks plugin.Storefront Blocks free 14 day trial – https://checkout.freemius.com/mode/dialog/plugin/2380/plan/4051/?trial=paid Storefront Block live examples – https://storefrontblocks.com/Please note that you will our premium WordPress plugin Storefront Blocks for this tutorial https://www.pootlepress.com/storefront-blocks/Timeline0:00 – Intro 00:05 – Example Customize WooCommerce Shop Page 01:13 – How to Build a Customized Woocommerce Shop Page 01:23 – The WordPress Blocks 02:49 – Adding a Category Section 02:58 – WooCommerce BlocksThe 4 simple steps to customize your WooCommerce shopImportant note! For this to work you will need the Storefront Blocks plugin active (https://www.pootlepress.com/storefront-blocks/) as this lets you override the WooCommerce default shop page design with your own layout. Please note that Storefront Blocks is a commercial plugin. It’s available for a free 14 day trial so you can try it out to see if it works for you.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 Add this page to your menuHere’s a link to the full article that explains ‘step by step’ how to customize your WooCommerce Shop Page https://www.pootlepress.com/2019/03/customize-woocommerce-shop-page-no-coding-required/Here’s a list of the plugins that I used to customize the WooCommerce Shop pageStorefront Blocks (available as a free trial) – https://www.pootlepress.com/storefront-blocks/ 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) – https://wordpress.org/plugins/woo-gutenberg-products-block/ 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.
27 thoughts on “How to customize the WooCommerce Shop Page using the Storefront Blocks plugin”
IS the page going to be very slow if I add more than 600 products on my woocommerce eshop ? How can make my page fast to open ?
Hi, you can decide how many to show on each page – also you can use infinite scroll that will only load a specific number of products and then show more as the user scrolls down the shop page
All I want to do is change where the welcome is on the home page – nothing seems to let me do it!
If you want me to take a look feel free to email me at [email protected] :)
thank you youtube for adding 2x playback speed.. and dude what the actual fuck ? get off youtube you are wasting googles bandwidth
Cant understand a word you’re saying. Nothing but mumbling.
wasted of time, I agree, you have to have Storefront theme installed to be able to do something. thumbs down
@Jamie Marsland, this is the error message that I received after install, “Sorry, you can’t activate this plugin unless you have installed the Storefront theme.”
On the other hand, this is a paid plugin, better buy Elementor Pro and it’s much more convenient. I also supposed you will present something free.
@Soothing and Relaxing Music that sounds like you have installed a different plugins ..not storefront blocks
@Jamie Marsland at this point you right. I figured out that I installed Storefront blog, even I typed blocks, it appeared “Storefront blog” with a description of changing the content of archive pages, and I knew the shop page is based on the archive page. But still, this wouldn’t happen if in the video you could go to “plugin” – “add new” and then type the name of the plugin and you could mention that you installed previously. Point. Anyway for your time to reply to me you got now thumb up. Thanks.
@Soothing and Relaxing Music tks very much :) Storefront Blocks is a commercial plugin so can’t be hosted on wordpress.org . It’s here https://www.pootlepress.com/storefront-blocks/
Hi I have bought this plugin but no blocks will display on the front end Shop Page. ☹️ Do I have to declare support in function.php or add any CSS?
Hi Michael – could you contact me at [email protected] – there is a new setting now if you go to dashboard / woocommmerce / settings where you can set the shop page. But email me if you get stuck.
@Jamie Marsland thanks a million James.
@Michael Byrne just replied :)
How to display each product available size in the shop page? Like price displayed with each product?
This plugin will help you do that https://iconicwp.com/blog/show-variations-shop-page-woocommerce/
Is this page about chaning the default woocommerce shop page?
Yes that’s correct :)
After installing the plugin, it says I am required to install Caxton. There’s no mention of this anywhere else, just checking this is correct?
Hi Natalie, yes that’s correct
Not sure why there are so many dislikes here, but this was very helpful! Thanks!
Thank you :)
Thank you for your videos.
Your block Editor looks very useful
I am using Woo Commerce and Avada to build a store for watercolours.
Learning Woo, Avada and WP has been a bit of a mission as I intend to spend more time painting than site dev.
Here are the questions I have if you would like to consider how you would address them:
First – I sell an original and a high quality print (limited edition) for each – the standard layout, showing the name and two prices is confusing to people who look on my site – so of course they leave.
Is it possible to annotate each price?
Original: R8 000.00
Giclee print: R3 800.00
I would like to have multiple gallery (shop) pages
I would like to have a shop page for my best work (top end gallery quality) and another page for my “one-painting-a-day” work.
I would also like to have grid page showing particular topics (I have 300 portrait paintings that may be fun to scroll through to purchase)
I spent time last year understanding enough about woo and avada to have the shop relatively acceptable and am now looking at how to take it up just one notch (or 4)
All the best and thank you for your videos (again)
Hi Everyone, there’s now a new way to customize the WooCommerce Shop Page using Gutenberg Full Site Editing 🔥 I made a walkthrough video here https://youtu.be/V0uWuXXOjr4