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.