How to Create WooCommerce Product Table on Your Online Store

If you run an online store using WooCommerce, you know that product organization and display are crucial for a successful shopping experience. With the right tools and features, you can make it easier for customers to find and purchase products from your store. 

That’s where WooCommerce Product Table comes in. This powerful feature allows you to display your products in a table format, making it easier for customers to compare and filter through different options. 

This guide will show you how to create WooCommerce product table on your online store.

Additionally, we will provide valuable insights on optimizing your product table to enhance the overall shopping experience on your WooCommerce store.

What is a WooCommerce product table? #

A WooCommerce product table is a compact and organized display of your products in a tabular format. It allows customers to view multiple products simultaneously, making comparing and purchasing easier. 

You can include product information such as name, price, image, description, and add to cart button in the table. Advanced search in product tables helps customers find items quickly. 

Store owners can customize the display for branding and user experience optimization. Highlighting key product attributes in a structured table enhances the shopping experience.   

Benefits of using a product table on your WooCommerce  store #

Incorporating product tables is necessary for those looking to improve the shopping experience on their WooCommerce store. These tables allow customers to easily browse your product offerings, gaining a clear and concise understanding of your available options. 

The benefits of utilizing product tables on your eCommerce site are numerous:

Improved Product Visibility: #

Product tables provide a condensed and organized view of your products, making it easier for customers to scan and quickly find the items they’re interested in.

Enhanced User Experience: #

The structured format of a product table simplifies navigation for users. They can easily compare products, view relevant details, and make informed decisions without browsing multiple pages.

Efficient Information Display: #

Displaying essential product information in a table, such as prices, variations, and product attributes, helps customers make quicker purchasing decisions without navigating to individual product pages.

Time-Saving for Customers: #

Product tables reduce the need for customers to click through various pages to view different products. This time-saving aspect can contribute to a more positive shopping experience.

Facilitates Bulk Purchases: #

Businesses and customers seeking bulk purchases find this feature convenient. It allows them to view and add multiple products directly from a product table to their cart. 

Customizable Layouts: #

Many product table plugins for WooCommerce offer customization options. You can choose the columns to display, adjust the order, and tailor the table to suit your specific product presentation needs.

Mobile Responsiveness: #

Modern product table solutions are often designed to be mobile-responsive, ensuring a seamless experience for users on various devices. This is crucial as mobile shopping continues to grow.

Support for Varied Product Types: #

Product tables can handle various product types and variations, including simple products, variable products, and even grouped products, providing a versatile solution for different e-commerce needs.

Recommended Documents for You:
👉 How to Filter WooCommerce Products by Custom Attribute: Step-by-Step Guide
👉 How to Find WooCommerce Consumer Key: The Essential Guide
👉 How to Find WooCommerce Store URL: Simple Step
👉 How to Fix WooCommerce Not Sending Order Emails: A Step-by-Step Guide
👉 How to Hide Prices in WooCommerce-Keep Your Pricing Secret

Choose the Right WooCommerce Product Table Plugin #

When choosing the right WooCommerce product table plugin, there are a few key factors to consider. These include:

• Compatibility with your theme: Ensure the plugin is compatible with your current theme to ensure seamless integration.
• Customization options: Look for a plugin that offers customization options for the product table according to your store’s needs.
• Advanced search features: Opt for a plugin that provides advanced search features such as sorting and filtering options.
• Integration with other plugins: Consider whether the product table plugin can integrate with other essential WooCommerce plugins, such as the WooCommerce Checkout Manager plugin.
• Reviews and ratings: Always check reviews and ratings from other users to ensure the reliability and effectiveness of the plugin.

Several product table plugins are available for WooCommerce, but one of the best is the JustTables—WooCommerce Product Table plugin. JustTables is designed to enhance the user experience by providing a structured and detailed view of your product catalog in a tabular format.

With advanced search features and easy column management, customers can quickly find what they want. The responsive layout ensures optimal user experience across different devices, improving accessibility and increasing conversions.

How to install the JustTables Plugin #

If you’re wondering how to create a WooCommerce product table on your online store using Justables, there’s no need to worry. Our intuitive guide will simplify the installation process. 

Follow these easy-to-follow steps to integrate the plugin seamlessly into your WordPress platform, enhancing your website’s functionality and performance. 

1. Manual Installation Guide #

To manually install JustTables, follow these steps:

Download the Plugin Zip File: #

