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

Escrito por James Koster on mayo 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.


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


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
    mayo 3, 2018 at 3:55 am #

    This is pretty incredible y’all. Excellent job!

    • James Koster
      mayo 3, 2018 at 11:03 am #

      Thanks Chris! 🙂

    • Love dhawan
      junio 29, 2018 at 11:08 pm #


    • John Kennedy
      junio 29, 2018 at 11:10 pm #

      Nyc Job, Also See This –

  2. Gaurav Tiwari
    mayo 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
    mayo 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
    mayo 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?

    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
      mayo 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
    mayo 10, 2018 at 6:04 am #


  6. Amy
    mayo 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
    mayo 11, 2018 at 8:14 pm #

    Great Blog…

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

    Love to read it. Well Written!

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

    Great Article,
    Keep up the good work. Thanks

  10. Forging Company India
    mayo 12, 2018 at 12:24 pm #

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

  11. TechTrendz
    mayo 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
    mayo 17, 2018 at 7:24 am #

    nice article ,

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

    This plugin is almost drag and drop. thanks for sharing

    • spoken course in Lahore
      mayo 17, 2018 at 9:51 pm #

      yes dear i also agree with you.

  14. spoken course in Lahore
    mayo 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
    British Education & Training Systems (BETS)

  15. Ashish
    mayo 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
    mayo 18, 2018 at 10:54 am #

    very good articals

  17. Hardeep Singh
    mayo 19, 2018 at 10:20 am #

    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.

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

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

  19. sowmya
    mayo 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
    mayo 22, 2018 at 6:19 pm #

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

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

    Great post. Thanks a lot

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

    nice article

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

    Thanks for this information.

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

    thank you for share with us.

  25. Rajasthan Government Jobs
    mayo 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
    mayo 24, 2018 at 3:24 pm #

    will give a try and see how it will work…

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

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

  28. Falak
    mayo 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
    mayo 27, 2018 at 3:54 pm #

    Realy nice blog post ever . great source of information

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

    Thanks for sharing such a useful information, James.

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

    Nice Article, thumbs up cheers!

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

    article very interesting and helpful.

    Thanks for sharing….

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

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

  34. anish
    junio 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
    junio 20, 2018 at 7:49 am #

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

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

    Nice !!!!

  37. Dudley Zoo
    junio 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
    junio 20, 2018 at 5:45 pm #

    Thanks for sharing.

  39. Shweta Dubey
    junio 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
    junio 25, 2018 at 9:19 pm #

    Nice Article…
    Really appreciate your work

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

    Superb article thanks for sharing awesome information

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

    wow nice

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

    nice work, Also See This –

  44. Get Grocery
    junio 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 :-

  45. Funny Messages For Friends
    junio 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..

  46. Nandani Priyadarshi
    junio 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
    julio 1, 2018 at 1:46 pm #

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

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

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

  49. Sabbir
    julio 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
    julio 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
    julio 2, 2018 at 8:32 am #

    please visit my Twitter Account

  52. sandy
    julio 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
    julio 2, 2018 at 11:14 am #

    nice website

  54. Lantau Tours Hong
    julio 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
    julio 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
    julio 3, 2018 at 5:34 am #

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

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

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

  58. Teeth Whitening
    julio 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
    julio 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
    julio 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
    julio 3, 2018 at 7:00 pm #

    Great Post thanks for sharing

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

    Have you checked new 2018-2019 back to school trends?

  63. Restaurant Coupons Deal
    julio 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
    julio 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
    julio 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
    julio 4, 2018 at 5:09 pm #

    Good post

  67. Norton Error 8504 104
    julio 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
    julio 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
    julio 5, 2018 at 7:39 am #

    Thank you for sharing your inspiring success story.

  70. Jenelia @ Top Home Zones
    julio 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
    julio 7, 2018 at 7:29 am #

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

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

    hoc cham soc da

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

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

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

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

  75. Shayamal Kumar
    julio 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
    julio 11, 2018 at 12:39 pm #

    Informative blog..!! Thanks for sharing.

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

    Well written informative blog. Good work, Keep writing.

  78. blackstonejamaican
    julio 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
    julio 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
    julio 12, 2018 at 12:06 pm #

    bids on used stuff

  81. Ant Travels
    julio 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
    julio 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
    julio 13, 2018 at 12:28 pm #

    thanks for sharing this good article, so useful article

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

    very good article,my website is about wordpress too

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

    its very good information about woocommerce, thank you

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

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

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

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


La plataforma de eCommerce con más opciones de personalización para crear tu negocio en línea.

  • Garantía de devolución de dinero de 30 días
  • Equipos de apoyo de todo el mundo
  • Pago en línea seguro
%d bloggers like this: