How to Use the Block Editor in WooCommerce Product Pages

You’ll notice that when you activate WooCommerce in your WordPress site, that editing your Product page can be done with the Classic Editor. This can be a bit difficult and more tedious with some design limitations, so some people prefer to use the WordPress Block Editor. 

To add the Block Editor to WooCommerce, first you will need to install and activate a third party plugin called Code Snippets. This plugin can help you run code snippets on your site.

You will need this plugin in order to add the Block Editor to WooCommerce because you will need to input a code snippet that enables it. 

Once you’ve activated Code Snippets, you will see a Snippets tab on the sidebar of your WordPress dashboard. Just click Add New, and a new page will open wherein you can input the title of your snippet and the code itself.

You can input the title Block Editor and then input this code snippet in the empty field below: 

// 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' );

Afterwards, just click Save Changes and Activate. 

Now, if you navigate to the WooCommerce Product pages, you can now edit them using the Block Editor. 🎉