Saltar al contenido

Block WooCommerce Products

febrero 2, 2020

 

a website to create online store with WordPress is usually limited to the cover, the navigation pages and catalog pages of the tabs of products, but also has information pages and publications (posts) on your blog.

In addition to its reporting function, these pages and publications also present an opportunity to promote products different of the catalog without having to navigate through it.

to the directly display the products to users who reach that page (for example, through the result of a search on Google), we can attract the user, curious to see these products or similar and can reach buy them.

So far, the only way to do that was through WooCommerce shortcodes in , inserted into the content of that page or publication, with the difficulty that supposed to edit and configure.

However, with the advent of Gutenberg WordPress, WooCommerce has taken advantage of its advanced editing features to facilitate this through the use of the block Products.

In this article, we will see what is the block WooCommerce products, which we have and how we can use and configure them using the block system Gutenberg (therefore only available for WordPress 5.0 or higher).

Table of Contents

  • blocks Gutenberg, brief introduction of use
  • How to insert WooCommerce product pages or posts?
  • What is the Block WooCommerce products? The 11 blocks of product WooCommerce
  • 11 product blocks of WooCommerce
  • Conclusions
  • 11 product blocks of WooCommerce

blocks Gutenberg, brief introduction of use

WordPress 5.0 was a major upgrade, among others, with the addition of the new editor Gutenberg and, specifically, the system blocks for the content of posts and pages.

With Gutenberg, we can create content in a more visual manner than the previous TinyMCE editor. To this end, it provides a library prebuilt content items, called «blocks».

Each block can be added to a page or publish (post) and set according to the type of content or information that will show that block. Gutenberg has blocks as basic components handle text and images, as well as others that provide advanced features (such as buttons and tables).

On this page you can see Gutenberg Go and see the details of all the blocks that are included in the default installation of WordPress with Gutenberg.

addition, add additional blocks either as specific plugins to add a special type of content as part of plugins we install in WordPress (eg WooCommerce includes block Products) or editing files can be code of our WordPress installation.

The following video shows the main features of the system blocks Gutenberg, when creating and editing the contents of a post or page in WordPress:

How to insert products WooCommerce pages or posts?

Before the arrival of Gutenberg, there was only one way to embed products within the content of a page or publish (post) through shortcodes. Specifically, from WooCommerce version 3.2, with the shortcode [products].

An example use of this shortcode would be:

In shown a maximum of 4 products in a table of four columns (and hence, a row), computer popularity, corresponding to the class «quick-sale» and are on sale at that time:

Click to enlarge

Given this example, we can already figure out the drawbacks of shortcodes, but we can reduce them to the following two mainly:

  • a inserting the shortcode, properly configured, the only way to see the result was keeping the page or post and visiting the website to see the corresponding page or through the preview. This slows down the process of editing the content, because it had to be recharged continuously this website.
  • A inserting the shortcode, properly configured, the only way to see the outcome was keeping the page or post and visiting the website to see the corresponding page or through the preview. This slows down the process of editing the content, because it had to be recharged continuously this website.
  • A inserting the shortcode, properly configured, the only way to see the outcome was keeping the page or post and visiting the website to see the relevant page or through the preview. This slows down the process of editing the content, because it had to be recharged continuously this website.
  • The shortcode can be used with multiple parameters and their values, forcing know what these parameters are, their valid values ​​and write them correctly for the WooCommerce recognize. Any error writing a parameter or value, means that the shortcode does not work or shows something different than expected. Again, this slows editing content.

On the other hand, often was not enough to put the right where it is opportune shortcode, but had to enter also HTML tags or CSS styles for to format or design to how they looked or integrated products with the rest of the content.

In the end, although the advantages of adding products on pages or posts are unquestioned, the process was tedious and unfriendly most of the time.

