Navigating WooCommerce blocks: Your ultimate guide to better ecommerce performance

In this post, we'll explore everything you need to know about WooCommerce blocks. We'll discuss blocks built into WooCommerce core and share the best plugins to extend WooCommerce's block library and add more features to your store.

Want to learn how to use WooCommerce blocks to create a beautiful and feature-rich ecommerce website? This guide has your back.

Here's an overview of what we'll cover:

• A rundown of WooCommerce blocks.
• Popular WooCommerce blocks that ship with the WooCommerce plugin and ideas on how to use them on different pages of your website.
• The types of WooCommerce block plugins.
• How to use WooCommerce block plugins like WowStore, Product Filters, WooCommerce Product Table, and WooCommerce Product Options. We'll also look at others to extend your ecommerce site's block library and add extra features.

Let's begin with a quick rundown of WooCommerce blocks and the top blocks built into WooCommerce core.

What are WooCommerce blocks?

WooCommerce blocks are modular, pre-built elements that let you easily add ecommerce features and content to your WordPress site using the WordPress Gutenberg block editor.

Blocks are super simple and flexible to embed and set up. You can drag and drop elements wherever you like on the page and visually configure their layouts, colors, and other settings to match your specific needs — no messing with code or complex settings.

A bit of a backstory: At first, WooCommerce blocks were introduced via the now defunct Woo Gutenberg Products Blocks plugin in 2018. Blocks were merged into WooCommerce core with version 3.6 released in early 2019. As of this writing, core WooCommerce offers more than 30 blocks!

Here are some of the most popular WooCommerce blocks along with ideas on how to use them on the cornerstone pages of your ecommerce site: the product listing page, product detail pages, and checkout page.

Product listing pages

Product listing pages — such as the Shop, Category, Tag, and other Product Archive pages — display a collection of products and key details like images, prices, and brief descriptions in your WooCommerce store.

Here are examples of popular blocks you can add to your product listing pages:

• All products block: This block displays your entire product catalog in a grid layout. You can use it to create your main shop page showing all available products.
  

  

• Featured product block: This block spotlights a single product with a large image and call-to-action. You can use it to showcase new arrivals or promote bestsellers.
  

  

• Handpicked products block: This block displays a selection of products in a grid layout. You can use it to create curated collections such as staff picks, new launches, or popular items.
  

  

Single product pages

Single product pages or product detail pages present comprehensive information about a specific item, including product images, descriptions, pricing, and variation options such as size or color selections.

Here are examples of popular blocks you can add to your single product pages:

• Reviews by product block: This block shows customer reviews for a particular product to add a bit of social proof and build trust with buyers. Customers can sort to showcase the most helpful or recent reviews first.
  

  

• Image gallery block: This block lets you embed an image gallery wherever you want on the page. You can use it to show multiple product images in a gallery format and give customers a detailed view of your products.
  

  

• Store notices block: This block surfaces notices added by WooCommerce and other extensions in your store. You can use it to share important updates, such as about shipping, promotions, etc. with customers.
  

  

Checkout pages

Although there is a standalone WooCommerce checkout page, the checkout flow typically spans multiple pages, starting from the time customers add products to their shopping carts.

Here are examples of popular blocks you can add to facilitate the WooCommerce checkout flow:

• Mini cart block: This block displays a compact version of the cart with a summary of the cart's contents. When a customer adds a product to their cart, the mini cart updates instantly, showing the items, quantities, and total price. You can use it to enable customers to quickly access their items and proceed to checkout from any page on your site.
  

  

• Cart block: This block displays the full cart contents and order totals so customers can review their cart before beginning to checkout. You can place it on a dedicated cart page so customers can see all the items they have selected, adjust quantities, or remove items if necessary.
  

  

• Checkout block: This block creates a complete checkout form. You can tweak its layout and fields to streamline the purchasing process. Like the cart block, you can place it on a dedicated checkout page so customers can complete the checkout steps.
  

  

A quick note: You can also use block-based themes like Kadence which offer pre-built patterns and templates that allow you to easily customize every aspect of your site directly in the visual editor and without touching any code.

Types of WooCommerce block plugins

Broadly speaking, there are two types of block plugins: block library plugins and block plugins to add extra features to WooCommerce.

