Add Gutenberg To WooCommerce (PHP)

It’s astonishing that WooCommerce isn’t Gutenberg ready considering it’s a popular choice for having a shop on your website. Though WooCommerce is an excellent choice there are many reasons why you might want to consider alternative such as SureCart, which is also free.

You might find his article interesting why we switch over SureCart vs WooCommerce: Why We Finally Made the Switch (and Don’t Regret It One Bit)

Here’s the exact snippet we use on our websites, the instructions are below the snippet code.

Code Snippet

// Disable new WooCommerce product template (from Version 7.7.0)
function restored_reset_product_template($post_type_args) {
    if (array_key_exists('template', $post_type_args)) {
        unset($post_type_args['template']);
    }
    return $post_type_args;
}
add_filter('woocommerce_register_post_type_product', 'restored_reset_product_template');

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

add_filter('woocommerce_register_post_type_product', function( $args ) {
    unset( $args['template'] );
    return $args;
});

// Make small description bigger
add_action( 'wp_print_scripts', 'Change_CSS' );
function Change_CSS() {
	
	if( ! is_admin() ) { 
		return; 
	}
	
	?> <style>
	#excerpt_ifr{
  
  min-height: 500px;

}
	</style> <?php
}

Where to Add This Code

Here are two easy options:

Option 1: Install WPCode Lite Plugin

This is by far the safest method and is beginner friendly if you’re not used to editing theme files.

1. Search for WPCode Lite plugin in your website dashboard.
2. Install and activate the plugin.
3. Go to Snippets > Add New.
4. Give your snippet a name like “Enable Gutenberg Editor for Woocommerce.”
5. Paste the code above.
6. Choose “Run snippet everywhere”.
7. Choose PHP, not CSS or any other.
8. Save and activate.

✅ Done! Gutenberg is now enabled for your WooCommerce product pages.

Option 2: Functions.php

We don’t advise this option unless you’re a developer or if you feel comfortable editing theme files:

1. Open your functions.php file.
2. Paste the snippet at the bottom.
3. Save and upload if needed.

💡 Tip: Always use a child theme to avoid losing changes when your theme updates.

For a more informative article check out: ‘How to Add Gutenberg Editor to WooCommerce: A Friendly Guide Modernizing Your Shop Page!‘

NOTE: We use WPCode Lite because it’s more flexible than others, there’s no need to upgrade to pro unless you’re a developer, it offers many free snippets, can choose where to run it, won’t publish if the code is wrong so won’t break your site, PHP is included compared to others you have to buy the their pro, and best of all the free version can easily be downloaded from your WordPress Repository.