Since WordPress 5.0, the default page/post editor has been completely redeveloped. Surely, you’ve heard about Gutenberg.
Bad news is that WooCommerce joined the new editing experience much more slowly, and there are still major things to develop in order to make it Gutenberg-friendly.
The compatibility progress can be tracked via the WooCommerce Blocks official plugin, which states “You can use this plugin if you want access to all the available blocks for WooCommerce – including experimental ones. Our current “stable” blocks are bundled into WooCommerce, and can be added from the “WooCommerce” section in the block inserter“, because you can find their “beta” blocks in there, those they call “experimental” and that will be officially released into WooCommerce once they are approved.
In this article, we’ll specifically dive deep into WooCommerce Blocks – what they are, why they’re important, how many blocks are available, and how you can use them.
Since this is a huge topic – we have twenty WooCommerce Blocks to cover – we’re dividing it into two parts. This article will evaluate the first ten Blocks you can use in your store. But first, let’s identify what WooCommerce blocks are and investigate why they are so important.
What are WooCommerce Blocks, and why are they so important?
WooCommerce automatically creates pages like category pages and shop pages to display your products. However, it’s likely that another WooCommerce website may appear similar to your eCommerce store – if they choose the same page and product layout as yours.
However, with WooCommerce Blocks, you can make your store unique and showcase your products in the manner and layout you prefer.
WooCommerce Blocks provide you with more control over your store design. Its integration with the Block Editor allows you to customize your store without writing a single line of CSS, adding code, or requiring graphic design expertise.
You can easily add blocks with a simple drag-and-drop method. Using WooCommerce Block’s easy-to-use interface, you can:
- Create custom store pages
- Create landing pages to display a collection of products
- Add product blocks in specific pages or even blog posts
- Add product recommendations, product reviews, and promo banners wherever you like
So, let’s take a look at the different WooCommerce Blocks. You get 20 in-built WooCommerce Blocks when you install WooCommerce. Here’s a look into the first ten blocks and how you can use them.
A list of essential WooCommerce Blocks [Part 1]
1. Active Product Filters
Product filters facilitate product search for your customers. Without them, there’s a risk of losing customers – as they’ll have to search for the products of their choice manually. Unfortunately, this process gets time-consuming and makes your website less useful and interactive for your target audience.
The Active Product Filters block displays the product filters that are currently active in the current view (so, filters that were selected at the previous step). In addition, this block will automatically grab your product’s attributes – allowing your customers to filter the active products by any attribute.
You can style the block’s heading and choose to display the filters as either chip (similar to buttons) or a list. Thus, this block makes it easy to add filters like the product’s size, shape, or color – making it extremely convenient for your customers.
2. All Reviews
Displaying customer reviews is an excellent way to showcase your product’s credibility and authenticity. It acts as a product testimonial that buyers trust more than the product claims – increasing the chances of users purchasing the products.
According to Trustpilot, 89% of customers read online reviews before purchasing the products. This shows the integral role customer reviews play in your eCommerce sales.
Thus, including the All Reviews Block on your WooCommerce website can act as a game-changer for your product sales.
This block will allow you to display the entire list of all the product reviews you received anywhere on your store – like the blog post or landing page.
It comes with many customization options where you can choose to either hide or display the product name, reviewer name, review date, product rating, review content, and product image.
You can customize the settings by allowing users to order by lowest rating or higher rating, or even set the number of reviews to display and add a ‘load more reviews’ option for your customers.
3. All Products
The All Products Block displays all the products in your WooCommerce store, and it comes with sorting and pagination options. You can align this block with the Active Product Filters block to show a sorting dropdown.
Using its in-built pagination option, your customers can easily navigate your products forward and backward to view the entire product page if you wish to not display all the products on a single page.
You get the choice to select the default Product Sorting Order – be it to sort by latest products or popularity of the products. You can also hide the Sorting Dropdown if needed. Moreover, this block also allows you to add additional content like images, text, and videos.
4. Featured Category
The Featured Category Block allows you to choose products from a particular product category that you wish to set up and display as a featured category or in a call to action banner.
It’s a perfect solution to highlight a specific product category on your landing page or a blog post – to drive traffic and maximize sales of that specific product category.
One of its most imperative features is the Focal Point Picker that lets you drag the product image’s focus point to place it perfectly within the background container. This block also gives you options like hiding or showing product descriptions, adding an overlay color, and changing opacity.
Thus, if you’ve recently launched a new product collection – the Featured Category block can help you display the collection in multiple places of your store and drive sales.
5. Featured Products
The Featured Product Block allows you to display your store products in a presentable, nicely-impact, and nicely-designed banner with a Call To Action (CTA).
It comes with plenty of settings and options to show or hide the product price and description, control text alignment, add an overlay color, adjust background positioning and opacity, override the product photo, and change the button CTA.
This block is the perfect way to showcase specific products on your blog posts or landing page and grab customers’ attention – pulling them to make the purchase.
6. Products By Category
The Products By Category Block lets you display products from a selected category or categories in a grid.
It lets you modify the number of rows and columns of the grid with an option to hide or show the product title, price, rating, and the add to cart button. This block can create different sections featuring different product categories on your homepage.
7. Best Selling Products
The Best Selling Products Block allows you to display your store’s best-selling products in a grid.
The design of this block is very similar to that of the Products By Category block with identical customization options. For example, you can set appropriate filter options for the products – like filter by color, size, and price.
Using this block – you can encourage customers to browse through your best-selling products and entice them to buy products for themselves.
8. Filter Products by Price
This block displays an easy-to-use slider that allows customers to filter the products by price. For example, dragging the left handle towards the right increases the price, while dragging the right handle towards the left reduces it.
You can edit the minimum and maximum price range and add a button to set the heading level. It works perfectly in combination with the All Products block.
9. Filter Products by Attribute
This block adds a filter that allows your customers to filter products by attributes. The attributes can be color, size, or even food flavor.
You have the choice to display the filter either as a list or a dropdown. In addition, you can choose the heading level, include the word count, or add a button.
10. Newest Products
You can use this block to display all your latest launches and newest products in a grid. Customers can filter the products based on a relevant category.
This block is perfect to showcase and market your store’s new stock on the homepage and attract more eyes. Its customization options are similar to that of Best Selling Products Block.
Conclusion
Whether you’re a tech-savvy or a non-technical professional – using WooCommerce Blocks is the easiest and most cost-efficient way to display your products in an engaging manner and take your store to the next level.
You can promote your products on any page and blog post on your website. All you have to do is drag the blocks to a specific place on a page – and the page updates live in real-time.
So, if you wish to jazz up your WooCommerce store and grab more attention – use the WooCommerce Blocks mentioned above.
We also have part 2 of this article with ten more WooCommerce Blocks and ways to add and edit them with ease. Check it out as it goes live next week!
