How To Create A Table Of WooCommerce Products With A Plugin
January 10, 2018
Ever wished that you could create a sortable, filterable table that contains all or some of your WooCommerce products?
If you’re running a WooCommerce store, you know that WooCommerce already comes with a dedicated shop archive page that helps you showcase individual products. But, depending on what you’re selling, that might not always be the most efficient way to showcase your products.
That is – sometimes showing WooCommerce products in a table is more effective.
And if that sounds like the situation you find yourself in, this post is for you because I’m going to show you how to create a table from your WooCommerce products using a plugin called WooCommerce Product Table from Barn2 Media.
Here’s why and how it can help your WooCommerce store, summarised into a 1 minute video:
What Can You Do With A WooCommerce Product Table?
While not a complete list, here are some situations in which a product table can offer visitors a better experience than your regular shop archive page:
Wholesale stores – if you’re selling lots of wholesale products, giving your shoppers an easy way to sort/filter a table can be more friendly than making them browse individual product pages.
Product catalogs – similarly, if you just want to display an easy-to-browse product catalog, a table with AJAX sort/filtering is going to save shoppers time (and page reloads).
Order forms – if you want to create an order form based on WooCommerce products, a table provides a super easy way to do it. This is also a great approach to display a restaurant menu and accept online orders.
For example, here’s a great demo showing how you can create an online restaurant ordering system using a product table:
And here’s another example showing how to create a personalized order form for a customized gift box:
I hope those two examples illustrate that using tables actually gives you the flexibility to do a ton of cool things with WooCommerce that wouldn’t otherwise be possible.
How To Create A Table From WooCommerce Products
All those demos from above were built with the WooCommerce Product Table plugin. And that’s the same plugin that I’m going to use to show you how to build your own table of WooCommerce products.
The plugin is singularly focused on creating product tables. And through its interface and shortcode parameters, you can customize pretty much every aspect of how your table functions.
Here are some of the most helpful features, in my opinion:
Easily add or remove columns. You can even add columns that contain custom fields or custom taxonomies, and WooCommerce Product Table is fully integrated with Advanced Custom Fields.
4 included filter widgets. These let you provide readers with a seamless experience by offering filtering options in your sidebar.
Product variation/attribute support. Choose from 3 different ways to display product variations in your table.
Multi-select boxes. These make it easy to create order forms by allowing customers to select multiple products before adding them to their carts.
Instant search, sort, and filter. Customers can manipulate your table data without any page reloads.
AJAX add to cart. Similarly, customers can add products to their carts without page reloads.
Lazy load capability. Helpful for improving performance for large tables (though this will affect the ability to offer instant sorting/filtering)
Here’s how to use the plugin…
Step 1: Configure Default Table Functionality
After you install and activate WooCommerce Product Table, the first thing that you’ll want to do is set up the default functionality for your tables.
This essentially sets the default behavior for the plain shortcode. But you can also modify this behavior for individual tables by adding shortcode parameters, so none of these settings are set in stone.
To access the plugin’s settings, go to WooCommerce → Settings. Then, click on the Products tab and choose the Product tables option:
Configuring How Your Tables Look
First up, you can choose the style for your table in the Table design section. You can either go with:
Default – as you’d expect, uses the plugin’s default settings without any further input required on your part. It will try to pull from your theme styles whenever possible.
Custom – when selected, expands a list of styling options that lets you customize colors and font sizes without the need for custom CSS.
Once you set up your styling, you need to configure the shortcode defaults. Again – you can modify these for individual shortcodes by passing shortcode parameters. But setting these up will save you time and makes things a bit simpler later on:
Most of the settings are self-explanatory, and you can see that WooCommerce Product Table does a good job of providing tooltips or support doc links to help you learn more about each setting.
Once you configure the shortcode defaults, you can scroll down further to configure some more advanced settings regarding layout and functionality:
Again, the plugin does a good job of providing additional information for any of the settings that might be a bit confusing.
One thing to pay attention to here is the Lazy load limitations. If you decide to use lazy load to speed up your store, you’re going to limit the plugin’s search and sorting functionality.
Once you finish configuring things, make sure to save your changes.
As I mentioned, WooCommerce Product Table includes four widgets to help you add user-friendly filtering options in your sidebar (like you can for regular WooCommerce stores).
To access them, go to Appearance → Widgets like normal and drag over your desired widgets:
Step 3: Add Shortcode Where You Want Your Product Table To Display
You’re at the finish line! Now, all you need to do is add the [ product_table ] shortcode wherever you want your table to display.
By default, the shortcode will function according to the settings you chose in Step 1. But if you’d like to customize the functionality for specific shortcodes, you can do so using the many well-documented shortcode parameters.
For example, to only use the table on products from a specific category, you could add a parameter like this:
[ product_table category=”hats” ]
You can even get creative and use AND/OR conditions here.
[ product_table category=”hats+featured” ] displays only products that are in both the hats and featured categories.
[ product_table category=”hats,featured” ] displays products that are in either the hats or the featured category.
This attention to small details is what makes WooCommerce Product Table so great.
If you prefer to follow a video explaining all of this, the Barn2 team has a detailed overview below:
WooCommerce Quick View
The new WooCommerce Quick View Pro plugin is the perfect companion to the Product Table. It allows customers a “quick view” of a specific product without requiring them to navigate to the product page. This is perfect if there is too much information to fit in the table.
You can use it as a WooCommerce add to cart popup plugin, letting customers choose variations and product options from the quick view or as a standalone WooCommerce gallery lightbox plugin, showcasing the full product image gallery in a popup with zoom features.
You are able to choose what to include in this view and normally displays information such as a full product gallery, product variations and attributes, short product description, quantity picker and add to cart button, and extra product information such as reviews, price, categories, tags and SKU.
And that’s pretty much all there is to getting up and running with a table of your WooCommerce products!
WooCommerce Product Table Pricing
WooCommerce Product Table is exclusively a premium plugin. While there are some free options listed in the WordPress.org repo, I haven’t found any that are as flexible, well-documented, or professionally supported, so I think WooCommerce Product Table is worth its price tag, which is…
1 site – €89
5 sites – €159
20 sites – €319
Go Out There And Build Your Table
If you’re willing to think outside the default WooCommerce box, creating a table from your WooCommerce products opens up a ton of possibilities for everything from wholesale stores to restaurants and shops selling customized products.
And to create a table with WooCommerce products, WooCommerce Product Table has the best combination of flexibility and simplicity that I’ve found.
Give it a look and let us know how it worked for you!