WooCommerce Blocks: a Complete Guide

Posted on October 26, 2021 by in WordPress | 14 comments

WooCommerce Blocks: a Complete Guide

WooCommerce blocks provide lots of options to showcase your products. There are currently 20 blocks added to the block editor when you install WooCommerce. Even more blocks and new features are available in the WooCommerce blocks plugin, which tests new blocks and features to add to the WooCommerce core. In this article, we’ll provide a brief overview of each block and what it can do.

WooCommerce Blocks in the WooCommerce Core

WooCommerce Blocks in the WooCommerce Core

Searching for Woo in the block editor reveals 20 WooCommerce blocks. These blocks are already built-in when you install WooCommerce. You can also find them by scrolling to the bottom of the list of blocks in the editor.

WooCommerce Blocks in the WooCommerce Core

Hovering over most of the blocks reveals a preview of how it would look on your website. Each of these blocks provides a unique view of your WooCommerce products. Let’s take a closer look at each block. I’ll show what it looks like on the page and highlight the preview if it’s available. I’ll also mention any unique settings.

Active Product Filters

Active Product Filters

This one shows the filters for the currently active product. Display them as a list or as chips (similar to buttons). Choose the heading level. It works with the All Products and Filters WooCommerce blocks.

All Products

All Products

This one displays all the products in your store. It includes sorting and pagination. Align it with the last block and show a sorting dropdown. This one doesn’t provide a preview after adding it to the page.

All Reviews

All Reviews

This block displays a complete list of all the product reviews. It shows the thumbnail of the reviewer, product, star rating, and review. You can sort them, choose the content that will display, choose the type of image, and adjust the list settings.

Best Selling Products

Best Selling Products

This block displays the grid with your best-selling products of all time. You can align it with the last block. Add content elements including the title, price, rating, and add-to-cart button. You can also set the filter options.

Featured Category

Featured Category

This one shows all products from a specific category that you’d like to set up as a featured category. Choose the category from the list. You can only choose one.

Featured Product

Featured Product

This one displays a specific product that you choose from the list, allowing you to highlight the product.

Filter Products by Attribute

Filter Products by Attribute

This one adds a filter so users can filter the products based on the product’s attributes. You can select the attributes, such as color and size, from the list. Display as a list or dropdown. Set the query type between AND/OR. Include the product count, choose the heading level, add a button, and choose the filters.

Filter Products by Price

Filter Products by Price

This block adds a filter that allows users to choose the prices they’re looking for. The price range can be editable buttons or text. You can add a button if you want and set the heading level. This one doesn’t provide a preview once it’s added to the page.

Filter Products by Stock

Filter Products by Stock

This one allows the users to show the products based on the inventory status. They can select between in stock, out of stock, and on backorder. Show the product count, choose the heading level, and add a button. You can use it with other WooCommerce blocks, such as the All Products block. It doesn’t show a preview if it’s added to the page.

Hand-Picked Products

Hand-Picked Products

This block lets you select the specific products that the block displays. Choose as many as you want. You can choose the content elements that will display including the title, price, rating, and add-to-cart button. It also has a button alignment option and set the order and filter options.

Newest Products

Newest Products

This block displays all of your newest products within a grid. Align it with the last block and add content elements such as the title, price, rating, and add-to-cart button. You can also set the filter options.

On Sale Products

On Sale Products

This block displays a grid with all your products that are on sale. Choose to display the title, price, rating, and add-to-cart button. You can align it with the last block. It also includes order and filter options.

Product Categories List

Product Categories List

This one displays a list of your categories. Display them as a list in an outline or as a dropdown. Show the product counts, images, hierarchy, and empty categories.

Product Search

Product Search

This is one of the more unique WooCommerce blocks. it adds a search box to your page where customers can enter keywords to search through your products. Show or hide the field label.

Products by Attribute

Products by Attribute

This one displays a grid of your products based on attributes that you choose from a list. Attributes include size, color, etc. Align it with the last block, choose the content elements that will display, and set the filter and order by options.

Products by Category

Products by Category

This one displays a grid of products from specific categories that you choose. Select as many categories as you want. Add content elements including the title, price, rating, and add-to-cart button. You can also align it with the last block and set the order options.

Products by Tag

Products by Tag

