A simple way to make Gutenberg Editor on Woocommerce Product Pages

Are you the owner of an eCommerce business wishing to use a Gutenberg Editor to improve your product pages? If so, you’ll be pleased to learn that doing so now only requires a few clicks. In this blog post, we’ll demonstrate how to make Gutenberg Editor on Woocommerce Product Pages.

Why Should Product Pages Use the Gutenberg Editor?

You can simply create and modify your product descriptions by adding the Gutenberg editor to WooCommerce product pages. To add text, photographs, videos, and other content to your product descriptions, utilize the powerful and user-friendly Gutenberg editor. This gives you more control over the appearance and feel of your store and makes modifying your product descriptions quick and simple.

You can use the Gutenberg editor’s functions like drag-and-drop blocks and different design tools to make product descriptions that are more interesting and appealing. It is also compatible with the majority of page builders, including Beaver Builder and Elementor, giving it an even more potent tool for designing stunning product pages.

How to Make Woocommerce Product Pages Use the Gutenberg Editor

The WooCommerce product page still uses the old editor rather than the Gutenberg block editor, despite the fact that the Gutenberg editor was launched in WordPress 5.0. Because they are accustomed to using the Gutenberg editor, some users find this confusing. Fortunately, adding a few code snippets will allow you to activate the Gutenberg block editor for the WooCommerce product page. Although you can still add this code straight to your theme files, we don’t advise doing so because the code will be lost whenever you change your theme or switch themes.

Consequently, in today’s article, we will show you how to use a well-known plugin to enable the Gutenberg editor on the Woocommerce product page. Let’s verify the further stages now:

Step 1: Put the WPCode plugin in place

Installing the WPCode plugin is the first step in adding code snippets to WordPress without having to change the functions.php file for your theme.

The following methods can be used to install the WPcode plugin on your WordPress website:

1. Open your WordPress dashboard and log in.
2. Click “Add New” in the “Plugins” section to add a new plugin.
3. Use the search bar to look for “WPcode” and click it.
4. Select “Install Now” from the menu.
5. Await the plugin’s installation.
6. Once installation is complete, select “Activate” from the menu.

Step 2: Write a Code Snippet

Let’s go to the Code Snippets > Add Snippet menu from your WordPress dashboard after the plugin has been launched.

You must hover over the “Add Your Custom Code (New Snippet)” option on the “Add Snippet” page and select the “Use Snippet” button.

Give your own snippet a name in the title now, and then paste the custom code below into the code preview section.

function wplook_activate_gutenberg_products($can_edit, $post_type){
if($post_type == 'product'){
$can_edit = true;
}

return $can_edit;
}
add_filter('use_block_editor_for_post_type', 'wplook_activate_gutenberg_products', 10, 2);

Next, select the appropriate code type from the drop-down selection for your code. You must select “PHP Snippet” in this situation.

Additionally, you must decide how you want the snippet to be run automatically on your website.

To complete the process, let’s change the toggle button from “Inactive” mode to “Active” mode and press the “Save snippet” button.

You may now access the Product > Add New section and use the Gutenberg editor to make changes to your Woocommerce product page rather than the Classic editor.

Final thought

In conclusion, switching on the Gutenberg editor for the WooCommerce product page can give you a more versatile and user-friendly interface for building and personalizing product pages. You may add a variety of blocks, including text, images, buttons, and more, using the block editor to design a unique look for your product pages. With the help of our blog, we hope you can use the robust features of the Gutenberg editor to make product pages for your online store that appear polished.

In addition, why don’t you visit our website to find a huge selection of gorgeous, free Gutenberg Themes? They are appropriate for a wide range of subjects, including business, entertainment, and many others.