Enable Gutenberg in WooCommerce

I’d file this one in as a “hot tip” as the kids call it. I do a lot of WordPress work as my day job, and I come across interesting fixes all the time. Usually, these fixes have been found by other developers a hundred times over and don’t need any more explaining. In this case, I didn’t find much information out there that properly demonstrated this fix or at least compiled it all into one comprehensive list.

As of WordPress version 5.0, the new block editor (aka Gutenberg) has become the norm. Though many traditional WordPress developers have avoided switching to Gutenberg for fear of all their sites breaking and having to change their workflow, I’ve tried my best to embrace the new editor and focus on how it can benefit my site builds. Unfortunately, one of the most prolific eCommerce platforms, WooCommerce, has not yet adopted that ideal. I’m sure this is likely due to it affecting millions of sites negatively, but couldn’t you at least give us the option!

I have good news! There is a work around.

Enabling Gutenberg on the Product Post Type

The first and obvious bit of code is to enable the block editor on the product post type. You can achieve this with a very simple filter. If you’re new to WordPress actions and filters, here’s a bit of light reading. Depending on how you’ve set up your theme or plugin, you’ll want to put this and the other scripts listed here into your theme’s functions.php file.

// Enable Gutenberg for Product Descriptions
function activate_product_block_editor($can_edit, $post_type) {
    if ($post_type == 'product') return true;
    return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'activate_product_block_editor', 10, 2);

Fix the Missing Product Categories and Tags Meta Boxes

This is quick, easy and great… but wait, there’s something wrong. Where did my Product Categories and Product Tags metaboxes!!! Now this is where the problems start and the details start to thin out. Out of the box, nearly everything works, but for whatever reason, the WooCommerce developers have left out a fairly simple setting in their taxonomy arguments, show_in_rest.

Luckily, WooCommerce provides a filter on both to register_taxonomy functions to ameliorate this situation. Here’s the code that should bring your beautiful meta boxes back!

// Add Categories and Tags Meta Boxes
function enable_tax_rest($args) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter('woocommerce_taxonomy_args_product_cat', 'enable_tax_rest', 10, 1);
add_filter('woocommerce_taxonomy_args_product_tag', 'enable_tax_rest', 10, 1);

Removing Duplicate Product Excerpt

This little fix isn’t as necessary, but it’s definitely a bug. WooCommerce adds a Product Short Description meta box to the Product edit page that gives you more formatting options than the default WordPress excerpt meta box. When using the classic editor, only the WooCommerce excerpt field is shown, but once you switch over to the block editor, it’ll give you both fields: one on the right sidebar and one all the way down underneath the Product Data.

You’d probably be fine if you left it as is, but to avoid overwriting data and to clean up the editor, I prefer to keep the default WordPress excerpt meta box. Tbh, I always thought the short description field was a bit tacky down there at the bottom.

You can do this by hooking into the add_meta_boxes action right at the tail end of the chain. I have an arbitrary order number of 999, but anything above 30 should be fine (see class-wc-admin-meta-boxes.php:37).

// Remove Short Description Meta Box
function remove_short_description() {
    remove_meta_box('postexcerpt', 'product', 'normal');
}
add_action('add_meta_boxes', 'remove_short_description', 999);

Well, that’s all folks. There’s probably a few more tweaks you could add to this to improve the product block editor situation, but I felt that this was enough to get the ball rolling. I’m hoping that the team working on WooCommerce can release a new update that will introduce a simple filter or theme_support option that your theme can hook into to tell the plugin to enable the block editor by itself and set everything up for you.

Or I could get off my ass and make my own commit, but that’s wishful thinking. ¯\_(ツ)_/¯