How to Create a WooCommerce Product Table

If you run an online store, you’ve likely faced the challenging task of managing vast product catalogs. While a diverse product range is essential for attracting customers, it can also lead to issues with organization and accessibility. Customers may find it difficult to locate specific items they’re looking for.

So imagine if shoppers could easily navigate your store, effortlessly sorting and browsing your products. Wouldn’t it be great if they could quickly find exactly what they’re interested in without having to scroll through endless pages?

That’s why Crocoblock never stops on the way to simplifying your lives, guys. With its Dynamic Tables Builder feature, 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. So, let’s wait no longer and create a WordPress product table together.

Table of Contents

• What Is a Product Table?
• JetEngine Dynamic Tables Builder Module Overview
• Dynamic Tables Builder Features
  • General Settings tab
  • Columns tab
  • Table Styles tab
• Create WooСommerce Product Tables Using JetEngine
  • Style WooCommerce product table
• How to Insert a WooCommerce Product Table on a Page?
• WooCommerce Product Table FAQs
• Conclusion

What Is a Product Table?

A product table is a digital representation of a physical product catalog. It’s a structured list that outlines the essential details of each item offered for sale on an online store. This table typically includes key information such as product name, description, price, quantity, category, and image.

The primary purpose of a product table is to provide potential customers with a clear and concise overview of the products available for purchase. By organizing this information in a tabular format, online shoppers can easily compare different options, identify desired features, and make informed buying decisions.

Furthermore, eCommerce product tables play a crucial role in inventory management and order fulfillment. By accurately tracking product details, businesses can ensure that they have sufficient stock to meet customer demand and avoid stockouts. Additionally, these tables streamline the order processing and shipping process, as they provide essential information for packaging and delivery.

JetEngine Dynamic Tables Builder Module Overview

As you may know, our favorite plugin has Default and External modules. Dynamic Tables Builder can be found in the latter list. In addition, we have our JetTalks series on YouTube, where Crocoblock’s CTO gave an overview of JetEngine features, so don’t hesitate to check the stream record.

Because JetEngine is growing, becoming a more powerful plugin that can replace 10+ 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.

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

The WhatsApp Business API is good not only 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.

Now, let’s take a sneak peek at the JetEngine functionalities under the hood you can use to build a WooCommerce product table.

Dynamic Tables Builder Features

To get started, you need to navigate to the WordPress dashboard and click on JetEngine. In the External Modules section, enable the Dynamic Tables Builder module so the Tables Builder becomes available in the JetEngine menu.

Go to “Tables Builder” and then click the “Add New” button to create a new table.

Now you are in Tables Builder settings, which include three tabs: General Settings, Columns, and Table Styles.

General Settings tab

Here, you can 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.

Columns tab

It is self-explanatory: here, you create and add columns for the future table. As for the Raw Value content, it works similarly 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. Furthermore, you can click the Reload Preview button to see your table.

Table Styles tab

This tab is responsible for table width and vertical/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.

Create WooСommerce Product Tables Using JetEngine

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.

1. Enable the Dynamic Tables Builder module

As it’s mentioned before, you need to enable the Dynamic Tables Builder toggle to activate it. Go to WordPress Dashboard > JetEngine > Tables Builder to proceed with your future table.

2. Create a Query

Creating a query is a crucial step because Dynamic Tables rely on the Query Builder to function. This connection ensures that your data is accurately fetched and displayed in your tables. Because query serves as the foundation for organizing and retrieving the specific data you want to showcase in your table, making the entire setup efficient and tailored to your needs.

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 row quantity on the table’s first page.

3. 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.

4. Create columns

For the next step, you’ll need columns for sure. Go to the Columns tab and 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.”

5. 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 the Column Content; for Data Source, choose “Post/Term/User/Object Field,” and then find the Title field under the WooCommerce Section.

6. 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, and color. Don’t forget to select the appropriate option in the Field dropdown list. For Price, choose “Price HTML String” to display sale prices.

7. Add a 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 Product 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, as well as the vertical and horizontal alignments, 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.

If you want to create a WooCommerce variations table to showcase all variations together, the Dynamic Tables Builder displays product variations as text inputs. Crocoblock’s Tables Builder offers a streamlined solution with essential features to meet your needs effectively.

Also, please note that you can’t remove the WooCommerce table row within the Dynamic Tables Builder at the moment. To avoid deleting items, we can configure the query to display only what we need.

How to Insert a WooCommerce Product Table on a Page?

At this point, you have created a Product Table page. So the next steps are:

• Open your Product Table page with Elementor.
• Find the Dynamic Table widget and drag and drop it onto your page.

Configure the Table Settings

• Go to the settings and choose “Products Table” as the Table source.
• Enable horizontal scroll if you have multiple columns, and choose to show column names.

Style your table

• Open the Style tab to customize your WooCommerce product list table.
• Adjust Table Alignment, tweak Headers with typography settings, and define Weight and Line-Height.
• Choose Background and Text Colors, adjust the top and bottom padding, and align the text as needed.
• Customize Body Style and Border Type, and set Vertical and Horizontal Alignment. Style everything to match your website’s design.

Add pagination

• Use the Dynamic Tables Builder to add pagination, which is especially useful for stores with more than ten items.
• Ensure the JetSmartFilters plugin is installed and activated.
• Find the Pagination widget, place it underneath the table, select “JetEngine Dynamic table” as the Source, and adjust the Controls settings as needed.

Save and preview

Save your changes and preview the table on the front end. You should see a well-styled and functional product table that aligns with your website’s design.

FAQ

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.