How to

Gutenberg + Woocommerce. Edit Products.

Gutenberg и Woocommerce. Редактируем товары | WESPE CLUB
4 мин.

First and foremost Gutenberg + Woocommerce – it is possible, quite convenient and not difficult. Beginners will cope, pros will remember. Now for the details.

Block editor Gutenber at the moment of its appearance caused a mixed reaction. Strongly late, he had to push through the dense ranks of mastodons of block editing philosophy of site content. Elementor and Wpbackery have firmly established themselves and won the sympathy of users. Besides them, there are many other Divi, but that ‘s not what we’re talking about. Despite all the variety of alternatives, Gutenber has taken its place. Many developers began to use it, and untrained users often make a choice in favor of it. Agree, it is convenient when you do not need to make unnecessary movements. Gutenber is already on board, free and copes well with the tasks assigned to it. In general, these arguments are quite enough. We do not know what guided the developers, write in the comments if you have a guess, but after installing Woocommerce and trying to create a product, you will find that it is edited in the standard WordPress editor. This is quite strange. If you find it strange too, let’s enable the block editor in products.

How to enable Gutenberg in Woocommerce?

Answer. A little code in fuction.php and everything works!

// ВКЛЮЧАЕМ GUTEBERG ДЛЯ WOO
add_filter('use_block_editor_for_post_type', 'wespe_enable_gutenberg_for_products', 10, 2);

function wespe_enable_gutenberg_for_products($use_block_editor, $post_type) {
    if ('product' === $post_type) {
        return true;
    }
    return $use_block_editor;
}

It’ s so beautiful!

Gutenberg и Woocommerce. Редактируем товары | WESPE CLUB

How do I edit a product using Gutenberg?

Yes, in general, quite simple. Go to edit and see Gutenberg instead of the standard editor in the product description field. The miracle did not happen. The whole product page cannot be edited. The appearance of the page is still determined by the theme template. This can be changed in several ways, depending on which theme you are using, but that is a subject for another article. Right now, let’s focus on what you can achieve with Gutenberg if you use it in the way described. You know, not a little! For example, in the Woodmart theme, which we often use, in one of the variants, the description occupies the left column in full height. Using the block builder, you can make a fairly complex design that looks great. Any layouts in which the description is the full width of the page will also look great. Overall very simple and functional. If the theme is made so that the layout of the page does not allow you to use the block editor to its full potential, about the product page template is not long and remake it for your own understanding of beauty. We will definitely write about it, stay tuned! All the blocks we are used to seeing when editing records are available to us:

Basic blocks of text

  • Paragraph: To create text paragraphs.
  • Heading: To add different level headings (H1-H6).
  • List: Numbered or bulleted lists.
  • Quote (Quote): For the design of quotations.
  • Code: Formatted block for displaying a code.
  • Preformatted: For text with fixed formatting.
  • Table: Create Tables.

Multimedia

  • Image: To add images.
  • Gallery: Display multiple images in a grid.
  • Video: Insert video files.
  • Audio: Add audio files.
  • Cover: An image with text on top, usually for section headings.
  • File: Add a link to download files.

Design and layout

  • Spacer: Add indentation between elements.
  • Separator: Line for separating content.
  • Columns: Create a multi-column structure.
  • Group: Group blocks together for a uniform design.
  • Buttons: Adding one or several buttons

Embedded elements

  • YouTube: YouTube Videos.
  • Twitter: Insert Tweets.
  • Spotify: Audio from the Spotify platform.
  • Instagram: Inserting posts from Instagram.
  • Facebook: Embed publications from Facebook.

Embedding widgets

  • Shortcode: Insert Shortcodes.
  • Archives : Archives of Records.
  • Categories: Category List.
  • Latest Posts: List of Latest Posts.
  • Latest Comments: Latest Comments.

Quite a wide field for creativity, don’t you think? Much better than just formatted text and a picture in a standard editor.

Gutenberg + Woocommerce. Comparison with other constructors.

There is no need to make a serious comparison. Let’s limit ourselves to a couple of general thoughts on the topic. Divi and Elementor are made very conveniently and allow you to edit products in a very wide range of possibilities. Wpbackery in our opinion is a little inferior in convenience, but with the presence of addons also allows you to edit everything. At the same time, it’ s no secret that any builder is quite a heavy thing. It writes a lot of unnecessary code, loads a lot of styles and scripts. You can often hear their negative and even dismissive assessment from developers with experience. But let’s be honest, each tool has its own tasks. A site on WordPress with a content builder – a great tool for its tasks. For many enthusiasts indispensable as a Swiss knife. Hence the simple inference.

A simple inference.

It is possible and even necessary touse Gutenberg in products. With the right approach , everything will look very organic, despite the fact that we edit, in fact, only the description. Why put monstrous additional constructors, if Gutenberg + Woocommerce allows you to achieve the desired result. Try it ! We are sure that everything will work out.

author-avatar

About Wespe Club

Клуб веб-разработчиков. Наша миссия - сделать вебразработку понятной и доступной широкому кругу людей.

Leave a Reply

Your email address will not be published. Required fields are marked *