A Comprehensive Guide to WooCommerce Blocks in 2024

WooCommerce Blocks are a core feature of WooCommerce in WordPress, providing a powerful toolkit for eCommerce website owners. If you’re looking to improve the way you showcase your products and manage your online store, you’ve come to the right place. In this comprehensive guide, we’ll delve deep into WooCommerce Blocks, exploring their functionality and how to leverage them effectively for your WooCommerce site.

Set up your site for free with our WordPress Theme

No Risk get started building your WooCommerce store for free.

Try Dynamic shopping

Cyrus Shahbazi

November 14, 2023

Introduction to WooCommerce Blocks

WooCommerce is renowned as one of the top WordPress plugins for eCommerce websites, and with the integration of WooCommerce Blocks, building a WooCommerce site in WordPress has become more accessible than ever before. When you install WooCommerce, you gain access to a collection of 20 essential blocks. These blocks offer a wide array of options for showcasing your products, providing an immersive shopping experience for your customers.

But that’s not all. The power of WooCommerce Blocks extends beyond the core WooCommerce installation. There is a WooCommerce Blocks plugin that introduces even more blocks and features. This plugin acts as a testing ground for new additions, which, once proven stable, are merged into the WooCommerce core. In the sections that follow, we will take a closer look at each of these blocks and explore how you can make the most of them.

WooCommerce Blocks in the WooCommerce Core

The Active Product Filters Block for WooCommerce allows you to display filters for the currently active product. You can present them as a list or as chips, which are similar to buttons. Furthermore, you have the flexibility to choose the heading level. This block seamlessly integrates with other WooCommerce blocks, such as All Products and Filters WooCommerce blocks.

All Products Block

The All Products Block for WooCommerce is a versatile tool that displays all the products in your store. It provides options for sorting and pagination, allowing customers to explore your offerings conveniently. You can align it with the last block and include a sorting dropdown, enhancing the user experience.

Learn how to: Mastering the All Products WooCommerce Block: A Comprehensive Guide

All Reviews Block

The All Reviews Block is designed to showcase a comprehensive list of all the product reviews available on your site. It provides valuable information such as reviewer thumbnails, star ratings, and the content of the reviews. Customers can sort reviews and customize the display, including the type of image and list settings.

Learn how to: Maximizing the Potential of the All Reviews WooCommerce Block: A Comprehensive Guide

Best Selling Products Block

The Best Selling Products Block for WooCommerce empowers you to highlight your top-selling products. This block presents a grid layout featuring your best-selling items of all time. You have the freedom to include various content elements such as titles, prices, ratings, and add-to-cart buttons. Additionally, you can configure filter options to refine the product selection.

How to: Leveraging the Power of the Best Selling Products WooCommerce Block

Featured Category Block

The Featured Category Block is ideal for promoting specific categories of products as featured selections on your site. You can choose a category from the list to highlight, though it’s limited to one category per block.

How to: Mastering the Art of the Featured Category WooCommerce Block

Filter Products by Price Block

The Filter Products by Price Block introduces a versatile price-filtering mechanism for your online store. It enables customers to choose price ranges, presented as editable buttons or text. You can even add buttons for user-friendly navigation and specify the heading level.

How to use: Filter Products by Price WooCommerce Block

Set up your site for free with are WordPress Theme

No Risk to get started building your Woocommerce store for free.

Get Otterwp+

Filter Products by Stock Block

The Filter Products by Stock Block simplifies the shopping experience by allowing customers to filter products based on their availability status, including “in stock,” “out of stock,” and “on backorder.” This block works seamlessly with other WooCommerce blocks, such as the All Products block, offering enhanced usability.

How to: Optimize Your WooCommerce Store Using the Filter Products by Stock WooCommerce Block

Hand-Picked Products Block

The Hand-Picked Products Block lets you curate specific products that you wish to display. You can select as many products as you like and choose the content elements that will be showcased, including titles, prices, ratings, and add-to-cart buttons. Additionally, this block offers options for button alignment and order and filter settings.

How to: Leverage the Hand-Picked Products WooCommerce Block

Newest Products Block

The Newest Products Block is a valuable tool for displaying your latest products in an organized grid layout. It provides customizable content elements, including titles, prices, ratings, and add-to-cart buttons. As with other blocks, you can configure filter options to meet your specific needs.

how To Use: Newest Products Woocommerce Blocks

On Sale Products Block

The On Sale Products Block is designed to promote products currently on sale. It presents a grid layout featuring title, price, rating, and add-to-cart button options. This block also includes settings for order and filter configurations.

How to: Utilizing the On Sale Products WooCommerce Block to Boost Your Sales

adding product by categories block to a website

The Product Categories List Block offers an organized presentation of your product categories. You can choose to display them as a list in an outline or as a dropdown menu. The block provides flexibility for displaying product counts, images, hierarchy, and empty categories.

Product Search Block

The Product Search Block is a unique addition to WooCommerce Blocks, as it adds a search box to your page. This search box allows customers to enter keywords and search through your product catalog. You have the option to show or hide the field label for added customization.

Learn to: use Product Search WooCommerce Block

Products by Attribute Block

The Products by Attribute Block is a versatile tool that displays your products based on attributes that you select from a list. These attributes can include size, color, and more. You can align this block with other blocks, choose content elements to display, and set filter and order options to enhance product organization.

learn to: use Products by Attributes

Products by Category Block

adding woocommerce featured Category block

The Products by Category Block enables you to create a grid of products from specific categories of your choice. You can select multiple categories and customize content elements, including titles, prices, ratings, and add-to-cart buttons. This block offers order options for precise product arrangement.

How To: Revolutionize Your WooCommerce Store with Products by Category

Products by Block Tag

selecting products woocommerce blocks to a website

The Products by Block Tag Block provides a grid layout of products associated with the tags you select from the list. You have the flexibility to choose from a variety of content elements, including titles, prices, ratings, and add-to-cart buttons. This block also offers order options for fine-tuning product organization.

How to: Maximizing SEO Potential with the Products by Tag WooCommerce Block

Reviews by Product Block

The Reviews by Product Block allows you to display all the reviews for a specific product of your choice. By selecting a product from your list, you can provide customers with valuable insights into the user experience with that product.

Learn how: to use The Reviews By Product Block

Reviews by Category Block

The Reviews by Category Block organizes product reviews based on the categories you select from the list. You can choose the content elements you wish to display, such as titles, prices, ratings, and add-to-cart buttons.

How to use: Reviews by Category WooCommerce Block

Top Rated Products Block

The Top Rated Products Block showcases the highest-rated products in a grid layout. You can customize the display by selecting content elements like titles, prices, ratings, and add-to-cart buttons. This block also offers filter categories to help customers find the best products quickly.

How to use: Top Rated Woocommerce Block

Cart

The Cart block allows you to display the shopping cart on your page. You can configure various settings, including the inclusion of a shipping rates calculator and the choice of the checkout button link. Additionally, you can enable dark mode and set the page as the default shopping cart in the WooCommerce settings.

Checkout

The Checkout block provides a seamless checkout process for your customers, making it convenient to complete their purchases. This block offers options for customization, including dark mode, and consists of multiple elements that can be customized independently to suit your store’s needs.

Learn: What is Full Site Editing in WordPress? also: Setting up Woocommerce with full site editing for Beginners in 2023

New Features to Current WooCommerce Blocks

In addition to the new blocks introduced by the WooCommerce Blocks plugin, there are notable improvements to existing blocks:

All Reviews: This block now features typography and color settings. You can choose from seven preset font sizes or customize the size to your preference. It also provides ten preset color options and the ability to select custom colors.
Reviews by Product: Similar to the All Reviews block, the Reviews by Product block now includes typography and color settings. This block displays in full-width mode, removing block options and content elements.
Reviews by Category: The Reviews by Category block has also received typography and color settings, along with a full-width display option. Like the Reviews by Product block, it removes block options and content elements, providing a cleaner presentation.

Ending Thoughts on WooCommerce Blocks

In conclusion, WooCommerce Blocks offer a wealth of possibilities for enhancing your eCommerce website. These blocks provide a user-friendly and visually engaging way to showcase your products and create an exceptional shopping experience for your customers. With a range of options to choose from, you can customize your store to match your brand’s identity and cater to your audience’s preferences.

As you explore the world of WooCommerce Blocks, consider the seamless integration with Otterwp+, a highly customizable WordPress theme. Otterwp offers an enhanced design experience, allowing you to tailor your store to your exact specifications, and it’s an excellent complement to the functionality provided by WooCommerce Blocks.

If you’re already using WooCommerce, it’s time to leverage the power of WooCommerce Blocks to elevate your online store. And if you’re in search of more design flexibility and styling options, Otterwp+ is a fantastic choice. We encourage you to experiment with these powerful tools and unlock their full potential for your eCommerce journey.