Depending on the types of products you’re selling, WooCommerce’s default shop page layout may not offer the best shopping experience for customers. One way to improve customer engagement and boost sales is by creating a product table with WooCommerce product filter options.
This allows you to:
- showcase more products on a single screen,
- make it easy for customers to find exactly what they’re looking for, and
- allow customers to quickly add products to the cart.
- display the total product count under the product table.
With this in mind, in this article, we’ll show you how you can use a WooCommerce product filter plugin – WooCommerce Product Table – to list products in a table layout along with advanced product filtering options. Before we begin, let’s quickly step through some scenarios where it makes sense for you to add a WooCommerce product filter to your e-commerce store.
Why (and when) you might need to add a WooCommerce product filter to your online store
The standard shop and product category pages you get out of the box with WooCommerce are well-suited to some types of online stores. For example, stores that sell image-centric products such as watches and jewelry, furniture, or shoes and clothes. Customers are generally happy to spend time browsing product catalogs and viewing large product images.
However, a WooCommerce shop that sell …
- Less visual products
- Products with lots of specifications
- Products that are typically sold in large quantities
… aren’t able to deliver the best possible customer experience using the default shop page layout.
One of the easiest ways to enhance the default shop page layout is by listing products in a front-end table layout with WooCommerce product filter options. This way, customers will be able to search, sort, and filter products to find exactly what they’re looking for, quickly. Not to mention, it's also great for SEO.
Let’s look at some use case scenarios where it makes sense to list products in a table layout with WooCommerce products filters:
- Technical products, electronics, and appliances Customers purchasing technical products or electronics are more interested in learning about product specifications than they are in viewing a product gallery. With a product table, you can list product specs on the front-end in an SEO optimized way.
- Wholesale goods Wholesale buyers generally have an idea of what they need to purchase. These customers need an efficient way of finding what they’re looking for. Instead of focusing on delivering the best product browsing experience, you’d need your shop page to have search, sort, and filter options.
- Larger product catalogs Stores that sell hundreds (or even thousands) of products need to be able to let customers filter through their entire product catalog. This makes it easier (and faster) to find and purchase products.
If you’re selling products that fit these criteria, you might consider showcasing them in a table layout using a WooCommerce product filter plugin.
Best WooCommerce product filter plugin for online stores
WooCommerce Product Table is a WooCommerce product filter plugin that lets you list products in an AJAX-based, front-end table layout. The table has various options for letting customers search, sort, and filter products. You can add the product table to any page (or post) on your online store using a shortcode.
In addition to this, it also lets you choose which columns to show in the product table. For example, if you’re selling clothes, gift items, food, stationery, accessories, or sports gear, you might choose to display the product’s image, name, description, price, rating, and add to cart buttons. Whereas, if you were selling e-books, hardware goods, or electronics, you might consider leaving out the product image since it doesn’t offer much value to the shopper.
Here are some of the standout product filter features on offer with the WooCommerce Product Table:
- Includes custom widgets out of the box to let customers filter products by attribute, price, or rating.
- You can add product search filters above the table to let customers filter products by category, tag, taxonomy, or attribute. This way, you don't need to create a separate search form.
- Customers can filter products by attributes using a dropdown list or sidebar widget.
Having WooCommerce product filter options makes it easy for customers to quickly find what they’re looking for and add multiple products to cart at once. Implementing this simple function will help you enhance customer engagement, increase conversions, and ultimately boost sales.
Next, we’ll show you how to use the WooCommerce product filter plugin to list products in a dynamic, AJAX-based table layout.
How to add a WooCommerce product filter to your online store
While there are many options to add simple product filters to your online store, the WooCommerce Product Table plugin is one of the most robust and flexible solutions out there. It offers several neat and useful features such as multi-select Add to Cart buttons, lazy load functionality, and product filtering options. It integrates seamlessly with the WooCommerce plugin.
Here, we’ll show you how you can add a WooCommerce product filter to your online store using the WooCommerce Product Table. For this tutorial, we’ll assume you already have the latest version of WooCommerce installed and activated with some products added to your online store. The plugin works with just about every WooCommerce and WordPress theme or page builder (like Elementor).
Step #1: Install and activate WooCommerce Product Table plugin
The first thing you need to do is install the WooCommerce Product Table plugin to your online store.
- Get the WooCommerce Product Table plugin. You’ll find the plugin’s files and license key in the confirmation email.
- Log in to your WordPress website and head over to Plugins -> Add New.
- Upload the plugin’s files to your site and click the Activate button to proceed.
- Head over to WooCommerce -> Settings -> Products -> Product tables from the admin panel.
- Copy and paste the plugin license key from the confirmation email into the License key field.
- Click the Save Changes button at the bottom of the screen to continue.
Now that the plugin license is activated, you can add a product table to any page (or post) on your WordPress website using the shortcode
Step #2: Configure product filter settings
From the same screen (i.e. WooCommerce -> Settings -> Products -> Product tables screen), you’ll be able to configure the plugin’s settings. You can use these options to create the perfect front-end product table – with WooCommerce product filter options – for your online store.
2.a Decide how to load products
WooCommerce Product Table lets you decide how products are loaded in the table layout. These options are available under the Loading products section in the setting screen.
You can configure your front-end table’s pagination settings to determine how many products to list on one page. In other words, this determines how many products customers can view on a single screen before visiting the next page. Depending on the types of products you’re selling, you can set the Rows per page field to set the number of products to showcase per page of results.
Additionally, you can also enable lazy loading. This helps improve your site’s user experience and is particularly useful for WooCommerce stores that sell hundreds (or thousands) of products. Another benefit of enabling lazy load is that it prevents slow loading times which can be frustrating for customers. It’s important to note that enabling this feature will disable some of the WooCommerce Product Table’s other functionality.
2.b Configure WooCommerce product filter options
With WooCommerce Product Table, you’re also able to configure various controls for your product table. These options are available under the Table controls section in the setting screen.
For example, you can choose which product filters to display as dropdown lists in the table layout. Out of the box, the available options include Disabled, Show based on columns in the table, and Custom.
You can filter WooCommerce products by:
- Custom taxonomies
- Average rating
- Additional options provided by third-party filter plugins
There are unlimited filters to choose from!
2.c Filter dropdown lists above the table
If you decide to go with Custom, you can specify your filters in the Custom filters field above the table. You can specify which product filters to display regardless of which columns you’ve decided to show in the table layout.
Here are the options available to you:
categories– For displaying the product categories as a filter option.
tags– To display the product tags as a filter option.
attributes– To display all available product attributes as a filter option. This displays one filter for each available product attribute. For example, if your product attributes are size and color, you will have two filter options above the table. In other words, customers will be able to filter products by size and by color.
- Taxonomy column – This displays products for the custom taxonomy specified as a filter.
- Attribute column – This displays products for the custom attribute specified as a filter.
2.d Native filter widgets
The WooCommerce Product Table plugin packs its version of all of the built-in filter widgets you get with WooCommerce.
- Product Table: Active Product Filters. This native filter widget displays the active filters allowing customers to see which filters are already in place.
- Product Table: Filter Products by Attribute. Lets customers filter the WooCommerce products in the table layout by selecting one (or more) attributes using checkboxes or radio buttons.
- Product Table: Filter Products by Price. You can use this filter widget to add a price range slider or a price filter. Customers can drag the price slider to set a budget and view all WooCommerce products within their price range.
- Product Table: Filter Products by Rating. Use this filter widget to let customers refine the product table to show products based on their star ratings.
You can add any filter combination of these native filter widgets to any widgetized area on your online WooCommerce store. For example, you might consider adding it to your left or right sidebar. It’s important to note that the filter widgets only work on pages (or posts) that contain product tables. This is a great way to enhance your online store's user interface.
Here’s how you can add WooCommerce Product Table filter widgets to pages:
- Head over to Appearance -> Widgets from the WordPress admin panel.
- Browse the list of available widgets and look for the ones that start with Product Table.
- Select a widget and drag and drop it into a widgetized area to the right.
- Configure the product filter widget’s settings as needed.
- Click Save for each widget.
For more information, be sure to check out WooCommerce Product Table’s complete guide to all of the available settings.
2.e Third-party filter plugins that integrate with WooCommerce Product Table
If you’d like to create AJAX filter widgets with WooCommerce product category dropdowns, you’ll need to integrate with a WooCommerce filter plugin. This is because the filter widgets that come out of the box with WooCommerce only let you filter products by product attributes, price, or average rating.
So, to achieve this sort of functionality, you’ll need to install an additional WordPress plugin. We recommend going with either BeRocket or WOOF filter plugins as they integrate seamlessly with the WooCommerce Product Table.
Both WooCommerce filter plugins provide several ways by which customers can filter by category. More specifically, you can:
- Let customers filter by category, tags, product attributes, and custom taxonomies in one go.
- List categories either as dropdowns (for selecting a single category at once) or checkboxes (for selecting multiple categories at once).
The best part is that you can use both plugins in combination with the WooCommerce Product Table to add multiple category dropdowns to your online store. The key benefit is that you’ll be able to facilitate all kinds of customer shopping behaviors. In other words, you’ll be making it easier for customers to:
- Select a category from above the product table.
- Click on a category to see other products from the same category.
- Use sidebar widgets to perform multiple filters in one go.
Check out the complete tutorial for step-by-step instructions on how to use BeRocket or WOOF with the WooCommerce Product Table plugin.
Adding a WooCommerce product filter to product tables is a great way to enhance your customers’ shopping experience on your online store and, ultimately, increase conversions and boost sales.
The WooCommerce Product Table plugin makes it incredibly easy to add WooCommerce product filter options to your online store. You can customize your product table however you’d like to fine-tune it to the types of products you sell. To take things further, you can also integrate with WPML to cater to a global market.
Do you have any questions about how to add WooCommerce product filters to your online store? We’re happy to help so let us know in the comments section below!