template

Block based products

Repo Release Link Client Features Developer
repo 16/12-24 link Civita gutenbergwoocommerce Stian

Functionality

WooCommerce still don’t support building single products with blocks by default. Instead they rely on two old-school wysiwyg fields for short description/excerpt and product description. However, adding full block support can easily be turned on – with a some obvious pitfalls.

How to activate block support for products

// Enable block editor for products description.
\remove_filter( 'use_block_editor_for_post_type', 'WC_Post_Types::gutenberg_can_edit_post_type', 10, 2 );

Catalog Visibility is lost

When the block editor is activated for products the Catalog Visibility options in the sidebar is no longer visible. For now (as of WC 6.3) this meta box needs to be manually added back to the sidebar. Have a look the source code for Civita for inspiration.

Replacing the single product template

In the default single product template the post content for products is added to the description tab below the product images and summary. In order to display only blocks on product pages you’ll have to replace the entire single product template. Have a look at how we’re using the normal singular.php template for both pages, posts and products on Civita.

Also remember to append price and add_to_cart templates parts in your template/blocks now that you’ve completely replaced the normal product template.

Notes

Activating block support for products might have other pitfalls than the one I’ve outlined above. Please let me know or update this post if you find anything of interest.

Links

In this tutorial from February 2021 the author explains in more detail why the Catalog visibility box does not support the block editor. The section on enabling taxonomies with show_in_rest is outdated. Show in rest was added for these taxonomies in 5.4.0.