A Complete Guide to WooCommerce Blocks
Customizability has always been one of the main traits of WordPress. With time, however, the core system has been slowly moving towards letting users do more with less. The Gutenberg editor, also known as the block editor, aimed to make it easier to edit posts and pages with blocks. The whole concept was leveled up with Full Site Editing, which was released with the 5.9 update to WordPress, and now lets you build whole sites using blocks. If you want to build a store, and you just so happen to choose WooCommerce for the task, WooCommerce blocks are the key components you’ll be using.
Whether you want to list product categories, filter products by attributes, or display featured products, WooCommerce has a block that will help you do it. In total, there are twenty WooCommerce blocks as of the writing of this article, and that number is subject to change.
If you’re looking for a description of any given WooCommerce block and an introduction into the options you’ll have to customize it, you’re in exactly the right place. The blocks we’ll cover here include:
eCommerce WordPress Themes
View Collection
All Reviews is a WooCommerce block you can use to display the product reviews you’ve accrued. Posting reviews, especially if they are genuine and speak well of your products or services, is a very valuable form of social proof that can increase your sales and boost your bottom line. You can add product reviews using plugins, but if you have WooCommerce and the All Reviews block, you don’t have to.
The customization options available for this block will allow you, for starters, to change the color scheme of the block. You’ll also get to toggle on and off different pieces of content that can appear in the reviews, such as product names, ratings, images, or review dates. The All Reviews WooCommerce block will also let you choose the criteria for review ordering, as well as how many reviews are shown in the block.
The Featured Category block lets you choose a category of products from your store and give it a special visual treatment, highlighting it and prompting visitors to check it out or buy the related products thanks to the big Buy Now call-to-action button.
With the block, you’ll have the option to choose the category you want to feature. The category will then appear in a box, along with a description and the call-to-action button. You’ll be able to toggle the description of the category on and off and choose the overlay color.
As for the button, you’ll have the full gamut of options. You can choose the link to which the button leads and whether it’s opened in the existing or a new tab. Picking between button styles, colors, borders, width settings, as well as typography options, is fairly easy to do, too.
If you don’t want to feature a whole category of products and you want to draw attention to a single product instead, the Featured Product block is just what you need. It works much in the same ways as the Featured Category block – it lets you choose a product you’ll highlight on your website and couple it with a prominent call-to-action button.
As for the options, you’ll be able to toggle the price and description of the product, as well as change the background image. As far as the button is concerned, you’ll get the standard style, color, borders, width, and typography options.
When you want to choose a couple of products and display them in a grid, the Hand-picked Products are the block you should use. As its name says, this block will let you hand-pick the products you want to display in a grid, before giving you the options to customize them.
Once you choose the products, you’ll be able to set the grid’s layout. You’ll be able to toggle on and off different pieces of content within each of the product listings and pick the sorting order for them. Finally, in case you want to change the products after adding the block, you’ll be able to do it easily from the right-hand side menu.
The Best Selling Products block allows you to display your best selling products on any page or post. When you decide to use it, the block will automatically fill up with the products from your store. Using the options, you’ll be able to choose how many of them you want to display and how.
Within the layout options, you’ll find two sliders that let you specify the number of columns and rows you want to allot for displaying your best selling products. The content toggles will be there too, allowing you to choose which information about the products you want to display. Finally, you’ll be able to apply product categories as filters, allowing you to focus on best sellers from certain categories.
Giving your customers a quick way to navigate to the type of products they want to see is a sure method for improving the user experience of your website. With the Product Categories List block, you can let your customers pick the product category they want to peruse, using a list or a dropdown menu.
The options for this block include the display style, where you choose between a list and a dropdown menu. You’ll also be able to set the contents of the block and pick whether you want product count, category images, empty categories, and hierarchy visible.
Categories are a great way to create groups of similar products, reducing the amount of time a customer can spend searching for all the choices of t-shirts your store carries, for example. The Products by Category WooCommerce block is the plugin’s block of choice for displaying only the products that belong to a specific category.
The block’s options will let you easily change your mind regarding the category you want to display. It will also let you choose the layout options such as the number of columns and rows, as well as which information you want to appear in the block and how you want the products to be ordered in it.
Having a special place on your website where you showcase the newest products in your store is a feature your returning customers will much appreciate. It will also signal to first-time customers that your store is dynamic and up-to-date, so you might as well use the Newest Products block to let everyone know what’s new in your store.
The block will, predictably, display your products starting with the newest addition. You will be able to set how many columns and rows are used to display the products, as well as the type of information that’s contained in the showcase. Finally, you’ll be able to apply categories for filtering.
Putting products on sale, or otherwise giving them a discount, is a great strategy for increasing sales. Whether you’re doing it for promotional purposes, or to clear stock before the next season’s items arrive, sales work – but only if the customers know about them. That’s what the On Sale Products block can help you with.
This block lets you display the products in your store that are on sale or otherwise discounted. Like most other product lists, it also has layout options for setting the number of rows and columns, as well as the content, ordering, and filtering options of other WooCommerce product lists.
Of course, categories aren’t the only way you can group products. You can also use attributes and allow customers to view product lists based on the attributes of their choice. The Products by Attribute was introduced just for that.
Much like the previous block, this one will let you display products based on certain criteria. In this case, it’s having a certain attribute. You’ll be able to choose all the standard layout options, content settings, and apply product category filtering and ordering options.
Ratings are a simple way to let your customers know what other people who bought your products thought about them. With the Top Rated Products WooCommerce block, you’ll be able to show the products in your online store from the highest-rated to the lowest rated.
You can adjust the number of columns and rows that are shown in the block, too. You can also choose the contents of the block and apply product-category-based filtering on it.
If you don’t want to display all the reviews you have for all the products in your store, don’t worry – WooCommerce won’t make you. Using the Reviews by Product block, you can display the reviews for a product of your choosing.
After adding the block, you’ll be able to choose some color options, switch to a different product in case you changed your mind and select the contents of the block. The list settings you can access include the ordering rule, the starting number of reviews, whether to load more reviews and how many. You’ll also be able to choose the font size.
The Reviews by Category block functions in the same way as the Reviews by Product block. The difference is that instead of picking a single product, you’ll be picking a category.
From there, you’ll be able to set the colors, change the category, and pick the contents of the block. The list settings include ordering, the starting number of reviews, and loading options. You’ll also be able to choose the font.
There are few better ways to navigate a website than using a good search bar. With the Product Search WooCommerce block, you can enable your customers to search your whole website for the products they want. You can make it all happen with a couple of clicks.
The block is fairly simple – you get two fields to fill with text. One will describe your search field, the other will contain the placeholder text. In the options, you can choose whether to show the search field label or not. That’s all – simple, clean, and fast.
Say what you want about WooCommerce and WordPress, but you’ll never want for a way to mark and categorize your products. If you want to use tags, you can. And with the Products by Tag block, you’ll also be able to list products based on tags, too.
The options you’ll have are the ones you’d expect. Besides switching to a different product tag, you’ll be able to pick the number of lines and columns, as well as choose the contents and the ordering.
When you want to let your products speak for themselves, the All Products block is just the thing you want to use. With it, you can simply list all the products that are in your store.
You can, of course, use the options to change how they’re displayed. The layout options are great for choosing the number of columns and rows of products. You’ll also be in charge of the order in which the block displays the products.
Think your customers might be overwhelmed by all the products you have to offer? You can always let them use price to filter them – the Filter Products by Price lets you do that, but you’ll only be able to use it with the All Products block.
Use this block to enable customers to apply pricing filters to the complete list of your products. The options you get with the block are simple. You can choose between an editable and a text price range. It’s also possible to enable or disable a toggle that applies the filter. Finally, you’ll be able to set the heading level for the block.
Don’t want to use filtering by price alone? How about adding an attribute to your products, such as the size or the color, and using it as a filtering option? The Filter Products by Attribute block will help you with that.
The options you’ll have at your disposal with this block include content options such as the heading level or the product count. Then there are block settings such as query type and display style. Finally, you’ll be able to filter products by attribute within the block.
The Filter Products by Stock block lets you enable the customers to filter a list of all the products you have in your store based on whether or not they’re in stock. The block works with the All Products block, and it lets you choose whether you want to display the product count, which heading level you want to use, and whether you want to show a filter button.
Finally, with all those filters applied to the list of all the products, there has to be a simple way for the customer to visualize and manage them. With the Active Product Filters block, there is.
This block will show the customers which filter they’ve applied so far, and it will give them the option to turn them off. You’ll get to pick some color options, how you want the filters displayed, and the heading level.
Let’s Wrap It Up!
WooCommerce is an incredibly powerful and versatile ecommerce platform that leans into the best things about WordPress and makes them even better. WooCommerce blocks are a clear example – they are incredibly easy and intuitive to use, and they let you drill into the type of experience you want to provide to your customers.