Visit the JustTables plugin page and download the zip file to your local machine.

Log in to Your WordPress Admin Dashboard:  #

Access your WordPress admin dashboard and navigate to the “Plugins” section.

Click on “Add New”:  #

Within the Plugins section, click the “Add New” button at the top of the page.

Upload the Plugin: #

Select the “Upload Plugin” button. Choose the JustTables plugin zip file you downloaded and click “Install Now.”

Activate the Plugin: #

Click “Activate Plugin” to activate JustTables on your WooCommerce store once the installation is complete.

2. Installing from WordPress Directory #

To get JustTables from the WordPress plugin directory:

1. Go to your WordPress dashboard and click on “Plugins.” Inside the “Plugins” menu, choose “Add New.”
2. Type “JustTables” in the search bar and hit Enter.
3. Find the “JustTables” plugin in the search results and click “Install Now.”

Once the plugin is installed, click “Activate” to activate it.

3: Installing the Plugin via FTP Client #

To install JustTables using an FTP client, follow these simple steps:

Get the Plugin Zip File:  #

Head to the official JustTables plugin page and download the zip file to your computer.

Unzip the Plugin Folder:  #

Extract the downloaded zip file to get the JustTables plugin folder.

Connect to Your Server via FTP:  #

Use an FTP client like FileZilla, WinSCP, Cyberduck, or any other of your choice to connect to your web server.

Upload the Plugin Folder:  #

Find your server’s wp-content/plugins/ directory and upload the JustTables plugin folder.

Activate the Plugin:  #

Log in to your WordPress admin dashboard, go to the “Plugins” section, and locate JustTables. Simply click “Activate” to activate the plugin.

After activating the plugin, you will notice a new “Product Tables” menu in your WordPress dashboard. This menu provides access to the plugin’s various features and settings.

System Prerequisites #

• WordPress 5.0 or Higher
• PHP version 7.2 or greater
• MySQL version 5.6 or greater OR MariaDB version 10.0 or greater

How to Create WooCommerce Product Table with JustTable – WooCommerce Plugin #

In this section, we will show you how to create a WooCommerce product table to suit your requirements.

Adding a Product Table: #

After activating the JustTables plugin, you can create new product tables by following these steps: 

• Access the “Product Tables” menu on the sidebar, 
• Click on “Add New” to start creating a table, and 
• Provide a title for easy identification.

Table Configuration #

In the “Table Configuration” section, customize your product table with the following key options:

Columns #

Choose from various columns to display in your product table, including ID, thumbnail, product title, price, and more.

Conditions #

Define conditions for product inclusion based on taxonomy, term IDs, product IDs, author/vendor IDs, price range, product type, availability, and sticky products.

Sorting Options

Select default sorting methods for your table, such as ID, SKU, rating, stock, and price. Specify ascending or descending order.

Products Per Page

Control the number of products displayed on each page in your product table.

Utilities #

The “Utilities” section provides additional options to enhance the user experience of your product table. Here are the available options:

• Responsive Layout: Enable or disable the responsive layout feature.
• Responsive Content Display by Default: Enabling this option will display all columns for each product in your product table. When disabled, only a few columns will be visible by default. Once you manually click the plus button, it will reveal the rest of the columns.
• Table Header: Choose whether to enable or disable the table header.
• Header Sorting: Control the sorting behavior of the table header when enabled.
• Title on Click: Customize the behavior of the product title when clicked.
• Thumbnail Size: Personalize the size of the product thumbnail.
• Thumbnail on Click: Define the action when the product thumbnail is clicked.
• View Product Button Text: Modify the text for the “View Product” button.
• View Product Target: Specify whether the “View Product” action opens in the same or a new tab.
• Author/Vendor Name on Click: Determine the behavior when someone clicks on an author/vendor name.
• Add to Cart Button Type: Choose a small or large add to cart button.
• Search Box: Enable or disable the search box.
• Search Box Placeholder Text: Customize the placeholder text in the search box.
• Taxonomy Filter: Add product filters based on categories, tags, and variation attributes.
• Taxonomy Filter Display: Choose to show or hide the filter options by default.
• Export Buttons: Enable or disable export options such as Copy, CSV, Excel, PDF, and Print.

These options allow you to customize and optimize the functionality of your product table for an enhanced user experience.

Custom Styling #

In the “Design” section, customize the appearance of your product table, including font, wrapper, filter, table, header, body, pagination, and export & print styles.

