How to Build a WooCommerce Product Database With Search, Sort, and Filter Features
How you display items on your e-commerce site plays a key role in improving both customer engagement and sales. For some sites, such as those selling technical products or offering a wide variety of items, standard product layouts aren’t the best way to do this.
By using a WooCommerce product database, you can show off your merchandise to best advantage. Plus, enabling your customers to search, sort, and filter items will help them find what they’re looking for quickly. As an added bonus, features such as Add to Cart buttons and product quick views can enhance customer engagement.
In this article, we’ll share some reasons why you might want to include a product database on your WooCommerce site. Then we’ll explain how to build one with our WooCommerce Product Table plugin, and how to add a quick view function to it. Let’s dive in!
Why you may want to include a product database on your WooCommerce site
For some online stores, traditional shop and product category pages list products in an effective way. They’re well suited to image-based products where the customer is happy to spend time browsing and looking at large images.
But what about other types of product? What about stores selling large quantities and a wide variety of merchandise?
With a WooCommerce product database, on the other hand, your customers can search, sort, and filter items to find what they need quickly. This is key to providing a positive User Experience (UX), and can even increase sales.
Additionally, a large image isn’t always the best way to show customers your merchandise. Some products, such as e-books or very simple items, are digital or simply aren’t very interesting to look at. In these cases, a short description or technical data may be more appropriate.
While this list is by no means comprehensive, here are a few examples of products that may sell better in a database format:
- Spare machine and car parts
- Storage bins, boxes, and other containers
- Gift cards
- Tickets to or registrations for events
- Services such as cleaning, pet sitting, and hauling
- Digital products such as music and e-books
Seeing a WooCommerce product database in action may give you a better idea of what it’s capable of and how you might use one on your own site. With that in mind, let’s look at a few examples of actual sites that use product databases made with the WooCommerce Product Table plugin.
Case study #1 – Yarn Gate’s wholesale product database
Yarn Gate is a wholesale store selling premium yarn and wool to B2B customers. Its product database includes images and a quick view feature with variation swatches, so customers can see all the available colors:
Since yarn isn’t all that visually interesting, individual product pages aren’t really relevant. Plus, using a WooCommerce product database significantly improves Yarn Gate’s website UX. Its customers can easily view and purchase multiple colors of yarn without having to navigate to several different pages. With this system, customers see more products at one time than they would in a typical WooCommerce layout.
By speeding up and simplifying the purchasing process, Yarn Gate is on the road towards maximizing sales. Its customers generally buy in bulk, so using a product database is the best way to streamline its customers’ experience and encourage them to buy more.
Case study #2 – First Kitchen’s database of parts & accessories
First Kitchens sells cabinet doors and other accessories for kitchens, and doesn’t need to display product images at all. Its database features dimensions instead, which is more useful information for its customers:
This company is using product databases in a unique way, in order to cross-sell its products. Each of this site’s product pages includes a table that lists related items, so customers can buy everything they need on a single page. It’s basically a list of related products, displayed in a database-style format.
Additionally, the tables of related products act as order forms. Customers can select product variations and add items to their carts right from the database. That way, just like the previous site we featured, visitors don’t have to navigate between pages.
We’ll discuss how to implement this technique on your own site next.
How to build a WooCommerce product database with search, sort, and filter features (in 4 steps)
While there are many ways to create a WC product database in WordPress, the simplest and most flexible option is to pick up our plugin, WooCommerce Product Table:
WooCommerce Product Table
This tool includes a variety of useful features, such as:
- The ability to list products in a searchable, filterable table
- Multi-select Add to Cart buttons to help customers make fast purchases
- Lazy load feature so that you can quickly list thousands of products in a single table
In the steps below, we’ll show you how to use this plugin to build your own WooCommerce products database.
Step 1: Install and activate the WooCommerce Product Table plugin
First, you’ll need to purchase WooCommerce Product Table. You can choose from a variety of license options:
Once you have the plugin, download the .zip file and make sure you have your license key on hand. Then, in your WordPress dashboard, navigate to Plugins and select Add New. Click on Upload Plugin at the top of the page, and choose the WooCommerce Product Table .zip file to upload and install it on your site:
Click the Activate Now button on the next screen to finish the process. You’ll now be able to access WooCommerce Product Table in your Plugins list. Select Settings beneath the plugin’s name, enter your license key on the next screen, and click on Save Changes:
The plugin is now fully activated, and you’re ready to start customizing its settings to create your Woo product database.
Step 2: Configure the WooCommerce database plugin’s settings
There are a wide range of settings for the WooCommerce Product Table plugin, which you can adjust to create the perfect product database for your merchandise. For instance, you can specify whether you want your database to include all of your products, or only items from a certain category. This can be useful if you want to use product pages for some items, and display the rest in an organized table.
You can also enable lazy loading, which can help improve your site’s UX if your database includes hundreds or even thousands of products. This can prevent slow loading times that cause frustration for customers. Just be aware that this particular feature will disable some of the plugin’s other functionality, in order to maximize speed.
Additionally, you can modify your table’s pagination settings. This will determine how many items are listed before customers have to visit the next page to see more. If you have a large number of products, increasing the number of rows per page can help keep your customers from having to click through many pages while browsing.
If you want, you could even turn your database into a convenient order form where customers can select product variations and add-ons right from your table. Combined with Add to Cart buttons and checkboxes, these features enable your users to customize and purchase their products without leaving your database page.
WooCommerce Product Table’s documentation includes a more complete guide to all of these settings and more. For now, we’ll focus in on enabling the search, sort, and filter features.
Adding search, sort, and filter features to your WooCommerce product inventory
Especially if you offer a lot of products, a long database can be intimidating to customers and difficult to sort through. To improve your database’s ease of use, you’ll want to add features that make it simple for users to search the database and find what they’re looking for quickly.
To get started, head to WooCommerce → Settings → Products → Product tables, and scroll down to the section labeled Sorting. Here you can make changes using the two drop-down menus. The first will determine your database’s default sort order. You can choose from a variety of characteristics, including product name, price, popularity, and more:
The second dropdown menu determines the sort direction, or whether the items are listed in ascending (A to Z, 0 to 99) or descending (Z to A, 99 to 0) order.
Next, scroll down to the Table Controls section to adjust the filter and search settings. The first dropdown menu here enables you to let customers filter products based on the table’s columns, or specific product characteristics:
The third dropdown menu in this section specifies whether a search bar should be displayed for the database, and if so, where it should be located.
With all of these settings enabled, your customers will be able to find their desired products in your database quickly. Don’t forget to save your changes to make them live.
Step 3: Customize your database’s columns
One of the best things about an e-commerce database created with WooCommerce Product Table is that you can customize what columns are displayed for your products. This option can be found on the same page as the settings we explored above, in the Table Content section.
First, you’ll want to determine what information your WC product database will include. The default columns are each product’s name, a short description, the price, and an Add to Cart button. However, there are many more column features you can choose to include, such as images and reviews:
If you do choose to feature images, you can specify their size and enable lightbox displays as well. The other settings here will enable you to display shortcodes in your table, set a word count limit for descriptions, and add links to your product pages. Including product page links in your table enables customers to quickly access more information about items they’re interested in.
However, if you’re using a product database in place of product pages, you can disable the product page links here as well. To do that, simply add none or false to the Product Links field.
Step 4: Add the database to your site
Finally, you’ll want to add your database to a page on your website. If you have a particularly large database, creating a new page is probably the best option. However, if you prefer to add your database to an existing page, you can do that instead.
Including your WooCommerce product database on any page is as simple as adding a shortcode:
[product_table] to any page, post, or widget. Your WooCommerce product database will now be visible to customers on the front end!
Adding quick view links to your product database
If you have high-quality images of your products, adding a ‘quick view’ feature to your Woo product database may be useful. Quick views have been shown to increase conversions, and they display your products in their best light.
Additionally, by keeping customers on your database’s page, you’ll encourage them to browse more products. Quick view and add-to-cart options enable easy browsing and purchases right from your database. Check out our complete guide to WooCommerce quick view.
To add quick view functionality to your WooCommerce product inventory, you can use the WooCommerce Quick View Pro plugin:
All you have to do is install and activate the plugin, and then add quick-view to the list of database columns in the WooCommerce Product Table settings (as we described above). After that, you can customize your quick view layout in the WooCommerce Quick View Pro plugin settings.
Including a WooCommerce product database on your site can help improve your customers’ experience and your sales. Our WooCommerce Product Table plugin makes it easy to add custom databases to your online store, and you can make them even better by combining it with WooCommerce Quick View Pro.
To build a product database for your WooCommerce site, you can:
- Install and activate the WooCommerce Product Table plugin.
- Configure the plugin’s settings
- Customize your database’s columns.
- Add the database to your site.
WooCommerce Product Table
Do you have any additional questions about building a WooCommerce product inventory with search, sort, and filter options? Leave them in the comments section below!
Image credit: Max Pixel.