storefront blocks for woocommerce

A WordPress plugin including 8 premium WooCommerce blocks that make it quick and easy to create awesome WooCommerce pages.

Quick links: How it works | The Blocks | Testimonials | Faq | Examples | Gallery | Free trial

The 3 main benefits of using the Storefront Blocks plugin

  1. Easily override the default WooCommerce Shop Page layout with your own design (check out this tutorial)
  2. Create beautiful showcases of your products on any page or post on your website
  3. It works with the new Gutenberg Block editor so set up is incredibly quick and easy

Try it risk free with a 14 day trial – cancel at any time

Prices – $49 for 1 site, $75 for 5 sites, $99 for 25 sites, and $199 for an unlimited license

License

As seen on

wp tavern storefront blocks review

The ‘Storefront Blocks’ plugin makes it easy for non-technical store owners to showcase their products in a compelling way and enables them to create and customize product layouts. Storefront Blocks is an impressive example of how Gutenberg-powered products can replace clunky shortcodes with a more user-friendly interface for building store pages.
Click here to read the full article

What people are saying about Storefront Blocks

Very Good

Makes the website look more bespoke and professional.

storefront-blocks 1
Kieran Mcninch

Easier control

within minutes I had easily made improvements to the look of my web shop, well done Pootlepress

storefront-blocks 2
Eric Dowsett

Excellent as always

Works beautifully. Minor hiccups were addressed. Beautiful images and excellent variety of layouts. Hoping for additional enhancements, but very satisfied with this new product.

storefront-blocks 1
Carol Ann Johnson

The blocks included with Storefront Blocks

The WooCommerce Blocks – Scroll down or click on the links below to see more details on each block
Product Table Block | Square Grid Block | Masonry Block | Slider block | Category Masonry Block | Single Product Block | Carousel block | Standard Woo Block

Top tip: Storefront Blocks can be used anywhere on your website – e.g home page | shop page | category pages | blog posts

Here’s what each block does :)


The Product Table Block

The Product Table block is the easiest way to show Product Tables in WooCommerce.

It makes it easy to showcase your WooCommerce Products in a table or list. Your customers can select multiple products on the one page and then add them to their shopping cart, in one click.

The Product Table for WooCommerce also has the option to replace the add to cart button with a ‘request for quote button’. The request a quote functionality will send the store owner an email with the details on the product or products selected.

The Product Table block for WooCommerce comes with a whole host of easy to use options including, circle product images, show or hide product filter, product rating, product description, product price, add to cart, stock status.

You can choose to show individual products in the Product Table Block or filter by Product Category.

woocommerce product table block
The Product Table Block
storefront-blocks 4
Options included in the WooCommerce Product Table Block

The Square Grid Block

The Square Product Grid block lays out your products in a beautiful square grid. You can choose which products to show or filter by category.

The Square Grid Block comes with a whole host of customization options, including, show/hide price, fullwidth layout, change number of rows and columns, change the grid gap, change font family, color and size.

the product square grid block
The Square Grid Block
square-product-grid
Changing the gap in the Square Grid Block

The Masonry Product block

The Masonry Product Block automatically creates a masonry layout for products. You can select individual products to show or choose to show by category.

The Masonry Product block comes with a whole host of customization options, including, show/hide price, fullwidth layout, change number of rows and columns, change the grid gap, change font family, color and size.

the masonry product grid block
The Masonry Grid Block
masonry-product-grid
Choosing products for the Masonry Product Block

The Slider block

The Product Slider Block lets you insert a beautiful slider into your site.

You can choose which products to show, and it comes with lots of customization options, including font family, alignment, size and colour. You can also change the height of the product slider and set it to be full width.

product slider block for woocommerce
The Product Slider Block for WooCommerce
product-slider block
Customizing the height of the Product Slider Block

The Masonry Category Block

The Category Block creates a beautiful layout automatically for you to show your Categories.

