WooCommerce, Gutenberg and the Product Post Type

WooCommerce works fine with WordPress 5.x unless you want to use it with a Product Post Type. When you’re adding a product in WooCommerce you are met with an old school screen. So, if your editor wants to get creative with the single product page template, you’re stuck with the old way of doing things. That is unless you’re willing to push things around a little.

To do this, we have two problems to solve. The first and most obvious problem is forcing the Product Post Type to use Gutenberg. The second isn’t as obvious at first. After forcing the Product Post Type to use Gutenberg, the categories box mysteriously disappears. There is a way around this, but it does involve a plugin. Luckily, it’s a good plugin you’re probably already using.

Problem One:
Force Gutenberg

This turns out to be pretty easy. WP has a filter you can use.

To set this up, just open up your functions.php, or a custom plugin, and check that the post type is “product” and set $can_edit = true; and you’re set.

<!-- wp:paragraph -->
<p>// Enable Gutenberg on WooCommerce Product posts<br>function intech_activate_gutenberg_products($can_edit, $post_type){<br>if($post_type == 'product'){<br>$can_edit = true;<br>}</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>return $can_edit;<br>}<br>add_filter('use_block_editor_for_post_type', 'intech_activate_gutenberg_products', 10, 2);</p>
<!-- /wp:paragraph -->

Problem Two:
WooCommerce products lost the categories

ACF to the rescue.

For some reason, the WooCommerce categories go missing on a Gutenberg enabled Product Post Type. So if you’re sorting your products with categories, then this is a problem. After lots of Googling, the closest thing I could find was WooCommerce saying in a forum that they don’t support Gutenberg in product posts and they don’t know why anyone would want it. Thanks for that WooCommerce. But if you’re reading this, you are like me and found a need.

I was working on something else that needed a custom field that referenced categories, and I thought, hmm, I wonder if this would work for that pesky Product Post Type? And what do you know, it sure did.

1. Create a new custom field in ACF and select the Taxonomy Field Type
2. Under Taxonomy, select “Category poduct_cat)”
3. Save Terms = Yes
4. Load Terms = Yes
5. Return Value = Term ID
6. Set the Rules to “Show this field if Post Type is equal to Product”

In Settings, I think it’s nice to set it to the style “Standard (WP meta box)” and position it on the side like WP would have done.

Now your Product Post Type will be all ready for Gutenberg AND alow your editors to select what category it belongs to.