A WooCommerce product table is handy when you need to give a quick bird’s eye view of the products because the information is harder to absorb in a grid format. Thus, the customers can quickly filter products and compare them along the column, simplifying decision-making.

Crocoblock never stops on the way to simplifying your lives, guys. The long-awaited Dynamic Tables Builder feature has been released, so from now on, you can build a WooCommerce product table in a matter of minutes with the JetEngine plugin.

You get the basic functionality that is sufficient to present the products in a table view. Let’s create a WordPress table together.

Table of Contents

• JetEngine Dynamic Tables Builder Module Overview
  • Dynamic Tables Builder Features
• How to Build a WooCommerce Product Table?
  • Fill out the information about your products
  • Turn on dynamic tables builder
  • Create a Query
  • Name your table
  • Create columns
  • Create a dynamic listing template
  • Add purchase button
  • Style WooCommerce product table
• Inserting WooCommerce Product Table
• WooCommerce Product Table FAQs
• Conclusion

JetEngine Dynamic Tables Builder Module Overview

In the 2.9.0 version, our favorite plugin got split into Default and External modules. In the list of the latter, in turn, the Dynamic Tables Builder appeared.

By the way, if you missed the latest JetTalks, where Crocoblock’s CTO gave an update about JetEngine 2.9.0’s latest features, don’t hesitate to check the stream record.

Why is it so important that we create a separate article about a WooCommerce product table and so on?

Because JetEngine is growing, becoming a more powerful plugin that can replace 15+ other third-party plugins, particularly the WooCommerce product table plugin, and not overload your website.

Moreover, it provides more possibilities for your projects. You can showcase products within a wide variety of online WooCommerce stores featuring different catalog display requirements.

By the way, an excellent tool for any eCommerce is WhatsApp Business, to get in touch with your clients and provide good customer service. But is important to understand the difference between WhatsApp and WhatsApp Business.

The WhatsApp Business API is not only good for marketers, but also for Customer Support and Service staff as it provides more opportunities to build stronger relationships with customers through WhatsApp conversations. This can be done by sending personalized messages and offers to customers at the right time, while also being able to conduct short surveys and provide instant customer support.

It can be a basic price list or tables with product property columns, or you can add restaurant menus, catering price list, co-op wholesale, order options, etc. Or you can launch an online store with electronics and present gadgets in table layout. With JetEngine, it is possible to build any WooCommerce product list table.

Let’s take a sneak peek at the functionalities under the hood you can use for building a WooCommerce product table.

Dynamic tables builder features

Once you enable the Dynamic Tables Builder, the Tables Builder block becomes available in the JetEngine dashboard. It includes three tabs: General Settings, Columns, and Table Styles.

In the “General Settings” tab, you’ll see three options: Name, Data Query, and Fetch the data. There are short hints accompanying all the options to make things clearer. The general settings here allow you to name the future WordPress table and choose the source query.

The option “Fetch the data” doesn’t work with WooCommerce because the way it stores the data differs significantly. In any case, you won’t need this button to build the WooCommerce product list table.

The next tab — “Columns.” It is self-explanatory: here, you create and add columns for the future table. As for the Raw Value content, it works similar to meta fields.

Here you insert the name for a column, choose the content type to display, filter, and customize the column output, or use a previously created template (listing item) to incorporate its settings into the current columns. 

The Table Styles tab is responsible for table width, vertical and horizontal alignment, which you can set up both for title and column content.

You are always welcome to check the detailed article in our Knowledge base, explaining all the options and settings.

How to Create a WooCommerce Product Table?

You don’t need to be a genius to build a basic WooCommerce product database table with the Dynamic Tables Builder. Thankfully, the settings are intuitive enough to make the process easy.

Fill out the information about your products

I think it’s unnecessary to say that you should have WooCommerce products with filled price information, their In-stock/Out of stock statuses, attributes, categories, and tags. Right?

Turn on dynamic tables builder

Hopefully, you have done the initial step already — toggle the Dynamic Tables Builder on to activate it. Go to JetEngine > Tables Builder to proceed with your future table.

Create a Query

The next important step is creating a query because Dynamic Tables work based on the Query Builder. That’s right, it is all connected. You might ask: why do I need this query in the first place?

