Activate Gutenberg Editor for WooCommerce Product Pages

Continue to share wordpress website builder tutorial. By default WooCommerce product pages are using the classic editor style, so that compatibility is better, easier to use, the user almost no difficulty in getting started. But for users who are used to the Gutenberg editor, the classic editor style is still too simple, there is no way to create a more complex and beautiful product detail page.

To create more beautiful product detail pages we can generally use the Elementor Pro editor, which allows for great customization of product page templates and detail content, as shown above. However, Elementor Pro editor requires payment, so if you don’t need to customize the page templates, it seems a bit of a waste to use it.

So so next I’m sharing a compromise – use Gutenberg editor to edit WooCommerce product detail pages, so you don’t need additional plugins, just activate Gutenberg editor for WooCommerce product pages. After activation as shown in the image above, the product page can be edited using Gutenberg blocks to add richer page effects.

The code and methodology is shared below.

Step 1: Copy the following code

// WooCommerce Product Edit Page Activates Gutenberg Editor

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

Step 2: Add the code to the functions.php file

Add the above code before the wordpress website builder theme functions.php file to take effect. It is recommended that you add to the sub-theme or use Code Snippets plugin to add, so that the code effect will not be affected by the theme update.

Summary

In fact, the default use of the classic editor for WooCommerce product pages is certainly some consideration, and the method of activating the Gutenberg editor for WooCommerce product pages is not complicated, why is there so little sharing online? Why not many people use it? Because the default editor is more stable, and for users with more products, it will be easier and more efficient to use the classic editor to edit the products. So, please consider this method before you use it.

In addition, Elementor can also edit WooCommerce product pages, but after the number of products, the use of Elementor to publish products, if a little inefficient, and will affect the performance of the site, so I personally do not recommend oh.