This one displays a grid of products from the tags that you select from the list. Select as many tags as you want. Choose the content elements that will display from the title, price, rating, and add-to-cart button. Align with the last block and choose the order by options.

Reviews by Product

Reviews by Product

This one shows all the reviews of a specific product that you choose from your list.

Reviews by Category

Reviews by Category

This block shows all the product reviews based on the category that you select from the list. Choose the content elements that will display. Add the title, price, rating, and add-to-cart button.

Top Rated Products

Top Rated Products

This one displays a grid with all your highest-rated products. Choose the content elements to display including the title, price, rating, and add-to-cart button, and the filter categories.

WooCommerce Blocks Plugin

WooCommerce Blocks Plugin

The WooCommerce Blocks plugin adds even more features to the blocks in WordPress and adds two new blocks. The two new blocks will give you a compatibility notice, indicating that you might experience compatibility issues with other extensions and integrations. They include a link in their settings where you can provide feedback about the block.

The purpose of this plugin is to test new blocks and features. Once the blocks and features become stable, they’re merged into the WooCommerce core. You’ll want to be careful using this plugin with your live site.

Cart

Cart

This block adds your shopping cart to the page. You can include a shipping rates calculator, choose the link for the checkout button, and set it to dark mode. It includes the notification that you can set the page as the default shopping cart in the WooCommerce settings. It also includes the feedback link.

Checkout

Checkout

This block provides a checkout for your shopping cart. It provides a notification that you can set this page as your default checkout in the WooCommerce settings. It includes a dark mode option. It’s made up of several elements that you can customize independently. This one doesn’t provide a preview if you’ve added the block to your page.

New Features to Current WooCommerce Blocks

Three of the current WooCommerce blocks have new or different features:

All Reviews – adds typography and color settings. Choose from 7 preset font sizes or customize the size. Colors include 10 presets and a custom option.

Reviews by Product – adds the same typography and color settings as All Reviews. This one displays in full-width and removes the block options and content elements.

Reviews by Category – this one also adds the typography and color settings. It also displays the block in full-width and removes the block options and content elements.

Ending Thoughts on WooCommerce Blocks

That’s our look at the WooCommerce blocks. This includes the 20 blocks that are available in the WooCommerce core product and the 2 new blocks and settings from the WooCommerce blocks add-on plugin. WooCommerce blocks provide a great way to showcase your products. They’re easy to use and are a great way to add products to any page or post. In future articles, we’ll go into more detail about each block and see how to use them.

We want to hear from you. Do you use WooCommerce blocks in your WordPress website? Let us know about it in the comments.

Featured Image via aliaksei kruhlenia / shutterstock.com

Premade Layouts

Check Out These Related Posts

WordPress vs Duda Website Builder

WordPress vs Duda Website Builder

Posted on May 26, 2022 by in WordPress

WordPress began as a popular blogging platform has since grown into a full-scale, open-source content management system (CMS). It’s among the top web platforms available online today, and the primary choice of millions of website owners. The Duda website builder is a user-friendly, drag-and-drop...

View Full Post
What Is the WordPress Object Cache?

What Is the WordPress Object Cache?

Posted on May 25, 2022 by in WordPress

Speed is crucial to your site’s success. Slow loading times can drive visitors away, resulting in a high bounce rate and fewer conversions. Fortunately, an effective way to boost your site’s performance is to use the WordPress object cache. In this post, we’ll take a closer look at object...

View Full Post
Everything You Need to Know About Cybersquatting

Everything You Need to Know About Cybersquatting

Posted on May 24, 2022 by in WordPress

Whether you’re planning to set up a website or start buying and selling domains, it’s important to familiarize yourself with cybersquatting. This practice can have a negative impact on your business, and it could also land you in hot water. Therefore, it’s crucial to learn how to identify...

View Full Post

