Discover how to leverage the Block Editor on WooCommerce product pages. The default classic WooCommerce product editor has limited functionality compared to the article editor. In this post, we’ll guide you through replacing it with the Gutenberg Editor.
Gutenberg Editor integrated into WordPress since version 5.0 allows users to create content blocks, such as text, images, videos, headers and other decorative elements, using a drag and drop interface. These content blocks can be customized and rearranged to create beautiful and professional website layouts.
How to Enable Gutenberg to Edit Your WooCommerce Product Description
You can copy the code snippet below to make the product description editor feature-rich, similar to the WordPress post editor.
// enable gutenberg for woocommerce
function 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', 'activate_gutenberg_product', 10, 2 );
// enable taxonomy fields for woocommerce with gutenberg on
function enable_taxonomy_rest( $args ) {
$args['show_in_rest'] = true;
return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );To be able to add the above code to your website, there are many ways, you can add it to your theme’s functions.php. Or you can also use the Code Snippets plugin to insert code that looks like this:
After installing and activating the Code Snippets plugin, select “Add new” and enter the code. Then, save the file and test it. You will now have a Gutenberg Editor on your add product page, which enables you to create professional articles and products and customize them to your liking with ease.
We explained how to use the Block Editor on WooCommerce product pages to function like the article editor. With this change, you can freely insert images, videos, and descriptions for your products without limitations.
