WooCommerce Product Table – how to easily list your products using the Product Table Block and the WordPress Block Editor, Gutenberg

Do you want to make it easier for customers to purchase your products?

A Product Table makes it easy for you to create product tables and listings on one page so that customers can buy multiple items in one go.

Adding a Product Table is a great way to sell more of your products without having the hassle of creating an individual listing for each item or table. It’s also mobile-friendly! With this block, all your products are just a click away from being purchased.

Example WooCommerce Product Table

woocommerce product table

You’ll save time, money, and effort by using the Product Table Block. The Product Table Block is one of 10 premium blocks that are included in the Storefront Blocks plugin and can be used to create a customized shop page, or customized category pages.

Storefront Blocks is the easiest way to create product tables in WordPress, as it’s natively built to use the Gutenberg Block Editor. With just a few clicks of the mouse, you can have an attractive table that will help increase customer engagement. It’s as simple as adding blocks!

Your customers are going to love how easy it is for them to find what they need without having to scroll through endless pages of products. Plus, since we use blocks instead of shortcodes, there’s no messy code or complicated setup required!

A Product Table is great for:

  1. Lists and Order forms
  2. Product catalogs
  3. Request for quotation websites
  4. Stores with thousands of small items
  5. Restaurants
  6. Wholesale stores

Video walkthrough

Initial setup

In this tutorial, the focus is adding a product table to your store, so we’ll skip the basic WooCommerce setup.

First head on over and pick up a copy of the Storefront Blocks plugin.

Step 1: Add the Product Table Block to your page

First click on the add a Block icon and find the Product Tables block. Drag and drop the block into your page.

add the woocommerce product table

Step 2: Choose your products to be included in the Product Table

When you first add the Product Table Block it will automatically load some of your products. You can choose which products to show, in the Block Customizer panel on the right of your screen.

WooCommerce Product Table - how to easily list your products using the Product Table Block and the WordPress Block Editor, Gutenberg 1

You can also filter your products by category and tag, or whether to just display your featured products in the Product Table.

filter product table products by category and tag

Changing the order of your products in the Product Table

Once you have selected your products, then you can change the order by dragging them up and down.

Start your 14 day free trial of Storefront Blocks

Start your free trial and start creating awesome Product Tables

or learn more

Step 3: Configure the Display options

Next it’s time to decide what columns you want to display in your Product Table and the Storefront Blocks plugin makes this easy. You can remove columns, or drag and drop to change the order.

Available Product Table Columns

You can decide which columns to show, and also change the order by dragging them up or down in the Block Customizer.

Columns include, product image, product name, product description, product rating, product price, stock status, product category, product tags, and product colour.

WooCommerce Product Table - how to easily list your products using the Product Table Block and the WordPress Block Editor, Gutenberg 2

There are also some other really useful settings in the Display panel

  • Create circular product images
  • Show product filters
  • Remove the add to cart button
  • Enable request for quote option
WooCommerce Product Table - how to easily list your products using the Product Table Block and the WordPress Block Editor, Gutenberg 3

Enable Catalogue mode for your Product Table

Catalogue mode enables your customers to browse through all of your products without the hassle of having to click on each one individually in order to see more information about them. They’ll be able to quickly scroll through everything at their own pace, which will make browsing much easier than ever before! Plus, they won’t have access to any shopping cart functionality so they can’t actually purchase anything from this page – making it safe for anyone who visits!

Enable Request for a quote mode for your Product Table

If you enable the Request for a quote option, you’ll be able to create quotes in seconds without any hassle or confusion. Plus, if you’re not sure what your customer wants, Request for Quote mode will send an email from them directly to you so there’s never any miscommunication!

Step 4: Choose Typography

The Product Table Block will automatically inherit the styles set in your theme, however, if you want to tailor the design of typography there are a number of settings. These are all available in the Block Customizer panel.

  • Change font, including Google Font support
  • Change font size
  • Change letter spacing
  • Change font color.
WooCommerce Product Table - how to easily list your products using the Product Table Block and the WordPress Block Editor, Gutenberg 4

Conclusion

Adding a Product Table to your WooCommerce store is now really easy the Block Editor and Storefront Blocks. Storefront Blocks is the only Product Table plugin built purely for the Gutenberg Editor.

Storefront Blocks is a great way to build an online store, and uniquely it lets you add a Product Table Block as your WooCommerce Shop Page or your Category Pages.

Get started today for free by signing up for a 14 day trial of Storefront Blocks! If you don’t like it, we’ll refund every penny back to you with no questions asked. It’s that simple!

Click this right now and sign up for a free trial of Storefront Blocks!


8 thoughts on “WooCommerce Product Table – how to easily list your products using the Product Table Block and the WordPress Block Editor, Gutenberg”

  1. This is great and could be very useful for an upcoming project. Do you have support for the request a quote functionality on the single product pages? And if so, is there any control over the form fields?

  2. Request for Quote
    We need to the customer to provide postcode and country to prepare a quote.
    Can we add these as mandatory entry fields to the quote request form?

    1. Hi Charles,

      This isn’t possible with version 1 – but we’ve had a few other requests so we’ll look at adding :)

      jamie

  3. Will adding custom fields (I use Types from OnTheGo Systems to extend the Product post type) be possible in future versions?

  4. Is it possible to add variations to the product. We have a simple variation for the product, just a YES or NO for if the product is painted. This is the same product for stock levels but just allows it to be painted. Is there a way to handle this?

    Thanks

Leave a Comment

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

Scroll to Top