WordPress 5 Cookbook

Using Gutenberg blocks for products

WooCommerce now supports the Gutenberg editor with a set of predefined blocks for adding and displaying products directly into a page. Once the Add Block icon is clicked, we can find a set of WooCommerce-specific blocks.

Gutenberg blocks for WooCommerce are located inside the packages/woocommerce-blocks folder inside the WooCommerce plugin folder.

In this recipe, we wanted to display products that had been selected manually by the administrator. For this, we can use the Hand-picked Products block. Once added, it will show some of the existing products, along with checkboxes that we can use to select them. If the product we need is not available, we can use the search option to filter and select the necessary ...