How to use Gutenberg Products Block

by Mar 8, 2021Gutenberg, WordPress 5.0, WordPress Tutorials - WP Tutorials

Need WordPress Help? Click Here.

If you have an woocommerce website, you may want to allow customers a preview of products you’re selling. A products block would be ideal for you to use. The products block is similar to the products short code. The Products block allows you to  insert any products from a variety of sources, then provide a preview of how that selection will look when published. You’ll also be able to adjust the appearance of each product by adjusting the layout and ordering. Currently the products plugin is a feature plugin from WooComerce.

With the Products block, you can quickly and easily add products to posts and pages. You can use this block to post best sellers, sale items,  preview of new products, etc.

Step 1

First go to the page where you would like to post your products. Click on the plus sign icon in the upper left hand corner. From there, select the Widgets from the drop down menu. Click on Products.

A menu will appear listing the different type of ways to add and display your products.

Individual Products allows you to choose and display any product.
Product Category allows you to choose and display products that have been placed into different categories
Filtered Products allows you to post products with certain attributes like all shirts that are a size large or size 10 shoes, etc.
All Products displays every single product you have with your WooCommerce store

Step 2

Once you made your selection of how you would like to display your products save your page, your products will display.

In the sub-menu on the right hand side, you customize your product block even more. You can add more columns, the way products are sorted, and add css classes to your products

Step 3

Once you save/publish the page from the backend, your page is ready

More WordPress Tutoring Goodness

Copyright ByRivers Tech LLC/ WP-Tutoring.Com All Rights Reserved.

  • Get Expert WordPress Help Right Now!

  • Please enter your phone number so we can fully discuss your needs.
  • This field is for validation purposes and should be left unchanged.

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.


Submit a Comment

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