Gutenberg für WooCommerce

Activate the Gutenberg Editor for WooCommerce Products

Update:

The Gutenberg Block Editor can also be used for the WooCommerce product description. Unfortunately not as standard, but with a small piece of code.

Update: With WooCommerce version 7.7.0 a template was assigned to the products which made the old code ineffective. Please use the new code.

Here I’ll show you two ways how you can use the code to activate the WordPress Block Editor.

Attention: Make sure to make a backup before! The smallest errors can destroy your website.

The code

This is the code snippet so that Gutenberg can also be used for WooCommerce products:

// Disable new WooCommerce product template (from Version 7.7.0)
function bp_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', 'bp_reset_product_template');

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

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

The script as gist: https://gist.github.com/gmmedia/b895225d3eefb42bdfc573836b776b86

Plugin

For most user, using a plugin is the better method. In the WordPress Admin, install the Code Snippets plugin.

Gutenberg for WooCommerce - Insert code in Code Snippets plugin
Gutenberg for WooCommerce – Insert code in Code Snippets plugin

Five steps to activate the Gutenberg editor for WooCommerce product descriptions.

  1. Add new snippet
  2. Enter a descriptive name for the snippet
  3. Paste the code from above into the code area
  4. Select the “Run in admin area only” option
  5. Save and activate

Alternatively, you can of course use any other WordPress plugin. I use Advanced Scripts:

Advanced Scripts plugin
Advanced Scripts plugin

The process is the same, just visually different. You can find the tool after installing it under Tools > Advanced Scripts.

functions.php

Insert the code into the functions.php file
Insert the code into the functions.php file

Experienced users can also save the code directly in the functions.php of their child theme. Either directly in the WordPress Admin under design > theme editor > functions.php, or with a text editor and FTP.

Gutenberg for WooCommerce

Even if WooCommerce is updating slow at times, modern WordPress features can be used with a little help.

Avatar für Jochen Gererstorfer
Jochen Gererstorfer

More about Jochen Gererstorfer
Jochen Gererstorfer is an expert author and marketing manager specializing in WordPress, SEO and online marketing. He has been in the industry for over 20 years and has extensive experience in content creation and marketing strategy development. As a content marketing expert, he operates and manages numerous online publications as editor-in-chief or in a consulting capacity. He is known for his practical and easy-to-understand articles.
SEO, Blogger, Marketer and proud Father

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

 

28 Comments

  1. Jochen, this is awesome. Thanks for sharing it. I tried it on my Oxygen Builder test site and it’s working perfectly.

    Reply

  2. Hi Jochen,

    One issue I have had with this code is it breaks the ability to toggle “enable reviews” on and off under Product Data > advanced. It’s strange because all other meta fields I tested worked but not reviews.

    Try saving it after turning it on or off and refresh the edit product screen and you will see it has reverted to before you made the change.

    I tested this on a couple of websites. Any ideas what could be different about that one meta field/checkbox?

    Reply

    1. Hey David,
      I don’t have a toggle to enable reviews. Maybe you use a plugin for that?

      Jochen

    2. Hi,

      I can’t add reviews to products either.
      I get errors in the console:

      Block “core/paragraph” is already registered.
      Block “core/image” is already registered.
      Block “core/heading” is already registered.
      Block “core/list” is already registered.
      Block “core/list-item” is already registered.

  3. Thank you for this code. It’s working fine but this does not activate Gutenberg in product short description! Can you please tell how do I activate Gutenberg in Woocommerce product short description?
    Thank you for your support.

    Reply

  4. This code doesn’t seem to work anymore?

    Reply

    2. Yep got it working now 👍
      The plugin “Gutenberg Blocks and Template Library by Neve theme” was affecting it from working properly.

  5. Brilliant! It works well. Do you know of any way to get the Gutenberg editor working for the product category pages.

    Reply

    1. Hey Oliver!
      Unfortunately, there is currently no way to use Gutenberg for the categories.

      Jochen

    2. Hi Olivier, I am using this code from Jochen on products pages for a while now. Regarding categories, there is nothing easy to really make it your own in this world. Personally I could achieve few days ago some nice category pages with Oxygen builder and oxyninja. Took me some times to understand the abc but it is worth.

  6. Hello Jochen,

    I am facing an issue with this code, After Adding this in the Code snippet, When I am saving anything it says Publishing failed. The response is not a valid JSON response.

    This is not just for Single Product Page but also for Normal Pages.

    I am using Kadence Theme + Kadence Blocks Pro + Kadence Shop Kit 2.0

    Reply

    1. Hey Rahul,
      the code is working on my end. I have it active on 2 customer shops.

      Shop Kit 2.0 is still in beta. Maybe there is a problem.

      Jochen

    1. Hey Oleg,
      thank you for the hint. But very steep prices, for that simple plugin.

      Jochen

    2. No need for a plugin. This code works perfectly with Code Snippets. If any problem on front side, check your css files.

  8. This is a fantastic help! My SEO plugins were not showing any options under the classic editor within WooCommerce. Switching to the Gutenberg editor solved that issue right away. This code is easy to implement with code snippets as well. Thank you so much!

    Reply

  12. Thanks for this, the one issue I am having is that the Gutenberg tool bar or menu at the top is not displaying anything. Luckily I have used short cut keys to save etc. But there is just a blank bar with Activity at the top right and Edit Product on the top left.

    Reply

    1. Warren, I also had this issue at one time.
      Are you on the latest WooCommerce version?

    2. Yes we are on the latest version of WooCommerce. We are running the Astro Pro theme too.