How To Enable the Gutenberg Editor On Your Product Pages for Woocommerce

If you’ve ever opened a WooCommerce product page and wondered where the block editor went, you’re not alone. By default, WooCommerce doesn’t enable the Gutenberg editor on product pages, which means you’re stuck with the classic editor while the rest of your site gets to build with blocks. Frustrating, right? The good news is there’s a simple fix, and you can get the Gutenberg editor working on your WooCommerce product pages in just five steps. Let’s get into it.

How to Enable the Gutenberg Editor in WooCommerce

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 and it’s not nearly as customizable as the rest of your website.

Step 1: Install and Activate the WPCode Plugin

First, head to your WordPress dashboard and go to Plugins > Add New. Search for “WP Code” in the search bar in the top right. When it appears in the results, click Install Now, and then click Activate once it finishes installing.

Once the plugin is activated, you’ll see a new option in the left sidebar of your WordPress dashboard called Code Snippets. That’s where we’re headed next.

Step 2: Open Code Snippets

Click on Code Snippets in your dashboard sidebar. You’ll notice that WPCode comes pre-loaded with some automatic codes, but don’t worry about those — they’re all inactive by default, so nothing turns on automatically just from installing the plugin.

Step 3: Add a New Custom Snippet

At the top of the page, click Add New and then select Add Your Custom Code (New Snippet). When the pop-up appears, scroll to the bottom and make sure you select PHP Snippet as the code type. This step is important — if you accidentally select HTML or another type, the code won’t work correctly. If you do select the wrong type, you can change it from the dropdown in the top right corner of the editor.

Step 4: Name Your Snippet and Add the Code

Give your snippet a name that clearly describes what it does so you can find it easily later. Something like “Enables Gutenberg Editor for WooCommerce” works great.

Next, copy the code provided below and paste it into the snippet editor.

Note: WooCommerce 7.7.0 introduced a template update that broke the older version of this code. If you followed an earlier version of this tutorial, replace your old code with the updated snippet below. The new code works with all current versions of WooCommerce.

// Disable new WooCommerce product template (from Version 7.7.0)
function restored_reset_product_template($post_type_args) {
    if (array_key_exists('template', $post_type_args)) {
        unset($post_type_args['template']);
    }
    return $post_type_args;
}
add_filter('woocommerce_register_post_type_product', 'restored_reset_product_template');

// Enable Gutenberg editor for WooCommerce
function restored_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', 'restored_activate_gutenberg_product', 10, 2);

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

Step 5: Activate and Save Your Snippet

Before you hit save, flip the toggle in the top right corner of the editor to set the snippet to Active. If you save it while it’s still set to Inactive, the code won’t do anything. Once the toggle is flipped on, go ahead and click Save Snippet.

That’s it. Now when you go to Products and click Add New Product, you’ll see the full Gutenberg block editor — the same one you use when editing your blog posts and pages. No more classic editor on your product pages.

Frequently Asked Questions

Share This Post