• Block library plugins: These are plugins that enable you to add new elements, such as advanced layouts, buttons, galleries, product filters, etc., to your sites using blocks. Block library plugins expand the number of options in WooCommerce's native block library.
• Block plugins to add extra features to WooCommerce: These plugins are used to extend WooCommerce's functionality or add completely new features to your site. They are much more advanced than WooCommerce block library plugins and often pull data dynamically from various sources, as necessary. While they may not offer a block-based visual builder to configure their settings, they enable you to add them to your site using purpose-built blocks.

Below, I'll share the top WooCommerce block plugins in each category.

Plugins that extend WooCommerce blocks library

In this section, I'll share the best block library plugins to broaden the selection of blocks in WooCommerce's native block library.

WowStore

WowStore (formerly called Product X) is an all-in-one toolkit that comes with more than 40 WooCommerce blocks and additional features to help boost your store's revenue, reduce cart abandonment rates, enhance your customers’ buying experience, and more.

Think of it like Elementor but specifically built for WooCommerce.

WowStore includes WooCommerce blocks to add a variety of elements to your website, such as:

• Product filters
• Product lists
• Free shipping progress bar
• Order confirmation
• Thank you order details
• Currency switcher

In addition to WooCommerce blocks, WowStore offers 100+ readymade templates — including for the Home, Shop, Product Archives, Product Search, Cart, etc. — that make designing pages on your online store faster and better.

Kadence

Kadence is a popular software development company that offers various block-based themes, plugins, and extensions. Here are some block-based products they offer that can be useful for your WooCommerce store.

Kadence WooCommerce Blocks

Kadence Blocks is a popular plugin that provides a variety of customizable blocks to extend WordPress' Gutenberg block library. This WooCommerce blocks plugin is a great option to add essential non-transactional elements to your WooCommerce site.

Popular examples of Kadence blocks that can be useful for WooCommerce are:

• Portfolio grid/carousel: To showcase image-heavy posts in a grid or carousel format.
• Advanced slider: To add aesthetically pleasing sliders along with overlays and animation.
• Countdown block: To display a banner with a digital timepiece counting down the time.

Kadence ShopKit

Kadence ShopKit is an extension of Kadence Blocks, specifically designed for WooCommerce stores. It offers a set of modules that integrate seamlessly with the Kadence theme and Gutenberg editor.

Here are popular Kadence ShopKit modules and how they can be used on WooCommerce sites:

• Variation swatches: To showcase product variations in an intuitive manner using elements like radio buttons, color swatches, or image swatches.
• Sizing charts: To present size charts for each product or the entire product category in an easy-to-navigate modular window or tab.
• Product brands: To add a filter widget to enable customers to narrow down their search based on specific brands. Perfect for multi-vendor marketplace sites.

Product Blocks for WooCommerce

The Product Blocks for WooCommerce plugin is a free extension that lets you add blocks to enhance how products are presented in your online store. It offers eight blocks, including:

• Lookbook — Product Reveal
• Lookbook — Shop by Outfit
• Scattered Product List
• Product Categories Grid
• Vertical Product Slider
• Product Carousel

Compared to the other plugins on this list, Product Blocks for WooCommerce offers a relatively small set of blocks. However, considering its offerings are pretty unique and it is plugin 100 free, it might be worth checking it.

Stackable WooCommerce blocks

Stackable is a powerful freemium plugin that offers a wide range of customizable blocks useful for creating engaging product pages and promotional content.

While it isn't ecommerce-specific, it provides blocks that can be useful for WooCommerce stores, including:

• Pricing box block: This block is great for comparing product tiers or subscription plans to clearly display different price points and features.
• Feature grid block: This block is useful for breaking down product specifications or service offerings. You can also use it to compare features across different product models.
• Testimonial block: This block lets you showcase customer reviews prominently, complete with customer photos and star ratings.
• Call-to-action block: This block lets you create eye-catching "Add to Cart" or "Limited Time Offer" sections with custom copy.
• Countdown block: This block lets you add a countdown timer to highlight limited-time offers or upcoming product launches.

In addition to extending your store's block library, Stackable's dynamic content feature pulls in live data from your store, like product information or customer reviews to keep your content fresh and reduce the need for manual updates.

A quick note: Did you know that you can create your own WooCommerce blocks? That's out of the scope of this article, so we won't cover it here but here's a guide with more details if you're interested in this.

Block plugins to add extra features to WooCommerce

