Enable The Gutenberg Editor On WooCommerce Product Pages In 3 Easy Steps

Share this post or save it for later!

Building an online shop on your WordPress website and wondering how you can use Gutenberg or Kadence blocks with WooCommerce? It’s actually really simple. Follow this easy 3-step tutorial to learn how to enable the Gutenberg editor on your WooCommerce product pages.

The WooCommerce Product Page Dilemma

Out of the box, WooCommerce comes with the default editor (also called the classic WordPress editor) for all single product descriptions. This can be really limiting design-wise. If you want the ability to have more flexibility and control over the design of your WooCommerce product pages using the block editor, you’ll need to add a little bit of custom code.

If messing with code freaks you out because you lack basic coding knowledge, DON’T WORRY! You don’t have to be a coding wizard. I’ll guide you click-by-click through all of the steps. It’s really easy; promise!

📌 Before we begin…this tutorial assumes you already have the WooCommerce plugin installed and activated on your website. If you do not, please ensure that’s completed before moving on to the next part of this tutorial.

Step 1. Install & Activate The Code Snippets Plugin

The advantage of implementing this code via a plugin is that it will continue to work even if you change themes in the future (as opposed to adding it directly to your WordPress theme files).

So if you don’t already have the WordPress plugin installed, follow these simple steps:

1. Go to your WordPress dashboard
2. Navigate to Plugins
3. Click Add New on the plugins page
4. Search for the Code Snippets plugin
5. Click Install Now
6. Click Activate. This will create a new option called ‘Snippets’ in your WordPress left sidebar.

See. Look how easy that was! Let’s move on to the next step.

Step 2. Add The PHP Code Snippet

Next, I will show you how to copy and paste the code snippet (below) to our newly installed third-party plugin. Let me walk you through it:

1. Hover over Snippets in the WordPress sidebar and click on All Snippets
2. Click on Add New
3. Enter a Snippet name. I like to call mine Woo Gutenberg Editor, but feel free to give it a name that you can easily reference in the future.
4. Copy the code below and paste it into the Code section in the Snippet.

// enable gutenberg editor for woocommerce
function activate_gutenberg_product( $can_edit, $post_type ) {
 if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

// enable taxonomy fields for woocommerce with gutenberg on
function enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );

5. Make sure the option ‘Run snippet everywhere‘ is selected just below the code you just added

6. OPTIONAL: You can add a description or tag if you’re trying to keep multiple code snippets organized on your site. I’m leaving the description and tags fields blank for now, but feel free to fill in these fields.
7. Click Save Changes and Activate

The hard part is over… and let’s be real, that wasn’t too bad. Let’s finish the final step.

Step 3. Validate/ Check Your Product Page

The last thing you should do is validate that the code you just added worked successfully.

1. Navigate to Products
2. Click on an existing product or add a new one
3. You should see the Gutenberg blocks editor on your WooCommerce Product descriptions! 🥳

If you had products that were built with the classic editor, you may need to click the convert the blocks button on your previously added content. The content should convert seamlessly. Then you can continue adding new blocks above or below that content the same way you do with your WordPress blog posts or pages!

Frequently Asked Questions

Check out these frequently asked questions if you’re stuck or need some troubleshooting help.

1. Can’t I add this code to my theme functions file?

Technically, yes. However, it’s not something I recommend because your theme functions file will most likely be overwritten anytime you update the theme. It’s also much easier to break your WordPress site when you edit this file manually.

2. How can I get more creative designs on my WooCommerce site?

A great way to get well-designed product pages is to extend the design and functionality of Gutenberg with any of the tools in the Kadence Product Suite.

• Check out the Kadence Blocks plugin, it’s free!
• They also have more cool features in the Kadence Blocks Pro plugin. I use the entire bundle for my business and highly recommend it to my clients!
• If you really want to take your online store to the next level, you should look into Kadence Shop Kit!

I hope this tutorial was useful and helped you successfully enable the Gutenberg editor on your WooCommerce product pages. If you have suggestions for other tutorials I can create, please drop your suggestion here!

Share this post or save it for later!