Round 2: Update to WooCommerce 3.5.1+ before WordPress 5.0

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.

94 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. Ezeani MacDonald
    May 11, 2018 at 8:14 pm #

    Great Blog…

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

    Love to read it. Well Written!

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

    Great Article,
    Keep up the good work. Thanks

  10. 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.

  11. 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.

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

    nice article ,

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

    This plugin is almost drag and drop. thanks for sharing

  14. 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)

  15. 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

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

    very good articals

  17. 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-

  18. recycling wooden pallets
    May 21, 2018 at 12:33 pm #

    Awesome article, i really like it, and thank you so much for sharing,

  19. sowmya
    May 21, 2018 at 12:43 pm #

    There are some learning online blogs that worth to spend time and read remarkable learning article. thanks for sharing such a great article to us.

  20. Lucky
    May 22, 2018 at 6:19 pm #

    Thanks for the update. I was searching for this for a long time. Thanks.

  21. Ajay
    May 22, 2018 at 6:43 pm #

    Great post. Thanks a lot

  22. hitchu
    May 22, 2018 at 8:28 pm #

    nice article

  23. Andrew
    May 23, 2018 at 8:14 am #

    Thanks for this information.

  24. kaka
    May 23, 2018 at 8:51 am #

    thank you for share with us.

  25. Rajasthan Government Jobs
    May 23, 2018 at 10:40 am #

    Good Peace of information provided by you in this article. A Deep knowledge as well as good content provided by you. Worth Reading This.

  26. Inyourgram
    May 24, 2018 at 3:24 pm #

    will give a try and see how it will work…

  27. ricket
    May 24, 2018 at 9:24 pm #

    This is one of the best platform to work on. I have tried it. Best

  28. Falak
    May 25, 2018 at 12:41 pm #

    Excellent post buddy. The timing of your post is superb.So thanks a lot for sharing this excellent post.

  29. azmat bukhari
    May 27, 2018 at 3:54 pm #

    Realy nice blog post ever . great source of information

  30. utimotech
    May 28, 2018 at 7:04 am #

    Thanks for sharing such a useful information, James.

  31. Gautam
    May 28, 2018 at 11:49 am #

    Nice Article, thumbs up cheers!

  32. Priyesh
    May 29, 2018 at 12:20 pm #

    article very interesting and helpful.

    Thanks for sharing….

  33. sanjna
    June 1, 2018 at 12:27 pm #

    Thank you for sharing your post. Your post very nice and help with us.

  34. anish
    June 20, 2018 at 7:27 am #

    woo-commerce is the one of the major thing in eCommerce and word press

    i used a woo theme here woo themes used

  35. Apprenticeships Brisbane - Sesat
    June 20, 2018 at 7:49 am #

    Thanks for the update. I was searching for this for a long time. Thanks.

  36. SRG Housing
    June 20, 2018 at 10:54 am #

    Nice !!!!

  37. Dudley Zoo
    June 20, 2018 at 3:04 pm #

    I am new to this field and now in a learning phase. After studying your tutorial now I am able to add products to posts. Thank you.

  38. Sahir Lodhi
    June 20, 2018 at 5:45 pm #

    Thanks for sharing.

  39. Shweta Dubey
    June 25, 2018 at 1:00 pm #

    Thank you so much for sharing such a great content here. I appreciate your work you are doing here. Keep it up. 🙂

  40. Best Love Status Ever
    June 25, 2018 at 9:19 pm #

    Nice Article…
    Really appreciate your work

  41. Stephen strange
    June 27, 2018 at 8:45 am #

    Superb article thanks for sharing awesome information

  42. ezone staffing
    June 28, 2018 at 11:25 pm #

    wow nice

  43. Love Dhawan
    June 29, 2018 at 11:09 pm #

    nice work, Also See This –
    http://www.besttechnologytips.com/

  44. Get Grocery
    June 30, 2018 at 6:52 am #

    We are selling Red chilli, Garlic, Cloves, Coriander, Mustard, Cardamom, Ginger, Fenugreek, Tamarind, Turmeric, Black Pepper, White Pepper, and Still more to be added. For more information visit our website :- http://www.get-grocery.com/en/

  45. Funny Messages For Friends
    June 30, 2018 at 6:53 am #

    Very nice article.
    Thanks for the update. I was searching for this for a long time. Thanks.
    Thanks for sharing.Very nice site,keep it up..
    Regards..

  46. Nandani Priyadarshi
    June 30, 2018 at 9:10 am #

    Mr. James Koaster Your Article “Making it easier to add products to posts and pages with the Products block for Gutenberg” is Superb and very helpful also. Thank-You for sharing this with us.

  47. dubai canal dinner cruise
    July 1, 2018 at 1:46 pm #

    you done great job i really like the way you work with your website.

  48. Abu Rayhan
    July 2, 2018 at 6:19 am #

    This is my Social media YouTube Marketing Channel. Would you visit my channel?

  49. Sabbir
    July 2, 2018 at 8:31 am #

    Best Ear Protection for Shooting Reviews and Ultimate Buying Guide that will help you to find appropriate noise canceling electronic ear muffs headphones

  50. Rupsha
    July 2, 2018 at 8:31 am #

    Best Ear Protection for Shooting Reviews and Ultimate Buying Guide that will help you to find appropriate noise-cancelling electronic ear muffs headphones

  51. Sabbir
    July 2, 2018 at 8:32 am #

    please visit my Twitter Account

  52. sandy
    July 2, 2018 at 9:25 am #

    Power BI Training at Analytics Benchmark helps you to Master Power BI Business Intelligence Tool. In this Course, you’ll Master the Development Components like Power BI Desktop, Power Query, M Language, Power Pivot, DAX, Power View and Power Maps. Learn Server Components like Power BI Service, Power BI Report Server, and Power BI Gateways. In addition, learn how to access the Reports and Dashboards using Power BI Mobile Apps.

  53. Rakib
    July 2, 2018 at 11:14 am #

    nice website

  54. Lantau Tours Hong
    July 2, 2018 at 1:43 pm #

    Hi James,
    Nice post by you about Gutenberg. Is Gutenberg the right way forward for WordPress? In this post, I takes a look at the Gutenberg editor & its inevitable impact on users.
    Thanks for this post….

  55. Rob Sarah
    July 2, 2018 at 2:36 pm #

    Ecommerce Web Design is really impressive end-product for your customers. So it is important to hire the experts to get brilliant design. The expert’s team has brain-stormed, researched. The experts create a huge number of successful websites that also perfectly suit all kinds of budgets. In general stunning web design features incorporated that supports you to create strong reputation that also offer end-result.

  56. Satta Matka
    July 3, 2018 at 5:34 am #

    Satta Matka King has 10 years of experience. Call me 08982591334

  57. Ajeet Singh
    July 3, 2018 at 10:17 am #

    Nice Blog you have shared thanks for sharing this useful information.

  58. Teeth Whitening
    July 3, 2018 at 12:17 pm #

    Hi there,
    After visiting a lot of website over internet found your’s that content is very interesting for me.
    Thanks for sharing more about Gutenburg technology on wordpress.

  59. Chirag Aggarwal
    July 3, 2018 at 12:18 pm #

    Nice to visit and see this Blog.
    I got that this plugin is most beneficial for all the users.
    All my issues were resolved it helped me a lot and learned so many things. Great work keeps sharing
    I also have a store where we use to provide coupons for various global stores and we add products and deals. Your article is so clear and sorts out my doubt.
    Thanks James

  60. Loyalty system
    July 3, 2018 at 1:00 pm #

    I like your post.
    Your writing skills is very good for easily understand.
    after reading your article about Gutenberg, I feel it is value for time spent on your website.
    Thanks for your content ……

  61. Riya ojha
    July 3, 2018 at 7:00 pm #

    Great Post thanks for sharing

  62. Helena
    July 3, 2018 at 7:32 pm #

    Have you checked new 2018-2019 back to school trends? https://www.cleverbooks.eu/7-big-topics-must-know-not-fall-behind-educator-back-school/

  63. Restaurant Coupons Deal
    July 4, 2018 at 8:24 am #

    I’m impressed, I must say nice article.The article is both educative and entertaining, and i frankly say you’ve hit the nail on the head. Exactly, you’re very kind of us about comment!.

  64. Best Steak
    July 4, 2018 at 8:33 am #

    Thank you for any other informative site. Where else may I get that kind of information written in such an ideal method? I’ve a venture that I am simply now operating on, and I have been on the look out for such information. I read that Post and got it fine and informative. Please share more like that…

  65. Andy @ Homeventsystem
    July 4, 2018 at 1:02 pm #

    Hi James,
    Thank you for your post
    This help me a lot to learn from your content and give me what I’m looking for….

  66. George
    July 4, 2018 at 5:09 pm #

    Good post

  67. Norton Error 8504 104
    July 4, 2018 at 7:53 pm #

    Amazing tips you have shared. I am sure that these tips will be of great use to the newbie bloggers.
    Thanks for sharing.
    have a good day.

  68. Roadrunner Technical Support
    July 4, 2018 at 9:35 pm #

    This article is very nice as well as very informative. I have known very important things over here,
    If you facing any technical problems to use your roadrunner email account, than you must have to contact our roadrunner technical support helpline number +1-888-338-6033.

  69. Jet vory
    July 5, 2018 at 7:39 am #

    Thank you for sharing your inspiring success story.

  70. Jenelia @ Top Home Zones
    July 6, 2018 at 1:20 pm #

    Hi there,
    Nice to read about your post,I like your writing style.
    Thanks for this type post….

  71. Nabi Ullah
    July 7, 2018 at 7:29 am #

    hiya,
    first-class to study about your put up,i like your writing style.
    thanks for this kind put up….

  72. Guest
    July 8, 2018 at 4:32 am #

    hoc cham soc da

  73. http://geeksready .com/
    July 10, 2018 at 12:36 am #

    I like your blog alot if any one need to setup canon printer you canon visit http://geeksready
    .com/http-canon-com-ijsetup/.

  74. Jessica
    July 10, 2018 at 8:17 am #

    Great overview of this topic! Thanks for sharing amazing information!
    AdminByRequest

  75. Shayamal Kumar
    July 11, 2018 at 7:56 am #

    Its a nice and amazing post to read and learn new things about adding up different products.

  76. CCTV Camera in Noida
    July 11, 2018 at 12:39 pm #

    Informative blog..!! Thanks for sharing.

  77. Tattoo Artist In Goa
    July 12, 2018 at 7:53 am #

    Well written informative blog. Good work, Keep writing.

  78. blackstonejamaican
    July 12, 2018 at 8:15 am #

    Want to Buy Jamaican Stone online for Premature Ejaculation and sexual problem. Premature Ejaculation treatment is needed for people who have rapid …
    jamaican stone for premature ejaculation

  79. Ashely Rosa
    July 12, 2018 at 11:14 am #

    Hi, Thanks for sharing the information I hope it makes easier to add products to posts and pages.. This information will really helpful to us. Thanks once again..

  80. bids on used stuff
    July 12, 2018 at 12:06 pm #

    bids on used stuff

  81. Ant Travels
    July 12, 2018 at 1:51 pm #

    Very informative post, thanks you so much for writing this type of useful information.

  82. Mobile apps development Dallas
    July 13, 2018 at 6:50 am #

    You are doing a good job keep it up Very informative post, thanks you so much for writing this type of useful information.

  83. samsungyar
    July 13, 2018 at 12:28 pm #

    thanks for sharing this good article, so useful article

  84. text20
    July 13, 2018 at 12:29 pm #

    very good article,my website is about wordpress too

  85. soundtracks
    July 13, 2018 at 12:31 pm #

    its very good information about woocommerce, thank you

  86. simcard
    July 13, 2018 at 12:32 pm #

    can i sell my product about phone simcard with this ? thank you for your good information

  87. MichaelKenis1985
    July 13, 2018 at 2:21 pm #

    Great article. I had much products added like this on Custom Picks

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
%d bloggers like this: