Gutenberg für WooCommerce

Activate the Gutenberg Editor for WooCommerce Products

Update:WordPress

The Gutenberg Block Editor can also be used for the WooCommerce product description. Unfortunately not as standard, but with a small piece of 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:

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

// enable taxonomy fields for woocommerce with gutenberg on
function j0e_enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'j0e_enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'j0e_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 -
SEO, Blogger, Marketer and proud Father

Leave a Reply

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

 

22 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

  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

    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

    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

    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