Stop here to remember how to create a query and then go straight to creating a products table. One more scenario where Query Builder is helpful is displaying the desired number of items on the table per page. This can be done in the Pagination tab by filling in the Limit field. Here you can modify the rows quantity on the table’s first page.

Name your table

Open the General Settings tab, find the Name placeholder, and give the name to your table. In Data Query, choose the one you’ve created before, and don’t forget to skip the Fetch Data step.

Create columns

For the next step, you’ll need columns for sure. Go to the Columns tab and let the table magic begin.

Give your column an exact and specific name. For instance, if you want to start the table with a product featured image, name the column Image.

Create a dynamic listing template

In the Column Content, let’s choose Template and create a dynamic Listing template for use later in your WordPress tables. Add the JetWooBuilder’s Thumbnail widget to the listing item to output the product’s image. After creating it, you’ll see a product featured image listing.

The next column will be the Product Name. Choose Raw Value as a Column Content; for Data Source, choose Post/Term/User/Object Field, and then find Title field under the WooCommerce Section.

Duplicate columns

Note that you need to perform this step as many times as the number of columns you require.

For example, if you want to add a Category column, change the name, choose the Categories Field, leaving Column Content and Data Source the same. Repeat the steps to display product tags, brand, size, availability, color. Don’t forget to select the appropriate option in the Field dropdown list.

For Price, choose Price HTML String to display sale prices.

Add purchase button

To add a Purchase button, you will need to create a template with an Add to Cart button for a single product or a button that redirects to the product’s page (for product variations).

Create a template alias Listing item for Products Purchase with the corresponding button, using the JetWooBuilder plugin and Add to Cart button widget. Then, choose the created Listing as the Column Content. Profit!

Click Reload Preview to look through the table and check if anything is missing or incorrect.

Style WooCommerce product table

Style your WooCommerce product table using the Table Styles tab and Elementor/Gutenberg styling capabilities.

In the Table Styles tab, adjust the Width of the Heading and Cell, Vertical and Horizontal Align individually for each column. For instance, set the width of the first column – Picture – to 180px and set 230px for the Product Name column. Play with those pixels to achieve the required table appearance.

You can change the height of the WooCommerce product table by adding or removing the products or adjusting the top and bottom padding; thus, the height is aligned automatically.

Note that other advanced styling options are available in Elementor and Gutenberg editors. 

Click on the Update Table button and proceed to the Pages Section to output the newly created table on the front end.

You might ask: OK, what if I want to create a WooCommerce variations table and showcase all the variations together?

As of now, the Dynamic Tables Builder can display product variations only in the form of text input. Crocoblock created a basic Tables Builder feature that covers the most demanding functions.

Also, please note that at the moment, you can’t remove the WooCommerce table row within the Dynamic Tables Builder. This feature is currently under development, so stay tuned.

How to Insert a WooCommerce Product Table in a Page?

At this point, you have a Product Table page created. Open it with Elementor, find a Dynamic Table widget, drag and drop it onto your page. Then, find settings, and choose Products Table as a Table source.

Here you can also use the horizontal scroll if you have multiple columns and show column names. 

Open the Style tab to fine-tune your WooCommerce product list table. Set the Table Alignment, and adjust Headers by playing with typography and defining Weight and Line-Height.

Choose Background and Text Color, change top and bottom padding, and align the text according to your preferences. Customize the Body Style and Border Type, and set the necessary Vertical and Horizontal Alignment. In a word, style everything to match the website’s design.

Like any WooCommerce product table plugin, the Dynamic Tables Builder allows adding pagination. It isn’t necessary if you only have ten or fewer items in your store, but you will need pagination if the product range is wide enough.

Make sure that you have the JetSmartFilters plugin installed and activated. Find a Pagination widget, put it underneath the Table, Select the Source — JetEngine Dynamic table, adjust Controls settings, and customize the widget a bit. 

Save the changes and look at what you get on the front end. I’m sure it’s pretty nice.

WooCommerce Product Table FAQs

The Bottom Line

That’s it for creating WooCommerce product list tables. If you try it, I’m sure you will see it’s extremely easy, thanks to JetEngine’s expanded functionality. Have you tried the Dynamic Tables Builder already? If so, feel free to share your experience with us.