WooCommerce Brings Product Blocks to the Gutenberg Editor

The Gutenberg WordPress editor, released in December 2018, revolutionized how users create appealing web content with a new interface standard and without the need for third-party plugins.

The release brought many helpful blocks for the easy embedding of YouTube, layouts with columns, content like headings, and media including images and galleries. However, embedding WooCommerce products still relied on shortcodes — this means constantly referring to documentation to find the dozen-plus attributes you might need to get the products displaying in the right way.

Now, with the new WooCommerce Product Blocks in WooCommerce 3.6, these options are easily accessible with selectors and sliders.

For instance, if you’re launching a new line of products and would like to display them in your blog post announcement, you could use WooCommerce Product Blocks like this:

Formerly, to display eight products in the clothing category in four columns sorted by popularity, the following shortcode would be required:

[products limit="8" columns="4" category="clothing" orderby=”popularity”]

With the new WooCommerce Product Blocks it’s as simple as a few clicks.

In addition to the variety of blocks used to display a selection of products, there’s a block focused on featuring a specific product:

WooCommerce Product Block

The ability to easily add products to your posts and pages that display responsively and in an appealing way allows shoppers to find your products outside of the shop and product category pages.

Turn traffic coming to your blog into sales with the new WooCommerce Products Blocks.

Read our previous post about the release of WordPress 5.0 and Gutenberg here.