14 Comments

  1. Great, when will this be available within Divi? It’s been promised for a long time.

    • The Woo Modules was sneak peaked on Sept 15th, so nor it’s over 4 months. There were 105 comments asking on when that was coming out with zero response from ET. The comments sections was closed as I get it was overwhelming. I chatted with ET staff on two occasions and received nothing on a date or even an ETA in what quarter in 2019 or maybe even 2020. Probably would have been wise for them not to do a sneak peak since people might have joined thinking that there was finally a solution to customizing Woo product pages without going out of the Divi ecosystem.

      I’m sure I not the only disappointed Divi user at this point regarding this situation.

  2. I wonder why they made a new plugin rather than add it to the regular one.

    • Hi Nelson! I’m not 100% on this, but I do know from reading a lot about the WooCommerce brand and plugin/extension lineup that as a company, they try to keep the weight of their product to a minimum.

      When they have major changes or new feature adds, in many cases they will make those additions a new extension of WooCommerce so that people who do not need/want the additional feature set, don’t have to worry about it adding an extra workload to their site. This way you are able to have more streamlined, lightweight experience with their product. Just my two cents. Again, not an expert, just what I’ve read.

  3. No good idea…

  4. When is it coming to Divi????? We had a sneak peek a while back. Thanks

  5. Can we use Divi to do this instead?

    • Hi Liz, as mentioned above by another person, ET is in development of their on version of this called “Woo Modules”. The release date is unknown at this point. The only communication about it was released on September 15th via the sneak peak of the feature. You can read the post here: https://www.elegantthemes.com/blog/theme-sneak-peeks/divi-feature-sneak-peek-woocommerce-modules

      Unfortunately, as mentioned, there hasn’t been much communication about it from ET since then, but knowing the ET team’s track record, I’m sure (super hopeful) they will deliver on “Woo Modules” very soon. 🙂

      I know I’m one of those waiting patiently for “Woo Modules” in from ET over the new WooCommerce Blocks.

    • From experimenting, you can do many interesting things, mixing what the new block editor (Gutenberg) does with Divi. Caveat, tread carefully, unfortunately the new editor uses a lot of extra code and comment tags for block and if you expose this and inadvertently edit it the wrong way, your block may crash.

      Ok, so one thing you can do is edit up something, like the Woo Commerce blocks above and save. Next open to edit with the Divi visual builder on the front end and select to use existing content. Whatever you put together in the block editor will now render in Divi and you can start to add and Divi elements you want around this.

      What would be useful, if Elegant Themes can achieve it, is to bring the block controls, as presented in Gutenberg, into what is currently a text module so as to be able to further configure the block/s. You can do a certain amount of WYSIWYG editing such as text and image resizing but be careful that you don’t mess up the supporting code. It does have its limitations. For example if you click into one of the rendered WooCommerce block, it disappears and is replaced by its short code. As it is now it is a text module.

      If you are comfortable with code you can copy & paste blocks, as defined by their comment tags to different parts of your Divi layout. To further edit blocks to any degree more than what is basic, I recommend copying the block code temporarily into the code editor in a draft Gutenberg post, switching to the visual editor for changes and then copying from the code editor, to paste back into a text module. I am sure we will see refinements and better solutions to this in the future.

      I already moaned that Divi theme has not yet been updated to conform to the wide width, fullwidth functionality of the new editor but on further investigation the Divi Row width settings can handle this for you and is in fact better because you can customise to whatever best suits you.

      If you have something like Toolset you can also set up a content template (or as many variants that you need) and inject the content from your post using Toolset’s post-body short code. By setting the Toolset Divi template to fullwidth, 0 padding, you can fill that space with whatever block editor content you want. You do though need to hack in the the code required to control regular column width, wide and fullwidth along with some template specific styling to render it properly.

  6. “I kept wanting to customize like I would with Divi (I think Divi has spoiled me). ”

    And this is exactly why it makes sense to be creating layouts and template files in Divi.
    When will we finally be seeing the Divi theme builder, also to create blog layouts as template files, header, footer, navigation menu, archive pages?

  7. I have read this blog a few days back. I have used the plugin. The knowledge I have gained from this bog helps me in integration.
    Great job by the author & his team.
    Thank You So Much

  8. What do you do if you already created checkout and cart pages using divi? These blocks have everything that I want for these pages but I’m afraid to delete everything and then run into issues because i did it incorrectly.

    • You won’t run into issues using Divi modules instead of these blocks. These WooCommerce Blocks are intended to be used with Gutenberg, the WordPress default block editor. There are probably some niche use cases in which you could use WooCommerce blocks in conjunction with Divi WooCommerce modules on the same page or layout, but I’m not aware of them off the top of my head.

  9. hi, I am using Checkout Files Upload, how can i get this to show up with Blocks?

Join To Download Today

Pin It on Pinterest