Making it easier to add products to posts and pages with the Products block for Gutenberg

Written by James Koster on May 2, 2018 Blog.

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.

Gutenberg?

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
  • Bestsellers
  • 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.

Once products are added to a post or page you'll see a preview of how they will when you publish your content
Once products are added to a post or page you’ll see a preview of how they will when you publish your content

Research

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.

A chart showing the percentage of sites using different product shortcodes
Percentage of sites using different product shortcodes

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.

Before and after - fewer settings and a clearer way to change the product scope
Before and after – fewer settings and a clearer way to change the product scope

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.

Snapshot of a user research session taking place in a Zoom hangout
Snapshot of a user research session taking place in a Zoom hangout

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.

Selecting a preset scope such as featured products now takes you directly to the preview without having to confirm
Selecting a preset scope such as featured products now takes you directly to the preview without having to confirm

Get Products Block

Interested in testing WooCommerce prototypes with us?

The WooCommerce design team
A leap of victory executed by WooCommerce design team

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.

30 Responses

  1. Chris Diehl
    May 3, 2018 at 3:55 am #

    This is pretty incredible y’all. Excellent job!

  2. Gaurav Tiwari
    May 3, 2018 at 7:01 pm #

    Look good. Not yet convinced with Gutenberg yet. But once we switch, will surely give “Wootenberg” a try. Woocommerce is already complete in itself.

  3. Robin - WP Guru
    May 4, 2018 at 2:43 am #

    Looks awesome.
    Currently building a site for client in WooCommerce. And this Gutenberg thing is kinda scary. Hopefully it will do good then bad for WordPress.
    Does anyone have idea about the release date of Gutenberg?

  4. David Bennett
    May 4, 2018 at 10:08 pm #

    Looks good.

    Is it possible, or will it be possible to drag the products around to change the order in which they are displayed?

    David
    Flying Twigs

    (Using and experimenting with Gutenberg on a test site, and using an Array Theme theme on my main site at Flying Twigs)

    • James Koster
      May 8, 2018 at 11:56 am #

      Hi David, eventually drag/drop will be a feature, but it’s only recently been added to Gutenberg core, so we’re yet to work on our own implementation for the products block.

  5. Hornibrooks Tools & Fasteners
    May 10, 2018 at 6:04 am #

    Great!

  6. Amy
    May 10, 2018 at 5:31 pm #

    Thanks James, I was looking for content editor….will give a try and see how it will work…

  7. Career today india
    May 11, 2018 at 2:30 pm #

    This is really a very helpful article. Thanks for sharing information keep up good work.
    http://careertodayindia.com/

  8. Ezeani MacDonald
    May 11, 2018 at 8:14 pm #

    Great Blog…

  9. lovet
    May 12, 2018 at 10:35 am #

    Love to read it. Well Written!

  10. Gajanan Patel
    May 12, 2018 at 11:21 am #

    Great Article,
    Keep up the good work. Thanks

  11. Forging Company India
    May 12, 2018 at 12:24 pm #

    Thanks for sharing the information and its makes much easier to place products on particular category ..so easy.

  12. TechTrendz
    May 14, 2018 at 12:28 pm #

    Thank you, James. All my issues were resolved it helped me a lot and learned so many things. Great work keeps sharing.

  13. Quickbooks
    May 16, 2018 at 9:27 am #

    Tax Information Number (TIN) is introduced by Income Tax Department of India to change the current system of direct taxes using Information Technology. It involves collection, processing, monitoring and accounting of direct taxes.It is a unique 11 digit registration number for identification of dealers registered under VAT. If you want to apply for TIN Number and have queries regarding this, Call QuickBooks Support. We are available 24X7 for your help. To reach us call @ 1-877-227-2303 or visit our website http://www.qbooks247.com/

  14. genuine meaning.com
    May 17, 2018 at 7:24 am #

    nice article ,

  15. biomorph
    May 17, 2018 at 7:24 am #

    Franchise refer to privilege or right. Franchising refers to business in which a trademark of company can be used by the other partner for doing business. The partner uses that brand to sell products. Franchise can be of different types and different modes. Pharma Franchise refer to franchise where a company gives right to partner to market its products in that part. The company may give franchise state wise. It may also give Master Franchise.

    We introduce ourself as one of the leading Pharmaceutical Company based in Chandigarh. Biomorph Lifesciences Pharma is a company based in Industial Business Park in Chandigarh. Pharma Franchise is a very sucessful business model for both parties. Biomorph Lifesciences is looking to give Pharma Franchise in different parts of India. We are looking for young and dynamic people to join hands with us in expansion plans of a company.
    contact :9915807495

  16. Digital1 World
    May 17, 2018 at 9:48 am #

    This plugin is almost drag and drop. thanks for sharing

  17. spoken course in Lahore
    May 17, 2018 at 9:49 pm #

    Nice to visit and see this Blog.
    I got that this plugin is most beneficial for all the users.
    keep it up to share such beneficial knowledge and information for all of us
    Thanks!
    British Education & Training Systems (BETS)

  18. Ashish
    May 18, 2018 at 6:24 am #

    Awesome Content. Keep it up And one more thing it’s very Knowledgeable Article

    The Readers Hindi

  19. Birchi
    May 18, 2018 at 7:51 am #

    This series is amazing for me and my blog post. Thanks for your valuable content. I will happy to help you for this content.

  20. sowmiya
    May 18, 2018 at 10:54 am #

    very good articals

  21. Mumbai to Pune Taxi @ Rs. 2314
    May 18, 2018 at 11:27 am #

    Good Post.Worth to read this article.

  22. Assignment Writing uk
    May 18, 2018 at 11:04 pm #

    The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface.

  23. Hardeep Singh
    May 19, 2018 at 10:20 am #

    Hey,
    I’ve read this article. One of a friend told me about “Gutenberg”. I am thinking for turned for Gutenberg. Firstly I’ve many doubts related to Gutenberg but after reading your article my all doubts has been cleared. Thanks for sharing this worthful information.
    Thanks-

  24. Latest Tech News UK
    May 19, 2018 at 11:18 am #

    Your blog is very nice thanks for sharing Then just very nice, thanks for sharing with us Enjoyed every bit of your blog.Really looking forward to reading more. Latest Tech News UK : breaking news and analysis on computing, the web, blogs, games, gadgets, social media, broadband and more.

  25. Norton.com/setup
    May 19, 2018 at 11:36 am #

    Norton is one such name which is widely accepted as “The Best Antivirus” worldwide. There are millions of Norton users who have faith in it. This software is widely recognized for giving the best of product and services to their valuable customers. Products offered by Norton are built with the high-quality security advantages which always results in a better way.

Leave a Reply

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment