At least once per week, I receive a support ticket from someone asking me, “How do I enable Gutenberg for WooCommerce?” So, I decided it would be helpful to create a blog post with a video for everyone.
If you haven’t set up a shop on your website yet, check out my instructions on how to install WooCommerce here.
Enable The Gutenberg Editor In 5 Easy Steps
At the time of this post, WooCommerce has not issued an update to enable the Gutenberg editor when you are adding or editing your products. That means when you add or product to your WooCommerce store, you are working with the old classic WordPress editor.
For some of our customers with new blogs, the old classic editor can confuse them because all they have ever experienced is Gutenberg. Generally, most people find the Gutenberg editor more intuitive and functional.
1) Install The Code Snippets Plugin
Your first step is to install the Code Snippets Plugin.
Some people think they should add the code directly to their theme files, but I never want you to do that because if you update your theme or switch themes, the code will be lost.
When you add code to your website using the Code Snippets plugin, your code will always remain even if there are updates to your theme or you change themes.
2) Activate The Plugin
After you install the Code Snippets Plugin, you will activate it.
With the plugin activated, you will have a new option on the sidebar of your WordPress sidebar called “Snippets.”
3) Create a Code Snippet
In the video, you’ll see that all I need to do is add a new “snippet.” In the title, I name the snippet “Gutenberg for Woo Products.”
4) Add Code To The Snippet
You can copy the code in this blog post (down below) and then paste it into your “snippet.”
Update: WooCommerce 7.7.0 introduced a new template that is assigned to new products, and made the old code not work any longer. If you’ve followed this tutorial in the past, you’ll update your code with the new code below.
5) Save your changes
Now the easy part! All you have to do is save your changes and activate your snippet. Voila! You’re all set.
Hopefully, this blog post and video have removed any feelings of overwhelm when setting up a shop on your website with Woocommerce.
If you still have questions, then please join us in the Restored 316 Facebook community! We’re here every day, ready to help you!
Great, simple and to the point. Should work like a charm. Thanks!
thanks this Snippet code . it’s working.
You’re very welcome!
I got an error that says:
Snippet automatically deactivated due to an error on line 2:
Syntax error, unexpected ‘316’ (T_LNUMBER), expecting ‘(‘.
Uh oh! I just got that fixed, so the code there now will work for you!
Thank you so much. It worked for me.
I can’t edit the Product’s “Short Description” when this is enabled. Any luck fixing it?
I just did some testing, and it’s working for me! Did you replace the entire bit of code?
This code worked like a charm. Thank you so much. My question is, will that code still work when the WooCommerce update comes? I don’t want to break my website. I hope you can understand my worry.
It should still work fine with future Woo updates. If for some reason it stops working, I will update this post.
Thank you so much. This woks perfectly for me.
How do you change the location that gutenberg can edit? For me it seems that i can only add elements to the description. Anybody have an idea how to change that?
As of now, this only works for the main large description area and not the small description.
An excellent guide for WooCommerce users looking to enhance their product pages with the Gutenberg editor!
This gives me the Gutenberg editing experience, however the blocks only go into the standard “description” tab of the product template.
This is correct! The short description space can’t be turned into the GB editor.