What Are WooCommerce Blocks? How to Use Them Effectively

There are many components that make up a successful eCommerce store, from product catalogs and customer reviews to user-friendly search and filtering functions. While WooCommerce blocks enable you to add all of these features (and more), putting those elements together can seem daunting.

Fortunately, WooCommerce blocks are designed to help WordPress users create online stores with ease. Moreover, they enable you to promote your products more effectively and drive more sales, all without using WooCommerce shortcodes like you’d need to in the past.

In this post, we’ll take a closer look at WooCommerce blocks and how to access them in WordPress. We’ll then examine six blocks you can add to your store to increase your conversion rate. Let’s get started!

What are WooCommerce blocks? A brief introduction

WooCommerce is one of the most popular eCommerce tools for WordPress. This free, open-source platform enables you to build an online store without investing a lot of time or money into it.

Additionally, WooCommerce comes with a broad range of blocks that you can access in the native WordPress Block Editor (AKA Gutenberg). With these blocks, you can list some or all of your products, display product filters, add a product search box, and more.

What’s more, these blocks replace many of the WooCommerce shortcodes that you had to use in the past, which gives you a simpler, more visual experience when working in the editor.

You can use these WooCommerce blocks the same way you would any other block.

Open the page or post you want to work on, click on the plus (+) sign, and search for your desired block:

You can also view a full list of available WooCommerce blocks by clicking on the plus (+) button in the top-left corner of your screen. Under the Blocks tab, scroll down to the WooCommerce section:

Note that, in order to access WooCommerce blocks, you’ll first need to install and activate WooCommerce on your site. Also, if you’re still using the Classic Editor, you’ll need to switch to the Block Editor instead.

Best WooCommerce blocks (and how to use them)

Once you’ve installed WooCommerce and uploaded your products, you can start adding new features and functions to your store. Let’s explore six useful WooCommerce blocks, and how to use them effectively on your WordPress site.

1. The All Products block
2. The Top Rated Products block
3. The Filter Products by Price block
4. The Product Search block
5. The All Reviews block
6. The Featured Product block

1. The All Products block

The All Products block is one of the most essential elements for any store. It lets you display all of your products in a neat grid:

By default, the block displays the name, price, and star rating for each product, as well as a call to action (CTA) button. It also comes with pagination and sorting options, making it easier for users to browse through your product catalog.

As with most WooCommerce blocks, you can customize the All Products feature to suit your needs. If you click on the block, you’ll get a selection of settings in the panel on the right-hand side:

There, you can edit the layout of your grid. For example, you can change the number of rows and columns per page. You also have the option to hide the sorting menu or choose another default option for ordering products.

Furthermore, you can edit the items within the grid. To do this, select the block and click on the pencil icon in the toolbar:

Within the preview, you can edit individual elements such as the image, product name, and CTA button:

You can rearrange these items by using the up and down arrows in their individual toolbars. You can also remove elements, or add other product blocks, such as Product Summary or Product Rating. What’s more, these changes will be applied to every product in your grid, so you don’t have to edit each one individually.

We recommend that you keep product details to a minimum, to avoid overwhelming shoppers with too much information. On the same note, you might want to display only a few items per page.

It’s also best to include an Add to Cart button. This way, users who are interested in a particular product can easily add it to their orders without having to leave the page.

2. The Top Rated Products block

Receiving positive reviews from shoppers can be highly rewarding. Even better, you can leverage those ratings to increase your sales.

The Top Rated Products block lets you showcase the products with the highest number of positive reviews:

Ratings play a vital role in your store’s success. They serve as proof to first-time visitors that your products are of high quality, which can help you drive more conversions.

Therefore, we recommend that you use the Top Rated Products block in a prominent place on your website. For example, you might want to add it to your home page or the sidebar of your product pages.

When it comes to customizing the Top Rated Products block, you have several options. For example, you can adjust the number of products you want to display:

You can also hide particular details about the products, such as their prices. Additionally, you can choose to only display the top-rated items in a particular category, such as clothing.

If you don’t have a lot of reviews to showcase just yet, you may want to use the Best Selling Products block instead. This displays the most popular items on your site according to the number of sales made.

Another similar feature is the Newest Products block. As the name suggests, this lets you promote your most recent additions.

3. The Filter Products by Price block

Filtering functionality makes it easier for users to find what they’re looking for. This can be particularly useful when a shopper has a set budget.

The Filter Products by Price block lets users define a minimum and maximum price using a simple slider:

This block works in conjunction with the All Products block that we featured earlier. Once a user sets a specific price range, WooCommerce will automatically update the product list to only display the items that fall into that budget:

The Filter Products by Price block is straightforward to use. However, you can make things even easier for your users by letting them enter specific amounts. To do this, select the block and navigate to the settings panel. Under Price Range, select the Editable option:

Along with filtering products by price, you may also want to enable shoppers to search for items according to product attributes like size and color. To do this, you can use the Filter Products by Attribute block along with the All Products block:

Another handy feature is the Active Filters block. When you add this to your page, users will be able to see a list of their current filters.

4. The Product Search block

One powerful way to improve your site’s user experience (UX) is by adding search functionality. This will let users quickly search for any specific items they have in mind, rather than having to browse through your catalog until they find what they’re looking for.

Fortunately, WooCommerce offers a Product Search block:

You can place the search bar anywhere you want on your site. However, we recommend that you place it right above your product grids, where users can easily see it: 

The Product Search block doesn’t offer many customization options. However, you do have the option to hide the search field label, so that only the search bar is visible.

5. The All Reviews block

As we mentioned earlier, displaying reviews can encourage first-time visitors to try your products. In fact, one recent study showed that nearly all shoppers consult customer reviews before making a purchase [1].

As the name suggests, the All Reviews block lets you showcase all your customer feedback in one place:

You also get some control over the layout and content of your reviews. For example, you can hide certain information, such as the reviewers’ names and review data.

You can also replace reviewer photos with product images, and select the number of reviews you want to display at a time. Meanwhile, users will be able to order reviews by date posted, highest rating, and lowest rating. 

There are several ways you can display your reviews. For example, you can place them on your home page to increase their visibility or add them again on your About page.

You may also want to combine the All Reviews block with two other related features: Reviews by Product and Reviews by Category. These blocks let you display customer ratings and reviews for particular items and categories.

6. The Featured Product block

If you want to generate interest in a particular item, the Featured Product block can be very effective. You can highlight any product you want, on any page or post on your site.

Moreover, you can create multiple Featured Product blocks for different items. When you add this block to your page, you’ll be asked to select a product:

You can then customize the layout of your featured product:

For example, you can hide the product description and price, and choose a different overlay color. There’s also a focal point picker, which lets you shift the position of the main object in your image.

In addition, you can edit the CTA button within the block. All you have to do is click on it, and you’ll get a selection of options. For instance, you can update the link, and customize the color and typography of the button:

Whatever your preferences might be, it’s important to ensure that essential elements such as the product name and CTA are clearly visible. You’ll also want to ensure that the button links to the right page.

For increased visibility, we recommend showcasing featured products on your home page or a dedicated shop page. However, you could also use this block in blog posts to draw attention to particular products. 

You might also want to check out the Featured Category block. This feature can be very useful if you’re trying to increase sales in particular product categories.

Get started with WooCommerce blocks today

In this post, we looked at some of the most essential WooCommerce blocks. For example, the All Products block lets you display your entire catalog of products in a professional grid. Meanwhile, features such as Top Rated Products and All Reviews can help you drive more sales.

Do you have any questions about using WooCommerce blocks? Let us know in the comments section below!