Making it easier to add WooCommerce products—with Gutenberg

Making it easier to add WooCommerce products—with Gutenberg

The Products block represents stage one of a project we’re affectionately referring to as “Wootenberg”—the preparation of WooCommerce for the arrival of the Gutenberg editor.


If you’ve missed it, Gutenberg is a brand-new, visually-driven content editor being built for WordPress and scheduled for inclusion in the 5.0 release. Read all about it and download the latest version of the Gutenberg feature plugin.

What is the Products block?

Essentially, the Products block is a modern version of the Products shortcode, built for the Gutenberg world we’re all soon to move in to.

The Products block provides an intuitive user interface for inserting products from a variety of sources, then delivers an accurate preview of how that selection will look when published. You’ll also be able to fine-tune the appearance of those products by adjusting the layout and ordering.

With the Products block, you can quickly and easily add products to posts and pages, including:

Individual, hand-picked products

Products from specific categories

Featured products

Sale products

Products with specific attributes or terms


Top-rated products

Or simply add all your products.

Take a look at this short video to see how the Products block works:

A dramatic improvement over the existing shortcode experience, don’t you think? We do!

Get Products Block

A feature plugin

Right now, the Products block is a new concept and dependent on Gutenberg. Since Gutenberg itself is still a feature plugin, we’re releasing the Products block as a feature plugin as well. This way, we’re able to build the feature out quickly, independent of WooCommerce core—read more about feature plugins. Best of all, it provides a convenient way for y’all to install and play with it.

Note: To start experimenting with the Products block you’ll need both WooCommerce and Gutenberg running on your site.

Once we’re happy with the stability of the design and code. we’ll merge the features into WooCommerce core so they’re accessible to all WooCommerce stores. At that point, you can deactivate and remove the feature plugin, and any product blocks you’ve inserted with the feature plugin will remain active.

Our approach

Gutenberg creates lots of exciting possibilities for a large plugin like WooCommerce. For now, it was important to us to limit the scope of our initial exploration to make sure we built a solid foundations with Gutenberg’s design patterns and rapidly evolving codebase, before moving on to more complex tasks like adding a product. As it turns out, even our smaller-scoped project uncovered opportunities we didn’t expect.


Before jumping into design, we did a few rounds of research to ensure we were headed in the right direction. This included spending a lot of time playing with Gutenberg, talking with the design team, and looking at what others in the WordPress community are doing with Gutenberg right now.

Since we were focused on the products shortcode, we analyzed its usage on 10,000 WooCommerce sites. We learned that the most popular applications of the shortcode are to display specific products, product categories and featured products. Interestingly, very few stores seemed to use it to display top-rated products, bestselling products or products with specific attributes.

The most popular applications of the products shortcode were to display specific products, product categories and featured products.

It’s fascinating to see how folks are actually using a feature, and this insight was key in helping us figure out which flows are most important. It also challenges our assumptions, so we can make informed decisions on what we tackle in the next design phase.

Moderated testing, round one

Our first round of designs explored ways store owner might want to display products on a page or post. We interviewed store builders and store owners/managers, created a few test scenarios to embed products, then asked them to try the plugin and talk through their reactions and feedback.

Capturing this feedback early in the design process, before starting development, informed the next iteration of designs to better align with how customers expected to insert and display their products. This gave us the confidence to move forward with the first version of the feature plugin for further testing.

Our main takeaway from this round of testing was that although our flows were pretty good, folks ran into trouble when it came to interacting with the block settings. This was partly a discoverability issue, but also a result of settings overload. So we removed some options (like product data visibility toggles – something we’ll soon be able to handle better via Gutenberg core) and moved others (like the products scope selector) to the main block settings section, making them visible immediately after the block is inserted.

Moderated testing, round two

Once the feature plugin was ready and we’d updated our designs, we arranged a second round of usability testing. This time we prepared a live test environment so test participants could interact with the actual Gutenberg interface, rather than prototypes. Watching folks use the actual product was eye-opening — and invaluable.

Two of the key lessons were not about the Products block specifically, but about Gutenberg itself. Every single test participant (most of whom had never used Gutenberg before) got stuck when adding a block, and had trouble locating the advanced settings. We shared the results of our tests with the Gutenberg team, a fix has already been deployed for the second issue, and we’re currently exploring design options to address the first.

As for the Products block itself, we did some fine-tuning adjustments, like removing an extraneous step when displaying products that do not require further input from the user during selection — if you elect to display featured products, we don’t need an additional action to confirm that like when selecting categories. We also noticed that there wasn’t a consistent flow for changing the scope of products on display and test participants all looked in different places for these settings, so we added more pathways back to the initial block settings.

Flat scopes include products sale, or bestsellers – there’s no variance. Varied scopes require further input from the user during the selection process.

The result? This feature plugin that’s available to download today.

Get Products Block

Interested in testing WooCommerce prototypes with us?

If you’re interested in the very latest WooCommerce developments, please sign up for our Design Feedback Group so you can shape the future of WooCommerce. We periodically reach out to members for help researching new projects and testing our prototypes and MVPs.

Share this: Facebook




Via https://woocommerce.com/2018/05/making-it-easier-to-add-products-to-posts-and-pages-with-the-products-block-for-gutenberg/