Skip to content
WooCommerce, Gutenberg and the Product Post Type
October 20 2020

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.

Culture Foundry is a digital experience agency that helps our clients elevate their impact with beautiful technology. We provide the expertise and insight at every layer that makes a great digital experience for websites and applications possible. If you're committed to elevating your digital experience, contact us and we'd be happy to schedule a chat to see if we're a fit.

(Psst! We also happen to be a great place to work.)

Back To Top