If you’ve decided to use WooCommerce for your shop on your website, you’re definitely not alone wondering how to add Gutenberg editor to WooCommerce. Or, if you’ve ever stared at your store and thought, “I wish I could just use the block editor here…”—you’re not alone.

We get bombarded with the question, so it’s only natural we want to show you how easy it is to add it.

What Is The Gutenberg Editor?

The Gutenberg Editor (a.k.a. the WordPress Block Editor) has completely transformed the way we build pages and posts. It’s visual, intuitive, and seriously powerful. But when it comes to WooCommerce, things get a little… old school. Out of the box, product pages are mostly controlled by templates and shortcodes, leaving many shop owners scratching their heads, and wondering why it’s never been modernized.

Here’s the good news: you can bring the magic of Gutenberg into your WooCommerce store pages with or without coding.

The good news is, it’s not even that hard. In this post, we’ll walk you through how to set it up and use it to create beautiful, flexible shop pages that feel modern and work like a charm—and, we promise, no developer required!

Whether you’re a DIY website builder, a small biz owner, or someone who just wants their shop to shine, this guide is for you.

Why Even Bother Using Gutenberg with WooCommerce?

Let’s be real: WooCommerce is incredibly powerful, but it wasn’t exactly designed with visual customization in mind. Most of the layout is controlled by theme templates and PHP files, which can feel limiting if you’re more of a drag-and-drop kind of person.

👉 Curious why we recommend SureCart instead of WooCommerce? Check out ScalaHosting Review 2025 – What Makes It a Hidden Gem & Why We Finally Switched Over!

Gutenberg, on the other hand, is like playing with digital LEGO bricks. You get blocks for text, images, buttons, columns, testimonials, and so much more. Want to create a fun layout with product features, FAQs, videos, and a call-to-action button all on one product page? Gutenberg makes it happen—no code needed.

👉 It also gets even better if you use Kadence, with all their fancy blocks, it’s a total game changer. Check out Ultimate Kadence Theme Review 2025: 17+ Best Features That Make It a Top Pick for Newbies & Pros!

Why Add Gutenberg Editor to WooCommerce?

The Catch: WooCommerce Isn’t Fully Gutenberg-Ready (Yet)

Here’s where things get a bit tricky when you want to add Gutenberg Editor to WooCommerce:

By default, WooCommerce still uses the Classic Editor for product pages. There’s no Gutenberg layout option for the product page content area or shop layout unless you’re using a block-based theme or third-party solutions.

So, how do we fix that?

Spoiler: there are plugins. Really good ones.

The Core Ways to Use Gutenberg with WooCommerce

Let’s walk through a few different methods, from beginner-friendly to advanced. You can choose what fits your skill level and comfort.

Method 1: Use the WooCommerce Blocks Plugin

This is the official reason why you should add Gutenberg Editor to WooCommerce:

✅ Pros:

❌ Cons:

How to Use It:

1. Install the WooCommerce Blocks plugin from the WordPress repo.
2. Create a new page in WordPress using Gutenberg.
3. Add any of the WooCommerce blocks, like:
   • All Products
   • Featured Product
   • Product Categories
   • Filter by Price, Attribute, etc.
4. Customize the layout however you like.
5. Set this page as your shop page under WooCommerce > Settings > Products > Shop page.

This is ideal for customizing your Shop or Category pages using Gutenberg, but not individual product pages.

Method 2: Build Custom Product Pages Using Reusable Blocks

Here’s a creative workaround for designing individual product pages with Gutenberg—especially if you want storytelling-style product pages.

How it Works:

1. Create a regular WordPress page (or use a custom post type).
2. Use Gutenberg to design it however you want.
3. Insert WooCommerce shortcodes (like add_to_cart, product, etc.) where needed.
4. Use reusable blocks or block patterns for consistency across pages.

Example:

Imagine you sell handmade candles. Instead of the default layout, your custom product page could look like this:

Does this take more time? Yes. But it gives you total freedom—and in a competitive online market, that uniqueness can make all the difference.

Would this work? Yes, it does! We’ve used it ourselves. However, it can get a bit messy—you’ll still need to set up your pricing in WooCommerce and then create a redirect to your custom WordPress page.

Method 4: Use a Block-Based Theme with Full Site Editing (FSE)

Gutenberg can be used with WooCommerce when utilizing a Full Site Editing (FSE) WordPress theme. If you’re starting fresh or open to switching themes, this is by far the most future-proof method.

Block themes like Storefront (FSE), Björk, Twenty Twenty-Three, or Neve FSE support full site editing. This means you can use Gutenberg to control headers, footers, templates, and even single product layouts.

FSE themes are not the easiest to design and could soak up a lot of your time, especially if you’re not a professional designer. It’s like starting from scratch with no base or template, so if you’re not skilled in this area, it’s better to skip it.

Kadence and many other similar themes with block editing emulate FSE capabilities. Currently, Kadence isn’t FSE; however, an FSE theme is in the making. Curious what FSE entails and Kadence’s FSE plans? Check out Ultimate Kadence Theme Review 2025: 17+ Best Features That Make It a Top Pick for Newbies & Pros!

What You’ll Need:

The Big Win:

You can design custom product templates that apply across all products—visually, with blocks.

No messing with PHP. Just blocks.

Method 5: Use Page Builders That Embrace Gutenberg (Hybrid Option)

