WooCommerce and Gutenberg.. What will happen when Gutenberg Editor gets introduced to your WooCommerce site in WordPress 5.0? Will it be Armageddon and will all product fields below the description and title field break? Do you need to deactivate Gutenberg just to keep your ecommerce business up and running?

What is Gutenberg?

Gutenberg is the new WordPress Editor. We wrote about it before at the beginning of this year actually. It will allow you to create content for posts, pages and custom post types just like WooCommerce Products using blocks. Here is a screenshot of what you see looking for blocks:

 

And here one with some text added:

Think of it as some of the Page Builders out there like Visual Composer, Beaver Builder or Divi. What is more, it will also make these options available in the customizer and perhaps frontend in the future as well.

Custom Fields and Gutenberg

As all is still under development it tends to be foggy sometimes and a lot of developers and end users are freaking out about it as it might break the way meta boxes / custom fields are used now. WooCommerce relies heavily on custom fields to add product data. And these fields may not work properly, or be moved to the new sidebar and so on. When you currently run the Gutenberg plugin to check you see it in action on a product page the WooCommerce custom fields are below it.

But it is going to be way more integrated. Either they will be show below the block in a different way, go to the sidebar or they are going to come up with another solution.

Product Blocks

I am all for it and the sneak preview WooCommerce has shown looks very promising. And WooCommerce is working on product blocks already in their repo using a separate branch (code to be merged once done).

I installed the product blocks branch on my local WooCommerce Gutenberg Laravel Valet site and I can already see we can add a product block with ease inside a post:

Product Search Inside Woo Block

I just cannot search for my existing dummy products yet.  There seems to be a 404 issue

https://woo-guteberg.dev/index.php?rest_route=/wc/v2/products/?search=v

Here the no products found message:

So I can’t go and add a product yet, but I can see we are closer than I thought and that is nice to see.

It is work in progress and perhaps my setup needs some REST API changes..? But the WooCommerce REST API is turned on though..

 

Well, that is something to try another time. Just like add products in x numbers and columns as Woo demoed. That I seem to not be able to do with this test branch yet.

The Future of WooCommerce with Gutenberg

I must say I am really exciting. I always found most page builder lacking a lot. Especially in the WooCommerce field. I want to be able to change the product page layout around. I want to be able to decide where the

• product gallery,
• description
• cart button,
• price and
• other tabs with data

 

will be added. And I am positive that we will. Do see great options for the category or shop page in progress already. Rows and columns can be decided and hopefully thumbnail sizes in the future too. As for product page changes, well I expect to be able to move the mentioned elements around and WooCommerce did mention these as possibilities as well.

I expect to see way more in the upcoming weeks and months! Can’t say I am too worried. Big changes yes, but changes for the better to keep WordPress ahead of the game and compete with the likes of Shopify and Magento. And for WordPress to show others like Wix, Squarespace, Weebly and so on who’s boss. Exciting times!