WooCommerce Blocks

Description

WooCommerce Blocks are the easiest, most flexible way to display your products on posts and pages! New for version 1.3.0: We’ve added six new blocks!

NEW: 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.

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

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

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

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

NEW: 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)

OR

  • 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

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.

Screenshots

  • 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

Reviews

The last update messed up my layout

I was excited to see the devs have built more blocks to use, so I downloaded the last update, but immediately had to deactivate it because it totally messed up my webshop homepage. Where I had articles in multiple columns, the update changed everything into 1 single column, like you're seeing a really big iPhone screen. In the back end editor the page looked fine, but it rendered all in a single column. Hopefully this can be corrected, because I would really like to use the Woocommerce Blocks.

This editor is awful

This editor is awful. Bad to visualize, to manipulate. The editor changes things witout our command. I want my same old publisher.

I want(ed) to believe

I had high hopes for this plugin in this strange world we live in where Tumblr blocks porn and Woo actually seems to have their **** together. Sadly—unlike most of Woo's vastly improved recent offerings—WooCommerce Blocks was written with the same sloppy, lazy, bug-ridden style we would expect from Woo circa 2015. So much potential wasted on so simple a thing as not using WordPress 5's built-in CSS classes. For example: the Products block had only to wrap in a single div and include the classes .wp-block-columns and .has-X-columns to function identically to the native WordPress Columns block. But nooooo, the folks at Woo had to nest it inside a redundant div and muck up the class formats (like .columns-X, really Woo?)... Shame on you Woo, shame on you.

Has potential – but missing basic functionality

These blocks have potential to be great for custom pages listing products, but the functionality and features seem incomplete. It's very difficult to use add in a product block within a column block - it brings the text down to one or two letters per line and makes searching through products and selecting options impossible. My only work around was to make the product block outside of the column block and then drag it in. The search functionality itself is pretty bad, not all products show up. I can type the exact name of a product in the search bar, yet other ones show up instead. As for adding individual products, why can't they be displayed in the order I put them? Sometimes it makes sense to have specific placement of a product in a row - it shouldn't have to be limited to having them sorted by Price or Average Rating or newness. A necessary feature that's missing is a category block, showing the category image and linking to the WooCommerce category (not just dumping all the products from that category onto your page). The concept for this plugin is great, but the limitations of it made me decide to scrap my page and this plugin and revert back to a page builder that can do this for me.
Read all 12 reviews

Contributors & Developers

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

Contributors

“WooCommerce Blocks” has been translated into 7 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.