Some advanced plugins combine the flexibility of page builders with Gutenberg. Though block themes such as Kadence, GenerateBlocks, Spectra (from Astra), and Kadence are great hybrid approaches, code still needs to be added for Gutenberg to function on WooCommerce.

👉 Curious why Kadence is a total game changer? Check out Ultimate Kadence Theme Review 2025: 17+ Best Features That Make It a Top Pick for Newbies & Pros!

add Gutenberg Editor to WooCommerce Using Code

If you’re the kind of person who likes to keep things lean and light—aka, fewer plugins—then you’ll be happy to know that enabling Gutenberg for WooCommerce products can be done with just a few lines of code. No need to clutter your site with yet another plugin.

You know that we’re crazy about keeping plugins to a minimum—and if something can be achieved with a small snippet of code instead, it’s definitely worth considering. These days, adding code is easier than ever, especially since you no longer have to modify your theme files directly.

Why Add Code Instead of a Plugin?

It’s simple: fewer plugins mean better performance and less maintenance. As said, you’re not editing core theme files anymore—just dropping safe snippets into a code manager. Totally beginner-friendly and a game-changer.

Another reason is adding the code directly to your theme files may get lost because of updates or changing themes. When you add code to a snippet plugin, your code will always stay there even there are updates or you change theme.

Code to Enable Gutenberg:

Here’s the exact snippet we use on one of our websites:

// 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
}

This tells WordPress to allow the block editor (aka Gutenberg) on WooCommerce product pages, which normally default to the classic editor.

Ever thought the small description was annoyingly too small? You’re not the only one, the last code ‘// Make small description bigger’ enlargers the box—big yeah! You can of course remove this if you prefer it small.

Where to Add This Code:

You’ve got a few 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. We prefer WPCode Lite because it’s more flexible than others, no need to upgrade to pro unless you’re a developer, and they offer many free snippets.

1. Search for WPCode Lite plugin in your website dashboard.
2. Install the it.
3. Go to Snippets > Add New.
4. Give your snippet a name like “Enable Gutenberg 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.

🗣 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.

Converting Existing Content To Gutenberg:

If you already have products in your WooCommerce store, switching to the block editor won’t automatically convert your existing content. Instead, you’ll need to manually update each product description to take full advantage of the block editor’s features.

When you open an existing product, you’ll notice the description appears inside a “Classic” block—this simply means it’s still using the older editor format. No worries though! Just click anywhere inside the Classic block, and a small toolbar will appear with the option to “Convert to Blocks.”

Once you click that, your content will be transformed into individual Gutenberg blocks, ready for editing. From there, you can spruce things up—reorganize sections, add headings, images, buttons, or anything else the block editor makes easy.

✨ And don’t worry—the switchover won’t break your product pages on the front end. Your content will continue to display as expected, and you’ll just have more flexibility behind the scenes for editing and improving.

Just don’t forget to hit Update when you’re done making changes!

What Happens Next?

Once the code is in place:

If it still shows the classic editor, try clearing your cache on your website, we recommend FlyingPress, then refresh your browser. You may need to cache your PC as well.

Need More Control?

If you only want Gutenberg on new products or specific user roles, the code can be modified slightly. But for most folks, this simple snippet does the job beautifully.

Best Practices When Using Gutenberg with WooCommerce

Here are a few friendly pointers we’ve picked up not just for WooCommerce, but for your posts and pages as well:

1. Don’t Overdo It:

It’s tempting to add every block under the sun. But clean, focused product pages convert better. Use spacing and headings wisely.

2. Make Use of Block Patterns:

These are like pre-designed sections you can drop in and tweak. Create your own or use ones from your theme or plugins.

Need more block collections? Check out our Glamsy Cloud Collections, they’ll give more design options to excel your website and business faster.

3. Preview on Mobile:

What looks amazing on desktop can feel crammed on a phone. Always preview before publishing.

4. Consider Performance:

Some block plugins add bloat. Use a caching plugin like FlyingPress or Perfmatters to keep things fast and smooth.

5. Test Your Layouts:

Before going live, ask a few friends or past customers to browse your pages or site. You’d be surprised what they notice that you didn’t. We find going back to the page a day or two later with fresh eyes and clear head helps pick errors up that we would’ve otherwise missed on the day the article was created.

Real Talk: Is It Worth the Effort?

Honestly? Yes—especially if your business depends on making a great first impression. Default WooCommerce layouts get the job done, but they often feel generic. With Gutenberg your shop can reflect your brand’s personality, values, and creativity.

If you use Kadence, it’ll open up a new world of options, especially going pro.

And the best part? It grows with you.

As new blocks, themes, and tools emerge, your store can evolve without needing to hire a developer every time you want a change. That’s freedom.

Final Thoughts: Make WooCommerce Yours

At the end of the day, your WooCommerce store is your online storefront. You wouldn’t settle for bare drywall and mismatched shelves in a physical shop, right? So, why settle for default layouts in your digital one?

When you add Gutenberg Editor to WooCommerce, it opens the door to a more visual, personal, and engaging eCommerce experience. Whether you’re designing custom product pages, leveling up your homepage, or just adding a sprinkle of flair to your shop layout—it’s all within reach.

Start small. Experiment. Have fun. And remember: you’ve got a friend in Gutenberg now.