How to enable WordPress block editor in WooCommerce product pages

Few weeks ago I had a client with quite specific WooCommerce needs. Almost every product had lots of visual information in the description, so the regular WYSIWYG editor would not make much sense there. If only there was a way to use block editor in WooCommerce product pages… And there is!

Today I’ll show you how to turn WooCommerce product description field to block editor field. So everything what’s in product description tab will be shown the same way as in regular WordPress posts and pages. And you won’t need any third party plugins for it. And if your WordPress theme is built properly, it should not break anything – it will work as expected.

How to replace WooCommerce product description field with block editor

By default WooCommerce product description field looks like a regular WYSIWYG field, like this:

When we’ll change Product description field to WordPress block editor, it will look like this:

Now you’ll be able to use all WordPress blocks in WooCommerce product pages. The same way as you use them in regular WordPress posts and pages.

So how do you enable block editor in WooCommerce? That’s an easy trick. Go to Appearance >> Theme File Editor (or Tools >> Theme File Editor) in WordPress admin panel.

Once you’re there, open functions.php file on the right side of the screen, and scroll to the bottom of it’s content.

Then add these lines of code:

// ENABLE WORDPRESS EDITOR IN WOOCOMMERCE start
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );
function activate_gutenberg_product( $can_edit, $post_type ) {
 if ( $post_type == 'product' ) { $can_edit = true; }
 return $can_edit;
}

add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );
function enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
// ENABLE WORDPRESS EDITOR IN WOOCOMMERCE end

It should look like that in your functions.php file:

Once you save changes by clicking Update File, your WooCommerce product page will work in block editor mode. And you don’t need to worry about the old products in your store. Their content will be automatically loaded to block editor.