Customizing Your WooCommerce Product Table #

The JustTables plugin offers flexibility to customize and configure product table columns, including Check Mark, Serial, ID, Thumbnail, Product Title, and Short Description. Additionally, you can control visibility, headings, widths, and alignments for further fine-tuning.

Customize Product Table Columns #

Several default columns are enabled in JustTables, including Check Mark, Thumbnail, Product Title, Categories, Stock, Price, Quantity, and Action. Additional columns can be easily enabled, with a comprehensive selection available.

Configuring Columns #

Toggling a column, like “Short Description,” provides essential customization options:

• Active: Enable or disable the column’s visibility. When enabled, it will show in the table.
• Heading: Modify the column heading title to ensure a complete and informative table.
• Width: Adjust the width of a specific column in the product table based on your needs. 
• Align: Choose different alignment settings for the column content and header.

Product Title Column #

When creating a product table, include the product title as a column. You can select the checkboxes for these additional elements to display the product’s rating, short description, and full description within the same column.

Adding New Columns #

If the default column options aren’t suitable, you have the flexibility to create a custom column at the bottom of the list. Select “Add New Column” to tailor the product table according to your preferences. 

Customize this column to fit your needs visually. You can showcase product ratings, images, or custom fields with flexibility. Easily arrange columns to your liking by dragging them up or down.

Customize WoCommerce Product Table Conditions #

JustTables allows you to set conditions for your product tables and display products based on specific criteria. Here are the key options available:

Taxonomy Include: #

• Add New: Define conditions to showcase products from specific categories or tags.
• Term IDs: Specify category or tag IDs to include, separated by commas. For example, entering “1, 2, 3, 4” will include products from categories or tags with those IDs.
• Include Children: Check to include child categories with the selected parent categories. Unchecked, only products from parent categories will be listed.

Taxonomy Exclude: #

• Add New: Like the “Taxonomy Include” option, you can set exclusion conditions for specific product categories or tags.
• Taxonomy: Choose between Product Categories and Product Tags to set exclusion criteria.
• Term IDs: Exclude specific category or tag IDs by listing them separated by commas to prevent their products from being listed. .
• Include Children: Similar to “Taxonomy Include,” this checkbox determines whether products from the child categories are also excluded or not.

Product Include IDs #

Enter specific product IDs separated by commas to display them in your table.

Product Exclude IDs #

Enter specific product IDs separated by commas to exclude them from the table.

Vendor Include IDs #

Display products from specific authors or vendors by entering their IDs, separated by commas.

Vendor Exclude IDs #

Exclude products from specific authors or vendors by entering their IDs, separated by commas.

Minimum Price #

Display products with prices above a certain minimum value.

Maximum Price #

Display products with prices below a certain maximum value.

Product Type #

Filter products based on their type by checking or unchecking specific types.

Availability #

• Display products based on stock availability.

Ignore Sticky Product #

• Determine whether sticky products are treated like regular products in the table.

Order By #

• Choose criteria for sorting products in the table, such as product ID, SKU, ratings, availability, price, title, and more.

Order #

• Select ascending or descending order based on the chosen criteria.

Products Per Page #

• Manage the product display on the table efficiently by controlling the number of products shown.

Optimizing Your Product Table for WooCommerce Store #

JustTables’ utilities provide various options to boost the flexibility and user-friendliness of your product table. These functionalities empower you to easily manage your table’s display, behavior, and appearance.

Responsive Layout: #

Enabled by Default: Ensures a great look on mobile and tablet devices.

Disable Option: If preferred, use the default table layout instead.

Responsive Content Display by Default: #

Enabled with Responsive Layout: Hides some content on smaller screens for a neat appearance.

Enable Option: Displays all content by default on responsive layouts.

Table Header: #

Enabled by Default: Shows labels for each column.

Disable Option: If unnecessary, you can choose not to show the table header.

Header Sorting: #

Enabled with Table Header: Includes sorting functionality.

Control Option: Choose whether users can sort the table by the header.

Title on Click: #

Customizable Behavior: Modify what happens when a user clicks on a product title.

Thumbnail Size: #

Customize product thumbnail dimensions for different sizes with control.

Thumbnail on Click: #

Choose the behavior when a user clicks on a product thumbnail (Nothing, Popup, View Product).

View Product Button Text: #

Change the text on the “View Product” button.

View Product Target: #

