Gutenberg block editor in WooCommerce products

There will come a day – before you know it – when the WooCommerce product editor will also be the Gutenberg block editor.

But in the meantime, can I create and edit products with WordPress Gutenberg blocks?

• Short answer: Yes
• Long answer: Keep reading

And I’m not talking about adding product blocks in WordPress posts and pages, already with the block editor active by default, but about the product editor also using blocks, as it currently still uses the classic editor.

Should I use the WooCommerce product block editor?

If you are satisfied with the classic product editor nothing to say, stick with it, everything will continue to work until the default block editor is put in place for products as well(if it does).

How to activate the block editor for WooCommerce products

But the reality is that you could already be using the block editor to create and edit WooCommerce products, just copy and paste this code and you’re done:

/* Gutenberg/blocks editor for WooCommerce products */
function wphelp_gutenberg_products($can_edit, $post_type){
if($post_type == 'product'){
$can_edit = true;
}
return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'wphelp_gutenberg_products', 10, 2);Code language: PHP (php)

The next time you add or edit a WooCommerce product you will have the WordPress Gutenberg block editor active by default.

Extra trick: Use this code for other types of content

The best thing about this code is that you can adapt it and activate the block editor for any other type of content, not just products.

If you have, for example, a content type called books, you would only have to make a small change in the code, changing the content type (product) for the one you want to apply, in this example book.

/* Gutenberg/blocks editor for CPT book */
function wphelp_gutenberg_books($can_edit, $post_type){
if($post_type == 'book'){
$can_edit = true;
}
return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'wphelp_gutenberg_books', 10, 2);Code language: PHP (php)

You would go from having the classic editor for the content type books to the Gutenberg editor.

Limitations

However, before making this change, you should know that you may encounter some limitations. It will be up to you whether they are important or irrelevant.

• The product short description editor remains the classic one.
• The active theme must be compatible with the block editor to display its configuration boxes.
• The active plugins must be compatible with the block editor for their product-related settings boxes to be displayed.
• The Gutenberg editor does not display the product visibility option (catalog, store, search), which you will have to activate separately (see below).
• Some taxonomies loaded via the REST API may disappear, which will have to be reactivated (see below).

Otherwise you will not see any other changes, the product data remains as usual, and will not be affected by the change in any way.

Reactivate product visibility

As I was saying, one of the limitations is that the Gutenberg block editor does not show by default the option of product visibility settings, which you have in the classic editor(see the screenshot below).

In the block-based product editor you do not have these settings, but only the usual settings for entries and pages.

Well, the easiest way to retrieve these settings is to copy and paste into your installation the following code, which adds a new meta box to the block editor, with all the WooCommerce product visibility settings:

/* Activate products visibility in Gutenberg */
function register_catalog_meta_boxes() {
global $current_screen;
if ( method_exists( $current_screen, 'is_block_editor' ) && $current_screen->is_block_editor() ) {
add_meta_box( 'catalog-visibility', __( 'Catalog visibility', 'textdomain' ), 'product_data_visibility', 'product', 'side' );
}
}
add_action( 'add_meta_boxes', 'register_catalog_meta_boxes' );
function product_data_visibility( $post ) {
$thepostid = $post->ID;
$product_object = $thepostid ? wc_get_product( $thepostid ) : new WC_Product();
$current_visibility = $product_object->get_catalog_visibility();
$current_featured = wc_bool_to_string( $product_object->get_featured() );
$visibility_options = wc_get_product_visibility_options();
?>
<div class="misc-pub-section" id="catalog-visibility">
<?php esc_html_e( 'Catalog visibility:', 'woocommerce' ); ?>
<strong id="catalog-visibility-display">
<?php
echo isset( $visibility_options[ $current_visibility ] ) ? esc_html( $visibility_options[ $current_visibility ] ) : esc_html( $current_visibility );
if ( 'yes' === $current_featured ) {
echo ', ' . esc_html__( 'Featured', 'woocommerce' );
}
?>
</strong>
<a href="#catalog-visibility"
class="edit-catalog-visibility hide-if-no-js"><?php esc_html_e( 'Edit', 'woocommerce' ); ?></a>
<div id="catalog-visibility-select" class="hide-if-js">
<input type="hidden" name="current_visibility" id="current_visibility"
value="<?php echo esc_attr( $current_visibility ); ?>" />
<input type="hidden" name="current_featured" id="current_featured"
value="<?php echo esc_attr( $current_featured ); ?>" />
<?php
echo '<p>' . esc_html__( 'This determines in which pages of the online store the products will be seen.', 'woocommerce' ) . '</p>';
foreach ( $visibility_options as $name => $label ) {
echo '<input type="radio" name="_visibility" id="_visibility_' . esc_attr( $name ) . '" value="' . esc_attr( $name ) . '" ' . checked( $current_visibility, $name, false ) . ' data-label="' . esc_attr( $label ) . '" /> <label for="_visibility_' . esc_attr( $name ) . '" class="selectit">' . esc_html( $label ) . '</label><br />';
}
echo '<br /><input type="checkbox" name="_featured" id="_featured" ' . checked( $current_featured, 'yes', false ) . ' /> <label for="_featured">' . esc_html__( 'This is a featured product', 'woocommerce' ) . '</label><br />';
?>
<p>
<a href="#catalog-visibility"
class="save-post-visibility hide-if-no-js button"><?php esc_html_e( 'Accept', 'woocommerce' ); ?></a>
<a href="#catalog-visibility"
class="cancel-post-visibility hide-if-no-js"><?php esc_html_e( 'Cancel', 'woocommerce' ); ?></a>
</p>
</div>
</div>
<?php
}Code language: JavaScript (javascript)

What you get is this:

There is another way to do it, the native way via PluginPostStatusInfo, but it is at the moment much more complicated than the above method of adding a meta box in the traditional WooCommerce style.

Reactivate taxonomies that load via REST APIs

If you only use standard WooCommerce taxonomies you probably don’t need to, but more and more plugins allow you to add, query and edit taxonomies via REST API calls.

If you miss any taxonomies after activating the block editor in WooCommerce products you should also copy and paste this code into your system:

/* Product taxonomies through REST API with Gutenberg */
function enable_taxonomy_rest( $args ) {
$args['show_in_rest'] = true;
return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );Code language: PHP (php)

And that’s it, you can now use the WordPress Gutenberg block editor in WooCommerce products as well.