Building an online store with the Gutenberg Block Editor allows you to build a streamlined, functional shopping experience without dealing with tricky programming or bulky page builder plugins. Instead, a simple block plugin can help you customize your product pages and site styling. Here are three block plugins specially designed for WooCommerce stores.
Why use Gutenberg to build your online store?
- Simplicity – Gutenberg is built into WordPress. This means you don’t have to learn how to use another page builder interface, and you don’t have to worry about compatibility issues with WordPress.
- Site Speed – Because you don’t need to run a page builder plugin, your site will stay lighter and faster.
- SEO – Your site’s speed is more important than ever, since Google will soon include this metric when determining your search engine result page ranking.
Using blocks to build your store
Gutenberg uses a block editor to build your store’s posts and pages, and you can expand your block library and add customization options by installing extra block plugins. Sure, you can use standard WordPress blocks like headings and paragraphs, but you probably also need to display ratings and reviews, lists of products, filtering by category or price, and much more.
A block plugin that specializes in WooCommerce can help you customize your eCommerce store and add important functionality. But which one should you choose? Let’s look at three great options for different store types.
| WooCommerce Core Blocks | ProductX – Gutenberg WooCommerce Blocks | Toolset’s WooCommerce Blocks | |
| Price | Free | Free | Paid |
| Benefit | Getting a basic store set up quickly | Expanding a store’s colors and fonts and adding basic layout alternatives | Creating a fully custom store with an abundance of advanced styling and functionality options |
| Limitation | Limited to default styling and functionality | Focused on styling – doesn’t add much functionality | You build everything from scratch, so it’s not as quick as using default templates and features. |
WooCommerce’s Core Blocks
A shop page built with WooCommerce’s core blocks
Displaying a list of products using WooCommerce’s core blocks
Who should use it? People who need just the basics and want to set up a store fast.
What to install: Core WooCommerce plugin
What it does and how it works:
WooCommerce gives you a ton of functionality in your site’s admin to help you manage your products, inventory, and payments. When it comes to displaying your products on your site’s front-end, however, WooCommerce offers only basic options. If you want to display your products in a grid, and are happy with the standard layouts and styling options, WooCommerce is all you need to get your store up and running quickly.
Its 19 basic blocks cover three main functionalities, and you can display any of this information in just a couple of clicks.
- Display a list of products – these blocks use a grid format for displaying your products according to different criteria (e.g. by category, by attribute, top rated).
- Help customers find your products – this includes a simple keyword search, a list of product categories, and the ability to highlight a specific category.
- Display reviews – either all reviews, by category, or by product.
The downside is the styling options for these blocks are extremely limited. For instance, you can’t customize the fonts, buttons, or the layout of content within the block (aside from turning fields on or off). If you’re not happy with the default or you want to make your store stand out, you might need to extend your block options with a more customizable plugin.
WooCommerce core plugin does not allow you to create custom single-product templates, archives, or a custom shop page.
WooCommerce also offers a separate plugin called WooCommerce Blocks with some extra blocks. This plugin is a way for WooCommerce developers to test ideas and experiment with blocks they might eventually add to the core plugin. It’s great for adding even more blocks to your lineup, but beware that they are not stable versions and may not always work seamlessly.
ProductX – Gutenberg WooCommerce Blocks
A shop page built with ProductX – Gutenberg WooCommerce Blocks
Displaying a list of products using ProductX – Gutenberg WooCommerce Blocks
Who should use it? People who are looking to extend the basic WooCommerce block options with more styling and customization options.
What to install: ProductX – Gutenberg WooCommerce Blocks
What it does and how it works:
If you’re looking for some more control over your styling options, ProductX – Gutenberg WooCommerce Blocks includes:
- More layout options – product carousel, a variety of preset grid layouts, and an advanced post query builder for choosing which products to display.
- Advanced styling controls – choose your colors, margins, fonts, even hover effects.
- 3 different starter design templates – build a functional homepage or landing page quickly.
While this plugin makes it easier to style your site according to your own branding, it remains pretty basic in functionality. This means it’s quick to get started, but some features, like front-end filtering, aren’t particularly powerful.
You also can’t add custom fields and custom information to your lists of products, and it doesn’t let you customize the appearance of single-product pages and product archives.
Toolset
A shop archive page built with Toolset
Displaying a list of products using Toolset’s WooCommerce Blocks
Who should use it? People who want a completely custom site in both styling and functionality. Toolset is also great for people who want to customize only certain aspects of their store, such as a single product page.
What to install: Toolset Types, Toolset Blocks, Toolset WooCommerce Blocks, which are all part of the Toolset package.
What it does and how it works:
Toolset proves that you can build advanced, custom WooCommerce stores without any coding.
It’s a suite of plugins that includes its own set of blocks for WooCommerce, including an Add to Cart button, Product Tabs, and Related Products, but it also includes much more.
With Toolset, you can:
You’ll notice that Toolset is the only paid plugin on our list. That’s because Toolset is an entire suite of plugins designed to not only provide added WooCommerce functionality, but also help you build and customize an entire site.
Here are some other things you can also do with Toolset:
…and all without any programming!
Bonus:
There are three more things that make Toolset stand out amongst other plugins:
- Because Toolset doesn’t rely on any WooCommerce standard templates or functionalities, you can easily create pages to sell other types of products, like digital products, access to webinars, tiers of service packages, and more.
- With Toolset, you can customize your site to make sense for what you’re selling. For instance, if you’re not selling a catalog of items, expedite the checkout process by skipping the cart and going directly to the payment screen.
- Toolset provides complete, free Training Courses about creating advanced custom sites, including WooCommerce stores.
Choosing the right plugins for your WooCommerce shop
WooCommerce core’s included blocks give you a great way to get a store set up quickly with some basic features and styling. If you’re looking for any additional customization options, however, you’ll need to consider adding another block plugin.
ProductX – Gutenberg WooCommerce Blocks gives you some extra styling options, templates, and layouts, but it doesn’t add much in the way of functionality.
If you’re looking for granular control over styling and robust functionality, Toolset gives you the flexibility and features to craft a store that’s uniquely yours.