Choice: Decide if clicking “View Product” opens in the same or a new tab.

Vendor Name on Click: #

Control Behavior: Control what will happen once a user clicks on a vendor name.

Add to Cart Button Type: #

Options: Choose between a Small or Large button for the “Add to Cart” functionality.

Search Box: #

Optional: Enable a search box within the product table.

Search Box Placeholder Text: #

Modify the placeholder text within the search box.

Taxonomy Filter: #

Filter Option: Add product filters based on categories, tags, and variation attributes.

Export Buttons: #

Choose your format preferences to enable buttons for copying, exporting to CSV, Excel, PDF, and printing.

Rename Labels: #

Rename various labels in the product table to fit specific needs.

Pagination: #

Enabled by Default: Breaks products into multiple pages.

Disable Option: Display all products on a single page if preferred.

Preloader: #

Enabled by Default: Adds a loading effect before the table appears.

Disable Option: Turn off the preloading effect if not desired.

Table Extra Class Name: #

Custom Styling: Style the table with a custom CSS class.

Table Wrapper Extra Class Name: #

Additional Styling: Add a custom CSS class to the table wrapper for more styling options.

Customize the Design of Your Product table with Different Style #

JustTables offers various styling options, enabling you to customize your product table to align with your brand and design preferences. Below, we’ll delve into various design elements you can control using JustTables:

Table Design #

General Style #

• Font Family: Choose between your active theme’s font or set a custom default font for the product table.
• Pre-Loading Icon Color: Customize the color of the preloader icon for seamless integration with your design.

Wrapper Style #

• Background Color: Customize the table wrapper’s background color to match your website’s theme.
• Border Properties: Define the border width, style, color, and radius for precise control over the wrapper’s appearance.
• Padding and Margin: Set spacing around the table for ideal alignment within your webpage layout.

Filter Style #

• Background Color: Customize the background color of table filters.
• Border Properties: Define border width, style, color, and radius for control over filter appearance.
• Padding and Margin: Adjust spacing around the table filters for optimal alignment.

Table Style #

• Modify the overall style of the product table by controlling the background color, border properties, padding, and margin.

Header Style #

• Customize the style of the table header, including fonts, colors, background, and border properties.

Body Style #

• Define a distinctive style for the table body, including background and text colors, accent and hover colors, borders, responsive column dividers, padding, and text alignment.

Pagination Style #

• Customize the style of pagination elements to blend with your overall design seamlessly.

Export & Print Style #

• Style the appearance of export and print buttons for consistency with your website’s look and feel.

Display your product in Table format #

After configuring and publishing a product table with your desired settings using JustTables, a shortcode will appear on the right side of the product table edit screen.

The shortcode structure for the JustTables WooCommerce product table plugin is as follows:

[JT_Product_Table id=”1140″]

The JustTables shortcode starts with JT_Product_Table, followed by the product table ID enclosed in double quotation marks: id=”product table ID.” The entire shortcode is wrapped in square brackets [ ].

Now, let’s explore using this shortcode on the frontend view.

Copy the JustTables Shortcode #

Once the shortcode is generated, you can easily copy it.

Using Page Builders #

Regardless of the page builder you use – whether it’s Elementor, Gutenberg, Divi, Beaver Builder, Brizy, Visual Composer, Oxygen, or any other – you can employ the JustTables shortcode if your page builder supports shortcodes. Here’s how to do it:

• Open your page editor and navigate to the page where you want to display the product table.
• Look for the shortcode block.
• Insert the shortcode block into your page.

The default WordPress block editor is sufficient to display a table using the shortcode.

Simply paste the shortcode copied from the JustTables post into the shortcode widget, and your product table will be displayed on the front end as desired.

Frequently Asked Questions #

Conclusion #

Creating a WooCommerce product table for your online store can greatly improve the user experience and increase sales. Following the steps outlined in this post, you can easily create a customizable and dynamic product table that will make browsing and purchasing products a breeze for your customers. 

Ensure your design is sleek yet informative, paired with captivating product images. Provide customers with clear and concise information to guide them toward purchasing. 

Upgrade your presentations with the JustTables WooCommerce Product Table plugin. Enjoy filters, sorting, seamless column management, responsive layouts for different screens, and customer reviews.  These upgrades will elevate your presentation to a higher level.

Don’t miss out on the opportunity to enhance your customers’ online shopping experience with WooCommerce Product Table – give it a try now!