Gutenberg für WooCommerce

Activate the Gutenberg Editor for WooCommerce Products

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.

Leave a Comment

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

 

Scroll to Top