{"id":5006,"date":"2021-12-28T18:08:39","date_gmt":"2021-12-28T18:08:39","guid":{"rendered":"https:\/\/www.kadencewp.com\/knowledge-base\/?post_type=ht_kb&#038;p=5006"},"modified":"2026-04-22T16:48:29","modified_gmt":"2026-04-22T16:48:29","password":"","slug":"add-gutenberg-editor-to-woocommerce","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-shop-kit\/add-gutenberg-editor-to-woocommerce\/","title":{"rendered":"How to Add Gutenberg Editor to WooCommerce"},"content":{"rendered":"\n<p>The default WooCommerce product editor is, at the time of this writing, still using the old classic WordPress editor that does not create useful product pages. <\/p>\n\n\n\n<p>The video below from our friends at WPCrafter.com shows you how you can add the blocks editor to create beautiful product layouts for your WooCommerce store.<\/p>\n\n\n\n<p>More screenshots and instructions below if that is your preferred method of learning.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"How To Design Awesome Product Pages With Gutenberg In WooCommerce\" width=\"720\" height=\"405\" src=\"https:\/\/www.youtube.com\/embed\/SaPdeKlqf1o?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Product Descriptions without Gutenberg<\/h2>\n\n\n\n<p>WooCommerce uses the WordPress classic editor for product descriptions, which leaves a lot to be desired for product display. Site owners are essentially locked into displaying a product title, a product description, and little else in terms of design and layout other than some standard text styling. Unless you find a creative use of bold and italics invigorating, you&#8217;re out of luck. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2021\/12\/woocommerce-classic-editor-1024x676.png\" alt=\"\" class=\"wp-image-5021\" width=\"768\" height=\"507\" \/><figcaption class=\"wp-element-caption\"><em>WooCommerce product editing using the classic editor leaves little room for customization with blocks. (WooCommerce version 6.0.0) <\/em><\/figcaption><\/figure><\/div>\n\n\n<p>However, with a little bit of code, you can turn on the Gutenberg block editor to ensure that your products have all that the block editor, and Kadence Blocks, have to offer. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to enable Gutenberg to edit your WooCommerce product descriptions<\/h2>\n\n\n\n<p>A small bit of code that you can copy from below will turn your product description area into a block-based wonderland. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">\n\/\/ enable gutenberg for woocommerce\nfunction activate_gutenberg_product( $can_edit, $post_type ) {\n if ( $post_type == 'product' ) {\n        $can_edit = true;\n    }\n    return $can_edit;\n}\nadd_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );\n\n\/\/ enable taxonomy fields for woocommerce with gutenberg on\nfunction enable_taxonomy_rest( $args ) {\n    $args['show_in_rest'] = true;\n    return $args;\n}\nadd_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );\nadd_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Woocommerce Version 7.7.0 &#8211; product tab locked <\/h3>\n\n\n<style>.wp-block-kadence-advancedheading.kt-adv-heading_1deb6c-fd, .wp-block-kadence-advancedheading.kt-adv-heading_1deb6c-fd[data-kb-block=\"kb-adv-heading_1deb6c-fd\"]{font-style:normal;}.wp-block-kadence-advancedheading.kt-adv-heading_1deb6c-fd mark.kt-highlight, .wp-block-kadence-advancedheading.kt-adv-heading_1deb6c-fd[data-kb-block=\"kb-adv-heading_1deb6c-fd\"] mark.kt-highlight{font-style:normal;color:var(--global-palette9, #ffffff);background:var(--global-palette1, #3182CE);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.wp-block-kadence-advancedheading.kt-adv-heading_1deb6c-fd img.kb-inline-image, .wp-block-kadence-advancedheading.kt-adv-heading_1deb6c-fd[data-kb-block=\"kb-adv-heading_1deb6c-fd\"] img.kb-inline-image{width:150px;vertical-align:baseline;}<\/style>\n<p class=\"kt-adv-heading_1deb6c-fd wp-block-kadence-advancedheading\" data-kb-block=\"kb-adv-heading_1deb6c-fd\"><em>If you&#8217;ve added the code above to your site, but you found that you are unable to add new blocks to your products after updating to WooCommerce Version 7.7.0, you should know WooCommerce added a template to the \u201cproduct\u201d post type, which might be interfering with your customization.<\/em> The template can be removed using a filter like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">add_filter('woocommerce_register_post_type_product', function( $args ) {\r\n    unset( $args['template'] );\r\n    return $args;\r\n});<\/code><\/pre>\n\n\n\n<p>There are two methods of getting this bit of code above into your WordPress installation. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Code Snippets Plugin<\/h3>\n\n\n\n<p>First, you can use the very useful Code Snippets plugin to add this code to your WordPress installation. We&#8217;ve outlined how to use Code Snippets in our Knowledge Base article <a href=\"https:\/\/www.kadencewp.com\/kadence-theme\/knowledge-base\/advanced\/how-to-add-a-custom-filter-or-function-with-code-snippets\/\">here<\/a>. You can download the Code Snippets plugin by going to your WordPress admin and clicking <strong>Plugins &gt; Add New<\/strong>. Then search for Code Snippets.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2021\/12\/code-snippets-1024x647.png\" alt=\"\" class=\"wp-image-5022\" width=\"512\" height=\"324\" \/><figcaption class=\"wp-element-caption\"><em>Install Code Snippets from the WordPress plugin directory. <\/em><\/figcaption><\/figure><\/div>\n\n\n<p>Once you&#8217;ve got Code Snippets installed, simply go to Snippets and create a new snippet, paste in the code above, add a description, and save your snippet. You&#8217;ve activated blocks for WooCommerce. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2021\/12\/gutenberg-product-descriptions-1024x698.png\" alt=\"\" class=\"wp-image-5023\" width=\"768\" height=\"524\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\">Theme Functions File<\/h3>\n\n\n\n<p>Alternatively, you can add it to your theme function file. We don&#8217;t recommend doing this, as your theme functions file will be overwritten in the future when you update your theme. As well, you can often break your site much more easily when you use the theme functions file. We share this as an option more as a cautionary tale, but it will work. Head to your <strong>Appearance &gt; Theme Editor<\/strong> and find your active theme&#8217;s functions.php file. Paste the code above into the bottom of the functions.php file. <\/p>\n\n\n\n<p>We recommend using a child theme and making a site backup if you choose to use this method of adding the code to your site.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Convert classic product descriptions to blocks<\/h2>\n\n\n\n<p>If you already have some products in your WooCommerce store, you&#8217;ll need to convert your existing content to blocks in order to use the block editor for editing that content. You&#8217;ll see that your existing product description is listed as &#8220;Classic&#8221; editor content. Click on <strong>Classic<\/strong> to see a dialog that will allow you to &#8220;<strong>Convert to Blocks<\/strong>&#8221; Save your product description and add to it, customizing with the block editor.  <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2021\/12\/product-classic-editor-1024x692.png\" alt=\"\" class=\"wp-image-5024\" width=\"512\" height=\"346\" \/><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\">Using the block editor with WooCommerce product design <\/h2>\n\n\n\n<p>Once you&#8217;ve added the above code to your WordPress site, you now have unlocked all of the features of the block editor for product description design. <\/p>\n\n\n\n<p>It also means that if you&#8217;re using Kadence and Kadence Blocks, you can now use any of the features for Kadence Blocks in your WooCommerce product descriptions. <\/p>\n\n\n\n<p>Note that this will only affect the general area where product descriptions are located. But within that space, you can now access any of the Kadence Design Library and add new looks to your product descriptions.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>The default WooCommerce product editor is, at the time of this writing, still using the old classic WordPress editor that does not create useful product pages. The video below from our friends at WPCrafter.com shows you how you can add the blocks editor to create beautiful product layouts for your WooCommerce store. More screenshots and&#8230;<\/p>\n","protected":false},"author":133936,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[391],"doc_tag":[],"knowledge_base":[9],"class_list":["post-5006","docs","type-docs","status-publish","hentry","doc_category-shop-kit-getting-started","knowledge_base-kadence-shop-kit"],"year_month":"2026-04","word_count":775,"total_views":"9313","reactions":{"happy":"14","normal":"3","sad":"3"},"author_info":{"display_name":"Kathy Zant","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/kathyzantithemes\/"},"doc_category_info":[{"term_name":"Shop Kit Setup","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-shop-kit\/shop-kit-getting-started\/"}],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence Shop Kit","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-shop-kit\/","term_slug":"kadence-shop-kit"}],"knowledge_base_slug":["kadence-shop-kit"],"taxonomy_info":{"doc_category":[{"value":391,"label":"Shop Kit Setup"}],"knowledge_base":[{"value":9,"label":"Kadence Shop Kit"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/133936"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=5006"}],"version-history":[{"count":2,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5006\/revisions"}],"predecessor-version":[{"id":6830,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/5006\/revisions\/6830"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=5006"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=5006"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=5006"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=5006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}