The Cateogry block comes with a whole host of customization options, including, show/hide price, full-width layout, change number of rows and columns, change the grid gap, change font family, color and size.

category block for woocommerce
The Category Masonry Block for WooCommerce

The Single Product Block

The Single Product Block is one of the most powerful blocks. It lets you add a single product into a page and then customize almost every aspect of the layout.

Because it’s a block you can add multiple single product blocks into the same page. It’s quite difficult to show all it’s features with a picture, so here’s a video walkthrough.


The Carousel Block lets you create a moving carousel of your products. The Carousel Block comes with a whole host of customization options.

storefront-blocks 5
The Carousel Block for WooCommerce

The standard Woo Block

This block is like the normal WooCommerce block, however it has extra customization options, including the ability to hide the WooCommerce ‘add to basket’ button, hide the price, and hide the product title. You can also set the block to be full width, like shown in the example below.

the standard block for woocommerce
Setting the Standard Block to be full width

Look how easy it is to add a Storefront Block

how to add a block

Easy customization

easy customization storefront blocks

Frequently asked questions

  • Does Storefront blocks work on all themes?
    Yes
  • Do i need the new WordPress editor (Gutenberg) to use Storefront blocks?
    Yes, Storefront blocks uses the new WordPress Block editor (Gutenberg)
  • Does Storefront blocks work with your Storefront Pro plugin?
    Yes absolutely. Storefront blocks and Storefront Pro work great together. We have also added an extra option in Storefront Pro so that your first row of blocks can sit flush under the navigation if you require it.
  • Can I use Storefront blocks on a page that I’ve built with Pootle Pagebuilder?
    At the moment this isn’t possible. The new WordPress editor (Gutenberg) is very new and we are waiting for it to be merged fully into the core WordPress before we look at integrating blocks into Pagebuilder.
  • Can I cancel my payment at any time?
    Yes you can. The licence gives you access to one years support and updates. You can cancel and Storefront blocks will still be active, however you won’t get updates and support in year two.
  • What is your refund policy?
    We offer a 14 day refund if you have a technical issue that we cannot resolve. Please send our terms and conditions for more details.

Examples of Storefront Blocks in action

Create an awesome WooCommerce shop page

Your WooCommerce shop page is one of your most important pages.

With Storefront Blocks you can easily create a great looking Shop page, and you can layout the page anyway you like.

Storefront Blocks makes it easy to create an awesome shop page.

In the picture on the right you can see a shop page that has been built with a selection of Storefront Blocks.

These are the blocks that have been used

  • Product Slider Blocks
  • Category Masonry Block
  • Standard Product Grid Block
  • Product Square Grid Block
  • Single Product Block

Each Storefront Block comes with it’s own set of customization options including

  • Change font size
  • Change font family
  • Change font color
  • Change product label position
  • Change grid spacing
  • Change button color
storefront-blocks 6

Make your WooCommerce Home Page stand out

First impressions count.

Storefront Blocks makes it easy to showcase your products in a beautiful and professional way on your website home page.

In the picture on the right you can see how we’ve built an awesome looking home page.

To build the page we’ve used the following Storefront Blocks

  • Product slider block
  • Category masonry block
  • Product masonry block
  • Product square grid block
  • Standard product block
storefront-blocks 7

Create stunning WooCommerce Category Pages

Storefront Blocks makes it easy to create awesome looking WooCommerce Category Pages

In the picture on the right you can see an example of a WooCommerce Category page built using Storefront Blocks.

edit category pages woocommerce

Up sell products in your Blog Posts

One of the great things about Storefront Blocks is that they can be used on any page or any post.

In the picture on the right you can see how we’ve used a blog post to insert some Storefront Blocks to showcase relevant products within the context of the post.

This is a big opportunity for you to increase sales through your content marketing.

add woocommerce products to blog

Walkthrough video

Gallery

Here’s a selection of the blocks included with Storefront blocks.

Scroll to Top