Block Products WooCommerce involves changing the methodology of work, take advantage of the editing features and visual configuration Gutenberg such that:

  • You can choose and visually configure products to be displayed on the page or post, without having to remember command parameters or values, but selecting them from a dropdown list.
  • You can choose and visually configure products to be displayed on the page or post, without having to remember command parameters or values, but selecting them from a dropdown list.
  • You can choose and visually configure products to be displayed on the page or post, without having to remember command parameters or values, but selecting them from a dropdown list.
  • The visual editor displays in real time how are the products within the content without having to visit and continuously reload the Web page.

So from version 5.0 of WordPress, we can use the block system Gutenberg to add products to our pages and posts, along with the possibility of continuing to use shortcodes (for example, for pages those and posts that already they used above).

What is the Block WooCommerce products?

When you install WooCommerce WordPress 5.0 or higher (ie, with Gutenberg), incorporates its own set of blocks, which can be accessed from the editing area of ​​a post or page by clicking on the «+» symbol, as any other block Gutenberg:

WooCommerce product includes 11 blocks that we can insert, set and match to our liking as part of the contents of the post or page:

a

the style of Gutenberg blocks, each block has its own editing capabilities and configuration. For example, in the case of the block «products by attribute» block you have the following toolbar:

where we can choose how we want the block is displayed as a whole with respect to the rest of the content of the post or page, the following buttons:

Normal

  • Width: no specific button for this function, but is activated when neither of these is selected. In this case, the width of the block is adjusted to the width of the standard content or page post. Normal
  • Width: no specific button for this function, but is activated when neither of these is selected. In this case, the width of the block is adjusted to the width of the standard content or page post. Normal
  • Width: no specific button for this function, but is activated when neither of these is selected. In this case, the width of the block is adjusted to the width of the standard content or page post.
  • broad width: block occupies a width greater than that of the rest of the content, but there are still margins on the sides.
  • broad width: block occupies a width greater than that of the rest of the content, but there are still margins on the sides.
  • broad width: block occupies a width greater than that of the rest of the content, but there are still margins on the sides. Full
  • Width: block occupies the entire width of the page without margins on the sides, except those for the internal content of the block itself.
  • full

  • Width: block occupies the entire width of the page without margins on the sides, except those for the internal content of the block itself. Full
  • Width: block occupies the entire width of the page without margins on the sides, except those for the internal content of the block itself.
  • Edition: shows some configuration options chosen block, which depends on its functionality; for example, in the block «products by attribute» attributes of the products we want to display in the block which we mark:

as we selecting one or other of the buttons width block, the visual appearance of the block in the editor is modified so that at all times we have how would the reference in the final page. For example, if you select «full width»:

Click the image to enlarge

in this picture, we can see how the entire width occupies block the editing area, compared with the block of text editing (similar to bar classic edition of WordPress) that appears just above this block .

In addition to this toolbar, each block product also has a set of configuration options, which are displayed to the right of the editing area of ​​WordPress.

Although much of these options are common to all blocks of product, there are also specific to the block we have selected; for example, in the case of «products by attribute» would be the following:

the following video explains and shows each of these settings and what their effect on the display block products:

the 11 blocks WooCommerce product

