skip to Main Content
WooCommerce, Gutenberg and the Product Post Type
Front End Developer
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 next-level digital agency that helps you thrive in digital. We build, evolve and support websites and applications for clients who are graduating to the next level of complexity in their digital ventures. Our uncommon strengths are headless CMS architectures, design systems and 24/7 support. If you're not thriving in digital, you can be: Contact us to learn more.

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

Back To Top