WooCommerce 5.0 has recently been released with new features and improvements but sill no support for Gutenberg, WordPress block editor, while creating products. It is ironic since WooCommerce provides a number of good blocks that can be added to pages and posts but not in products.
In this quick tutorial I will show you how to activate Gutenberg for products and resolve some of the issues that occur with this activation.
NOTE: All code here can be added to functions.php file in your theme.
Enable block editor
To enable Gutenberg you can use 'use_block_editor_for_post_type' filter by simply adding these lines:
functionactivate_gutenberg_product($can_edit,$post_type){if($post_type=='product'){$can_edit=true;}return$can_edit;}add_filter('use_block_editor_for_post_type','activate_gutenberg_product',10,2);The above code will enable the new editor for product post type but you will notice that categories and tags have disappeared.
Enable taxonomies
WordPress custom post types have a argument 'show_in_rest' (available since 4.7.0) which enables the retrieval and modification of post type using REST API.
Using 'woocommerce_taxonomy_args_product_cat' and 'woocommerce_taxonomy_args_product_tag' filters we can enable REST.
functionenable_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');
Catalog visibility
Once you enable Gutenberg editor, catalog visibility will not appear. This is because 'post_submitbox_misc_actions' actionis not supported in Gutenberg editor.
One way to resolve is to hook into Gutenberg slots likePluginPostStatusInfo but that is a rocky road and which will require spending long hours and might not get you the required results.
The easy way is to utilize WooCommerce built in functions to add this feature. And since WooCommerce JavaScript files are already loaded we don't have to do add any scripts, only the PHP part.
First add a metabox:
functionregister_catalog_meta_boxes(){global$current_screen;// Make sure gutenberg is loaded before adding the metaboxif(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');Then we take add the function 'product_data_visibility' fromWooCommerce source with few changes:
functionproduct_data_visibility($post){$thepostid=$post->ID;$product_object=$thepostid?wc_get_product($thepostid):newWC_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();?><divclass="misc-pub-section"id="catalog-visibility"><?phpesc_html_e('Catalog visibility:','woocommerce');?><strongid="catalog-visibility-display"><?phpechoisset($visibility_options[$current_visibility])?esc_html($visibility_options[$current_visibility]):esc_html($current_visibility);if('yes'===$current_featured){echo', '.esc_html__('Featured','woocommerce');}?></strong><ahref="#catalog-visibility"class="edit-catalog-visibility hide-if-no-js"><?phpesc_html_e('Edit','woocommerce');?></a><divid="catalog-visibility-select"class="hide-if-js"><inputtype="hidden"name="current_visibility"id="current_visibility"value="<?phpechoesc_attr($current_visibility);?>"/><inputtype="hidden"name="current_featured"id="current_featured"value="<?phpechoesc_attr($current_featured);?>"/><?phpecho'<p>'.esc_html__('This setting determines which shop pages products will be listed on.','woocommerce').'</p>';foreach($visibility_optionsas$name=>$label){echo'<input type="radio" name="_visibility"mf">.esc_attr($name).'" value="'.esc_attr($name).'" '.checked($current_visibility,$name,false).' data-label="'.esc_attr($label).'" /> <label for="_visibility_'.esc_attr($name).'">'.esc_html($label).'</label><br />';}echo'<br /><input type="checkbox" name="_featured" '.checked($current_featured,'yes',false).' /> <label for="_featured">'.esc_html__('This is a featured product','woocommerce').'</label><br />';?><p><ahref="#catalog-visibility"class="save-post-visibility hide-if-no-js button"><?phpesc_html_e('OK','woocommerce');?></a><ahref="#catalog-visibility"class="cancel-post-visibility hide-if-no-js"><?phpesc_html_e('Cancel','woocommerce');?></a></p></div></div><?php}
Reverting back to classic editor (temporarily)
If you want to revert back to the classic editor, for any reason, here is a trick.
Change 'activate_gutenberg_product' function to this:
functionactivate_gutenberg_product($can_edit,$post_type){$disable=in_array('classic-editor',array_keys($_GET));if($post_type=='product'&&$disable!=true){$can_edit=true;}return$can_edit;}Now if you include&classic-editor in WordPress admin url the classic editor will be loaded.
Full code
functionactivate_gutenberg_product($can_edit,$post_type){if($post_type=='product'){$can_edit=true;}return$can_edit;}add_filter('use_block_editor_for_post_type','activate_gutenberg_product',10,2);functionenable_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');functionregister_catalog_meta_boxes(){global$current_screen;// Make sure gutenberg is loaded before adding the metaboxif(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');functionproduct_data_visibility($post){$thepostid=$post->ID;$product_object=$thepostid?wc_get_product($thepostid):newWC_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();?><divclass="misc-pub-section"id="catalog-visibility"><?phpesc_html_e('Catalog visibility:','woocommerce');?><strongid="catalog-visibility-display"><?phpechoisset($visibility_options[$current_visibility])?esc_html($visibility_options[$current_visibility]):esc_html($current_visibility);if('yes'===$current_featured){echo', '.esc_html__('Featured','woocommerce');}?></strong><ahref="#catalog-visibility"class="edit-catalog-visibility hide-if-no-js"><?phpesc_html_e('Edit','woocommerce');?></a><divid="catalog-visibility-select"class="hide-if-js"><inputtype="hidden"name="current_visibility"id="current_visibility"value="<?phpechoesc_attr($current_visibility);?>"/><inputtype="hidden"name="current_featured"id="current_featured"value="<?phpechoesc_attr($current_featured);?>"/><?phpecho'<p>'.esc_html__('This setting determines which shop pages products will be listed on.','woocommerce').'</p>';foreach($visibility_optionsas$name=>$label){echo'<input type="radio" name="_visibility"mf">.esc_attr($name).'" value="'.esc_attr($name).'" '.checked($current_visibility,$name,false).' data-label="'.esc_attr($label).'" /> <label for="_visibility_'.esc_attr($name).'">'.esc_html($label).'</label><br />';}echo'<br /><input type="checkbox" name="_featured" '.checked($current_featured,'yes',false).' /> <label for="_featured">'.esc_html__('This is a featured product','woocommerce').'</label><br />';?><p><ahref="#catalog-visibility"class="save-post-visibility hide-if-no-js button"><?phpesc_html_e('OK','woocommerce');?></a><ahref="#catalog-visibility"class="cancel-post-visibility hide-if-no-js"><?phpesc_html_e('Cancel','woocommerce');?></a></p></div></div><?php}Hopefully this was an easy and useful tutorial.
Top comments(5)
Funny thing, I've read this a few weeks ago and now I had a website where the latest WC 6.3.1 version enables Gutenberg editor by default (on some instances at least) and this is way better to do than to enable "classic editor" just for the sake of having all the features.
As of writing, this works as intended, if you do not see the update in the store listing, do keep in mind that they inserted in 6.3 a new feature that delays the update and adds it to the Action Scheduler, thus causing delays in updating (this is good if you do not care for a few minutes delay as in WC Analytics).
developer.woocommerce.com/2022/02/...
p.s. great work to the author!
Thank you for the great guide!
A plugin is available now to do it without coding:wordpress.org/plugins/blocks-produ...
For further actions, you may consider blocking this person and/orreporting abuse