now let us see what are the 11 blocks of product incorporating WooCommerce and what we can do with each of them:

  • products by attribute. The product attributes allow you to create product variations based on one of its characteristics (size, color, etc.). By this block, we can indicate or select what should be the attributes of the products to be displayed on content.
  • products by attribute. The product attributes allow you to create product variations based on one of its characteristics (size, color, etc.). By this block, we can indicate or select what should be the attributes of the products to be displayed on content.
  • products by attribute. The product attributes allow you to create product variations based on one of its characteristics (size, color, etc.). By this block, we can indicate or select what should be the attributes of the products to be displayed on content.
  • list product categories. This block shows a list of all categories of product catalog online store. At the click on one of them, it goes to the user that category page where you can see all its products.
  • List of product categories. This block shows a list of all categories of product catalog online store. At the click on one of them, it goes to the user that category page where you can see all its products.
  • List of product categories. This block shows a list of all categories of product catalog online store. At the click on one of them, it goes to the user that category page where you can see all its products.
  • hand product selection. Block useful when the user reaches a post explaining the operation or characteristics of a product or several related products. It allows you to select one or more products as part of the content of that page.
  • hand product selection. Block useful when the user reaches a post explaining the operation or characteristics of a product or several related products. It allows you to select one or more products as part of the content of that page.
  • hand product selection. Block useful when the user reaches a post explaining the operation or characteristics of a product or several related products. It allows you to select one or more products as part of the content of that page.
  • new products. Shows all new products catalog online store. We can filter them by category of products, so that only products of one or more categories are displayed.
  • new products. Shows all new products catalog online store. We can filter them by category of products, so that only products of one or more categories are displayed.
  • new products. Shows all new products catalog online store. We can filter them by category of products, so that only products of one or more categories are displayed.
  • Best Rated Products. Displays products catalog online store that have received the most valued by users. We can filter them by category of products, so that only products of one or more categories are displayed.
  • Best Rated Products. Displays products catalog online store that have received the most valued by users. We can filter them by category of products, so that only products of one or more categories are displayed.
  • Best Rated Products. Displays products catalog online store that have received the most valued by users. We can filter them by category of products, so that only products of one or more categories are displayed.
  • Category prominent. It allows you to select a category to create a block with various graphic effects that draw attention to the user and access the page that category.
  • highlighted Category. It allows you to select a category to create a block with various graphic effects that draw attention to the user and access the page that category.
  • highlighted Category. It allows you to select a category to create a block with various graphic effects that draw attention to the user and access the page that category.
  • Featured. Similar to the block «outstanding category», but showing a product rather than a category. When user click, you are directed to the page for that product.
  • Featured. Similar to the block «outstanding category», but showing a product rather than a category. When user click, you are directed to the page for that product.
  • Featured. Similar to the block «outstanding category», but showing a product rather than a category. When user click, you are directed to the page for that product.
  • TopSellingProducts. Displays products catalog online store that’s been sold. They can be filtered by category of products, so that only the products of one or more categories are displayed.
  • best selling products. Displays products catalog online store that’s been sold. They can be filtered by category of products, so that only the products of one or more categories are displayed.
  • TopSellingProducts. Displays products catalog online store that’s been sold. They can be filtered by category of products, so that only the products of one or more categories are displayed.
  • products by category. After selecting one or more categories, shown within the content all products belonging to one of those categories or all of them.
  • products by category. After selecting one or more categories, shown within the content all products belonging to one of those categories or all of them.
  • products by category. After selecting one or more categories, shown within the content all products belonging to one of those categories or all of them.
  • Discounted products ( «on-sale»). Displays all catalog products online store that are on sale or on sale. We can filter them by category of products, so that only products of one or more categories are displayed.
  • Discounted products ( «on-sale»). Displays all catalog products online store that are on sale or on sale. We can filter them by category of products, so that only products of one or more categories are displayed.
  • Discounted products ( «on-sale»). Displays all catalog products online store that are on sale or on sale. We can filter them by category of products, so that only products of one or more categories are displayed.
  • Products by label. To use this block, the online store must have labels and be associated with products catalog. Moreover, the process is similar to the block «products by attribute» can indicate or select what should be the product labels to display in the content.

Conclusions An online store must take every opportunity to present a selection of its products to all users who come to their websites, including information pages or blog posts.

In these cases, the user does not come because I want a particular product in the store catalog, but usually through a link as result of a search that user has done on Google and has brought him a content page, not a sheet.

We should use these visits to inform them about our product offering , adding them as part of the content of that page or post.

In this way, the user will see satisfied their curiosity (which motivated the search that led him to the store) and will have direct access to related products from the same page.

WooCommerce shortcodes available to perform this function, but it is a method prone to errors and may require several refills and checks until it is to our liking.

However, thanks to the system block Gutenberg, WooCommerce also provides a block Products, which allows insert and configure products visually displayed on the informative pages and posts an online store.

All with another major advantages of Gutenberg: see the actual visual result as long as you edit and configure the block products without having to visit the website or reload web pages.