In this section, I'll discuss 3 robust plugins: WooCommerce Product Filters, WooCommerce Product Table, and WooCommerce Product Options. These plugins allow you to add new, advanced features to your WooCommerce site and offer purpose-built blocks to add them to your site's front end.

WooCommerce Product Filters

WooCommerce Product Filters is the most powerful product filtering plugin for WooCommerce. It adds product filters that are far superior to the default filter blocks that ship with WooCommerce.

Here are a couple of reasons why adding filters with WooCommerce Product Filters is better than embedding filter blocks from WooCommerce's block library:

Once you set up WooCommerce Product Filters and set up filter combinations (known as filter groups), you can add them to your website's front end using a dedicated product filter block the plugin adds to your site's backend.

A quick note

You can also add filter groups to the front end using shortcodes, and by ticking a box in the plugin's setup wizard.

Here's how the product filter block looks in the WordPress admin dashboard.

And here's how the product filter group looks on the front end of a WordPress site. Note that this will vary based on your theme as the plugin inherits your website's styling settings.

WooCommerce Product Filters uses AJAX technology so it won't slow down site speed. It also has a lot of extra features to make the admin and shopping experience better. Check out the dedicated plugin overview page for more details.

WooCommerce Product Table

WooCommerce Product Table is a robust plugin that lists products in a beautiful and easy-to-navigate quick order form. It is perfect for restaurants, grocers, electronics shops, apparel manufacturers, wholesalers, and other ecommerce stores where customers are used to selecting products and checking out in minutes.

WooCommerce's core block functionality lets you create basic tables to showcase information. However, it lacks the functionality to create order forms that showcase products along with relevant product data (taxonomies, attributes, custom fields, SKUs, images, videos, etc.) and update their contents dynamically.

With WooCommerce Product Table, you can create quick order forms with custom columns and data, quantity selectors, and add-to-cart buttons. Customers can easily choose the items they want, adjust the required quantity, and proceed to checkout in seconds or minutes.

Once you're done configuring the WooCommerce Product Table plugin, add it to your site's front end using the dedicated WooCommerce block. It automatically inherits your theme's style and you can customize how its design looks on the front end. It also works well with shop and product listing pages created using blocks.

Note: WooCommerce Product Table lets you add the quick order form to your site's front end using shortcodes, and by ticking a box in the plugin's setup wizard. You can customize details, including the height of the columns, width, content, etc.

WooCommerce Product Table lets you enable AJAX lazyload to make sure that your site loads quickly. It also has a lot of extra features to make the admin and shopping experience better. Check out the dedicated plugin overview page for more details.

WooCommerce Product Options

WooCommerce Product Options is an advanced product options plugin that enables you to improve how WooCommerce's default variations are presented and offer free and paid add-ons to customers.

This plugin is ideal for Woo stores that sell products with some kind of customizable component, where customers need to personalize their order while shopping on the product detail pages (some may even need to charge extra fees for add-on options). For example,

• Restaurants might want to allow customers to customize pizza components and toppings.
• Apparel shops might want to enable customers to submit custom designs for personalized clothing.
• Electronics stores might want customers to choose gadgets in their desired models and configurations.

Although WooCommerce Product Options doesn't provide extra blocks, it works seamlessly on product pages created using blocks and the extra product options appear wherever you place the add to cart button.

Here's a product detail page with custom add-ons:

Check out WooCommerce Product Options' dedicated plugin overview page for more details.

Use WooCommerce blocks to supercharge your store!

Blocks expand the number of available options when designing custom WordPress ecommerce websites. They allow site admins to enlarge the scope of features and add or configure them via an easy-to-use visual builder interface.

In this post, we've looked at various methods to add WooCommerce blocks to your store. To recap, you can:

• Create custom blocks.
• Extend WooCommerce's default block library with plugins like WowStore, Kadence Blocks, Kadence ShopKit, Product Blocks for WooCommerce, and Stackable.
• Add extra useful features with powerful plugins like WooCommerce Product Filters, WooCommerce Product Table, and WooCommerce Product Options, that add robust capabilities not built into your WooCommerce shop.

Want more plugins to supercharge your WooCommerce store, improve customers' experience, and boost revenue? Check out Barn2's plugins catalog.

Your purchases are backed by a 30-day no-questions-asked money-back guarantee.