Want to use the Gutenberg block editor for WooCommerce products? This guide shows you how. Add simple code to your functions.php file and start creating beautiful product descriptions with blocks.

Why Use Gutenberg for WooCommerce?

The Gutenberg block editor changed how we create content in WordPress. It offers blocks for paragraphs, images, columns, and more. The drag-and-drop interface makes layout creation easy. But WooCommerce products do not use Gutenberg by default.

WooCommerce disabled Gutenberg for products in version 3.4.1. The team wanted to ensure stability before enabling it. However, many store owners want the block editor’s features for their products. Rich product descriptions with images, videos, and tables can boost sales.

With Gutenberg enabled, you can:

  • Create multi-column layouts for product details
  • Add image galleries with captions
  • Embed videos to show products in action
  • Use tables for specifications and comparisons
  • Add buttons and call-to-action blocks
  • Create accordion sections for FAQs

Before You Start

You need a few things before enabling Gutenberg for WooCommerce products. First, make sure you run WordPress 5.0 or higher. The block editor is built into WordPress core now. Second, update WooCommerce to the latest version. Third, use a child theme so your changes survive theme updates.

If you do not have a child theme, you can still add the code. Just know that parent theme updates will remove your changes. You will need to add the code again after each update.

Also back up your site before making changes. This protects you if something goes wrong. You can restore the backup and try again.

Method 1: Enable Gutenberg for WordPress 5.0+

This method works for WordPress 5.0 and all newer versions. It uses the native block editor filter that WordPress provides.

Open your theme’s functions.php file. Go to Appearance > Theme Editor in your WordPress dashboard. Select your child theme if you have one. Find functions.php in the file list and click to open it.

Add this code at the bottom of the file:

/**
 * Enable Gutenberg block editor for WooCommerce products
 * Works with WordPress 5.0 and newer
 */
function wplook_activate_gutenberg_products( $can_edit, $post_type ) {
    if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'wplook_activate_gutenberg_products', 10, 2 );

Click “Update File” to save your changes. Now go to Products in your dashboard and edit any product. You should see the Gutenberg block editor instead of the classic editor.

Method 2: Legacy Code for Older Gutenberg Plugin

If you still use the standalone Gutenberg plugin on WordPress 4.x, use this code instead. This targets the plugin’s filter rather than WordPress core.

/**
 * Enable Gutenberg for WooCommerce products
 * For WordPress 4.x with Gutenberg plugin
 */
function wplook_activate_gutenberg_products( $can_edit, $post_type ) {
    if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'gutenberg_can_edit_post_type', 'wplook_activate_gutenberg_products', 10, 2 );

The only difference is the filter name. Use gutenberg_can_edit_post_type for the plugin or use_block_editor_for_post_type for WordPress core.

Understanding the Code

Let us break down how this code works. The function receives two parameters. The first is $can_edit, a boolean that says if the block editor is allowed. The second is $post_type, the type of content being edited.

We check if the post type is “product”. This is WooCommerce’s custom post type for store items. If it matches, we set $can_edit to true. This tells WordPress to use the block editor.

We return the value at the end. For other post types, nothing changes. They keep their original editor setting.

Enabling Gutenberg for Other Post Types

You can extend this code for other custom post types. Maybe you want Gutenberg for orders, subscriptions, or custom types from other plugins.

Here is an expanded version:

/**
 * Enable Gutenberg for multiple post types
 */
function wplook_enable_gutenberg_post_types( $can_edit, $post_type ) {
    $allowed_types = array( 'product', 'shop_order', 'your_custom_type' );

    if ( in_array( $post_type, $allowed_types ) ) {
        $can_edit = true;
    }

    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'wplook_enable_gutenberg_post_types', 10, 2 );

Add your post type slugs to the array. The code checks if the current type is in the list and enables Gutenberg if it is.

Using Blocks in Product Descriptions

Now that Gutenberg is enabled, learn to use it well. Here are tips for creating better product descriptions.

Use columns for layout: Split your description into sections. Put features on one side and benefits on the other. This makes content easier to scan.

Add product galleries: The gallery block lets you show multiple images. Customers can see products from different angles without scrolling.

Embed videos: Video blocks work with YouTube and Vimeo. Show your product in action. Videos increase conversion rates significantly.

Create specification tables: The table block is perfect for specs. List dimensions, materials, and other details in a clean format.

Use heading hierarchy: Structure your description with H2 and H3 headings. This helps SEO and makes content readable.

Best Blocks for WooCommerce Products

Not all blocks make sense for products. Here are the most useful ones:

  • Paragraph – Basic text for descriptions
  • Heading – Section titles and organization
  • List – Bullet points for features
  • Image – Additional product photos
  • Gallery – Multiple images in grid
  • Video – YouTube or Vimeo embeds
  • Table – Specifications and comparisons
  • Columns – Side-by-side layouts
  • Quote – Customer testimonials
  • Separator – Visual section breaks

Troubleshooting Common Issues

Sometimes things do not work as expected. Here are common problems and fixes.

Block editor still not showing: Clear your browser cache. Also clear any WordPress caching plugins. The old editor might be cached.

Code not saving: Your hosting might block file edits. Check your permissions or contact your host. You can also use FTP to add the code.

Classic Editor plugin conflict: If you have the Classic Editor plugin, it overrides Gutenberg. Go to Settings > Writing and set “Default editor” to Block Editor. Or allow users to switch between editors.

Theme compatibility issues: Some older WooCommerce themes may have styling issues with block content. Check if your theme has updates. Consider a more modern theme if problems persist.

Product data tabs missing: The block editor only affects the main description. Product data (price, inventory, shipping) uses its own interface below the editor. These should still appear as normal.

Disabling Gutenberg Later

If you decide the block editor is not right for your products, you can disable it. Simply remove the code you added to functions.php. Or change true to false in the function.

Your existing product content will still work. WordPress converts block content to classic editor format. You may see some formatting differences, but nothing breaks.

WooCommerce Blocks Plugin

WooCommerce also offers a Blocks plugin. This adds special blocks for stores: product grids, featured products, cart, checkout, and more. These work on regular pages and posts.

The WooCommerce Blocks plugin is different from enabling Gutenberg for products. You can use both together. The plugin adds store functionality to any page. The code change lets you edit product descriptions with blocks.

Frequently Asked Questions

Is it safe to enable Gutenberg for products?

Yes. The block editor is stable and widely used. WooCommerce disabled it by default for compatibility, not safety. Many stores use it without issues. Just test on a staging site first if you have concerns.

Will my existing products break?

No. Your existing product content stays the same. The block editor can display classic content. You can edit old products in blocks or leave them as they are.

Does this affect product variations?

No. Product variations, attributes, and other WooCommerce data use their own interface. The block editor only changes how you write the main product description.

Can I use third-party block plugins?

Yes. Any Gutenberg block plugin works with products once you enable the editor. Plugins like Stackable, Kadence Blocks, or Spectra add more design options.

Will this slow down my store?

The block editor itself does not slow your store. But complex block layouts with many images can increase page load time. Optimize images and use caching to maintain speed.

Conclusion

Enabling Gutenberg for WooCommerce products is simple. Add one function to your theme and start using blocks. The block editor offers better design options for product descriptions. Rich layouts with images, videos, and tables can increase conversions.

Use the code for WordPress 5.0+ in most cases. Back up your site first and test on a staging environment. If you run into issues, the troubleshooting section covers common problems.

For more WooCommerce tips, read our comparison of Shopify vs WooCommerce. Learn more about WordPress in our guide on how to make a website.

If you are a non-technical user, our support team can help. Order a small job, and we will make this change for you in less than 24 hours.

,