What are WooCommerce Blocks? How to use them effectively in 2023

There are many components that make up a successful ecommerce store, from product catalogs and customer reviews to easy-to-use search and filtering capabilities. While WooCommerce Blocks allow you to add all of these features (and more), putting these elements together can seem daunting.

Luckily, WooCommerce Blocks are designed to help WordPress users create online stores with ease. Additionally, they allow you to promote your products more effectively and get more sales without using WooCommerce shortcodes like you had to do in the past.

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

What are WooCommerce Blocks? A brief introduction

WooCommerce is one of the most popular ecommerce tools for WordPress. With this free, open-source platform, you can build an online store without investing a lot of time or money.

Additionally, WooCommerce offers a wide 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, show product filters, add a product search box, and more.

Additionally, these blocks replace many of the WooCommerce shortcodes you had to use in the past, giving you an easier and more visual experience while working in the editor.

You can use these WooCommerce blocks just like any other block.

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

You can also see a full list of available WooCommerce blocks by clicking the plus (+) button in the top-left corner of your screen. Under the blocks Scroll down to the tab WooCommerce Section:

Note that to access WooCommerce Blocks, you must first install and activate WooCommerce on your website. If you’re still using the classic editor, you’ll need to switch to the block editor instead.

The Best WooCommerce Blocks (And How To Use Them)

Once you’ve installed WooCommerce and uploaded your products, you can start adding new features and functionality 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 important elements for any business. This allows you to view all 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 has pagination and sorting options that make it easier for users to browse your product catalog.

As with most WooCommerce blocks, you can customize these all products function that suits your needs. When you click on the block, the panel on the right gives you a choice of settings:

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.

In addition, you can edit the elements within the grid. To do this, select the block and click the pencil icon in the toolbar:

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

You can rearrange these items by using the up and down arrows on their respective toolbars. You can also remove elements or add other product blocks, e.g Product overview or product rating. Additionally, these changes are applied to every product in your grid, so you don’t have to edit each one individually.

We recommend keeping product details to a minimum to avoid overwhelming buyers with too much information. Likewise, you may want to display only a few items per page.

It’s also best to add one Add to Cart Button. This way, users who are interested in a specific product can easily add it to their orders without leaving the page.

2. The Top Rated Products block

Getting positive reviews from buyers can be very rewarding. Even better, you can use these reviews to increase your sales.

the Top Rated Products Block allows you to showcase the products with the most positive reviews:

Reviews play a crucial role in the success of your shop. They serve as proof to first-time visitors that your products are of high quality, which can help you get more conversions.

Therefore we recommend you to use the Top Rated Products Block prominently on your site. For example, you might want to add it to your homepage or the sidebar of your product pages.

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

You can also hide certain details about the products, e.g. B. their prices. In addition, you can choose to only show the top rated items in a specific category, e.g. B. Clothes.

If you don’t want to feature many reviews yet, you can use that Best Selling Products block instead. This shows the most popular items on your site by number of sales made.

Another similar function is the Latest products Block. As the name suggests, you can use it to promote your latest additions.

3. The Filter products by price block

The filter feature makes it easier for users to find what they are looking for. This can be especially useful when a buyer is on a budget.

the Filter products by price Block allows users to define a minimum and maximum price with a simple slider:

This block works in conjunction with the all products block that we presented earlier. Once a user sets a specific price range, WooCommerce will automatically update the product listing to show only the items that fall within that budget:

the Filter products by price Block is easy to use. However, you can make it 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 rangechoose Editable Possibility:

In addition to filtering products by price, you might also want to allow buyers to search for items based on product attributes such as size and color. You can use the Filter products by attributes block along with the all products Block:

Another useful function is the Active filters Block. Adding this to your page allows users to see a list of their current filters.

4. The Product Search block

A powerful way to improve your website’s user experience (UX) is to add search functionality. This allows users to quickly search for specific items they have in mind instead of having to search through your catalog until they find what they are looking for.

Fortunately, WooCommerce offers one Product Search Block:

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

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

5. The All reviews block

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

As the name suggests, the All reviews With Block, you can 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 reviewer names and review dates.

You can also replace reviewer photos with product images and choose the number of reviews you want to display at once. Meanwhile, users can rank reviews by published date, highest rated, and lowest rated.

There are several ways you can view your reviews. For example, you can place them on your homepage to increase their visibility, or add them back to your About page.

You may also want to combine All reviews Block with two other related functions: Reviews by product and Ratings by category. These blocks allow you to display customer ratings and reviews for specific items and categories.

6. The Featured Product block

If you want to spark interest in a specific item, that is Featured Product Blocking can be very effective. You can highlight any product you want on any page or post on your website.

In addition, you can create several Featured Product Blocks for different items. Adding this block to your page will prompt you 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 focus point selector that lets you move the position of the main subject in your image.

Additionally, you can edit the CTA button within the block. All you have to do is click on it and you will be presented with a selection of options. For example, you can update the link and customize the button color and typography:

Whatever your preferences, it’s important to ensure that essential elements like the product name and CTA are clearly visible. You should also make sure that the button points to the correct page.

For increased visibility, we recommend presenting featured products on your homepage or a dedicated shop page. But you can also use this block in blog posts to draw attention to specific products.

You might also want to take a look at those Featured Category Block. This feature can be very useful when trying to increase sales in specific product categories.

Get started with WooCommerce Blocks today

In this post, we’ve looked at some of the top WooCommerce blocks. For example the all products Block allows you to display your entire product catalog in a professional grid. Meanwhile, features such as Top Rated Products and All reviews can help you get more sales.