WooCommerce Blocks


WooCommerce Blocks are the easiest, most flexible way to display your products on posts and pages!

NEW: Products by Attribute Block
Display a grid of products from your selected attributes.

Featured Product Block
Select and display a single product in a new, high impact fashion. Control text alignment, hide or show the price and description, add a color overlay, change the button call to action, and override the product photo.

Hand-Picked products Block
Display a grid of hand picked products. Products can be ordered in various ways.

Best Selling Products Block
Display a grid of your best selling products, filterable by category.

Top Rated Products Block
Display a grid of your top rated products, filterable by category.

Newest Products Block
Display a grid of your newest products, filterable by category.

On Sale Products Block
Display a grid of on sale products, filterable by category.

Products by Category Block
Display a grid of products from your selected category, or categories. Products can be ordered in various ways.

We’ve also improved the category selection filter. If you select two or more categories, you can now chose to show products that include ANY or ALL selected categories.

Getting Started

Minimum Requirements

  • WordPress 4.9.x
  • Gutenberg plugin 4.6 or greater
  • WooCommerce 3.3.1 or greater
  • PHP version 5.2.4 or greater (PHP 7.2 or greater is recommended)
  • MySQL version 5.0 or greater (MySQL 5.6 or greater is recommended)


  • WordPress 5.0.x
  • WooCommerce 3.5.1 or greater
  • PHP version 5.2.4 or greater (PHP 7.2 or greater is recommended)
  • MySQL version 5.0 or greater (MySQL 5.6 or greater is recommended)

Visit the WooCommerce server requirements documentation for a detailed list of server requirements.

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser. To do an automatic install of this plugin, log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.

In the search field type “WooCommerce Gutenberg Products Block” and click Search Plugins. Once you’ve found this plugin you can view details about it such as the point release, rating and description. Most importantly of course, you can install it by simply clicking “Install Now”.

Manual installation

The manual installation method involves downloading the plugin and uploading it to your webserver via your favourite FTP application. The WordPress codex contains instructions on how to do this here.

Sample data

WooCommerce comes with some sample data you can use to populate the products and get started building Products blocks quickly and easily. You can use the core CSV importer or our CSV Import Suite plugin to import sample_products.csv.

Where can I report bugs or contribute to the project?

Bugs should be reported in the WooCommerce Gutenberg Products Block GitHub repository.

This is awesome! Can I contribute?

Yes you can! Join in on our GitHub repository 🙂

Release and roadmap notes available on the WooCommerce Developers Blog


  • The Featured Product Block
  • Selecting a product for the Featured Product Block
  • Selecting Products for the Hand-Picked Products Block
  • Selecting categories in the Products By Category block
  • WooCommerce Product Blocks in the block inserter menu



It would be great to implement product categories list.

Says my “store doesn’t have any products”

This plugin is inconsistent. I have 3 sites. On one, the plugin works fine. On the other two, it gives me an error saying that I don't have any products in my store. All 3 sites are configured exactly the same - same theme, same plugins, same versions of said plugins. That being so, why should any of that matter when my store is there and working fine?

Great plugin

Thank you for such wonderful blocks plugin for woocommerce. This is one of the my favorite plugins.

Doesn’t work

It doesn't work, And when I contacted the customer service about the issue, they barely helped.....

Dropping this how they did was damaging

Just look at the backtrack on the name to see how a vanity project/power grab turned into a disaster. (Don't mention the G word!) Forcing people to Flexbox when it doesn't work on a lot of current browsers is unforgivable, especially seeing as WP represent ~20% of the web (if stats are to be believed). There's a certain arrogance to the web at the moment that is just not very nice, all pushy and that. Most of the [small business/hobbyist/non-technical] users will not have a clue how to fix a site borked by an autoupdate when this bad boy kicks in, or generate a cost to do so. That's before they get forced into a learning curve where the default is 400% long pages for 3 short paragraphs of text - with as much space as you can randomise between - because you didn't place your image THEN float it left - you foolishly put in between paragraph 2 and 3, I mean duh! /s My own framework needed attention instantly, as did every site that's ever touched it, the second you try and edit it, as did every client that found it. Fair enough I don't mind change, but I'm a power user, developing and integrating, etc. I would rather have Christmas off, but no, let's rewrite these websites I've just finished because someone wants to own WordPress (small P intended, forced into using uppercase p by this non-g editor lol!). Sure, it cost me enough people hours to put it right, that's a risk I chose to take, but some people won't be that fortunate. Sole traders - like artists, makers etc - will just have to suffer a broke website for 6 months when they are too broke to fix it and their broke website makes them even more broke. It's broke. One simple change, like adding a compatibility mode that omits flexbox and retains the old markup, so Internet Explorer dinosaurs can use it and it might have got a bit more love. That's all it needed really. I'm over it now, but that work spike sure made me want to distance myself a bit more from WordPress!
Read all 18 reviews

Contributors & Developers

“WooCommerce Blocks” is open source software. The following people have contributed to this plugin.


“WooCommerce Blocks” has been translated into 9 locales. Thank you to the translators for their contributions.

Translate “WooCommerce Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.


1.4.0 – 2019-02-12

  • Feature: Added new block: “Products by Attribute”
  • Enhancement: Added the ability to resize the Featured Product block (a default and minimum height can be set by your theme)
  • Enhancement: Updated button on Featured Product block to match core button block behavior
  • Components: Added new control component GridLayoutControl to manage row/column layout values
  • Components: Updated ProductAttributeControl to list only attribute types, then once selected, list terms in that attribute
  • UX: Remove ability to change selected product in Featured Product block, to prevent “sticky” product links.
  • Fix: A product without an image will now use the placeholder image in grid-layout block previews
  • Fix: Previously, there was a PHP notice when a Featured Product has no background image
  • Fix: There is now an enforced limit on column and row counts (which can be set by your theme)
  • API: Added attr_operator support to products endpoint to compare product attribute terms
  • Build: Update packages
  • Build: Remove unnecessary internationalization build step

1.3.1 – 2019-01-17

  • Fix: A CSS conflict was causing the core columns style to reset, this has been fixed and columns will display as expected now.
  • Fix: A version conflict with a JS package was causing the blocks to be broken in non-English locales. The package was updated.
  • Fix: Translations were not being loaded correctly for the JS files. We now bundle the Danish, Spanish, and French translations so that these can be used.

1.3.0 – 2019-01-15

  • Feature: Added new blocks: “Featured Product”, “Hand-picked Products”, “Best Selling Products”, “Newest Products”, “On Sale Products”, “Top Rated Products”
  • Enhancement: Create new “WooCommerce” block category, all blocks are found there now
  • Enhancement: Added a control to “Products by Category” block to control whether products need to match any selected categories or all selected categories
  • Fix: A “Products by Category” block with no category selected will no longer show all products
  • Legacy block: Remove legacy “Products” block from being shown in the block inserter (still loading the block for an existing uses)
  • Legacy block: Fix an issue with imageless products in the legacy “Products” block.
  • Components: Add new Control components ProductControl, ProductsControl, ProductOrderbyControl
  • Components: Update SearchListControl to allow selecting a single item
  • API: Add cat_operator support to products endpoint
  • API: Add product description & short_description to each product
  • API: Add attribute group names to each attribute
  • Build: Update packages
  • Build: Add cssnano to minify CSS
  • Build: Split out node_modules code into separate vendors files

1.2.0 – 2018-12-04

  • Feature – Stand-alone product category block with improved category selection interface.
  • Fix – All users who can edit posts can now use these blocks thanks to a new set of API endpoints allowing view access to products, product categories, and product attributes.
  • Fix – Compatibility with WP 5.0, fixed error “Cannot read property Toolbar of undefined”.
  • Fix – Only published products are shown in previews.
  • Enhancement – Translations should now load into the block (for WP 5.0+).
  • Enhancement – Modernized build process and developer tools, and added tests for faster future development.

1.1.2 – 2018-09-07

  • Fix – Refactor to remove withAPIData usage, as the class was removed in Gutenberg 3.7.

1.1.1 – 2018-08-22

  • Fix – Make Newness ordering order correctly on frontend.
  • Fix – Don’t cause fatal errors if WooCommerce is not active.

1.1.0 – 2018-06-06

  • Feature – Add “Best Selling” and “Top Rated” product scopes.
  • Fix – Only enqueue scripts and styles in the site backend.
  • Fix – Remove focus checks deprecated in latest Gutenberg version.
  • Fix – Added keys to some elements to prevent React warnings.
  • Enhancement – Added custom API endpoint for more accurate block previews with orderby.
  • Performance – Refactored the way the attribute select works to prevent many concurrent API requests on sites with many attributes.

1.0.0 – 2018-04-24

  • Initial implementation of the Gutenberg Products block.