If you're looking to enhance your WooCommerce store and provide a seamless shopping experience for your customers, you're in the right place. In this easy-to-follow tutorial, we will discover a plugin that can adds an instant WooCommerce AJAX search box to your store, plus other controls such as AJAX product filters. This makes product discovery a breeze for your customers.
The search box that comes with WooCommerce is pretty basic. A WooCommerce AJAX search plugin adds a more advanced search, with no page reloads.
In this comprehensive guide, we'll go beyond the basics of setting up a WooCommerce AJAX search. You'll learn how to use the WooCommerce Product Table plugin to list products in a quick order form view, complete with AJAX search box. We'll also show you how to add AJAX-powered product filters with the WooCommerce Product Filters plugin. This makes it even easier for your customers to narrow down their product search. That way, they can find exactly what they're looking for without any hassle.
The end result will look something like this:
Or if you want advanced filters to speed up the process of finding products, then it might look more like this:
Either way, keep reading to learn how to add WooCommerce AJAX search and filtering to your online store.
What is WooCommerce AJAX search?
First, we need to understand what WooCommerce AJAX search means. After all, "AJAX" is a very technical term!
There are a few simple ways you can use AJAX to make it easier for customers to find the products they’re looking for:
- Product searching is when a customer enters a relevant keyword in a search bar to find a particular product title. The keyword is typically matched against the product name, product short description, SKU lookup, or something similar.
- Product sorting lets customers change the order in which your WooCommerce products are listed. Search results are re-ordered based on sort attributes such as relevance, date added, price low-high (or high-low), average buyer rating, or other product data.
- Product filtering helps narrow down the number of search results based on selected attributes such as product categories, tags, or other data.
Of course, the best methods for your WooCommerce store would depend on the type of products you sell. Many store owners prefer to go for a combination of all three. This way, customers can search for the products they’re looking for and then sort or filter them by different parameters, making their shopping experience more efficient and enjoyable with one of the best WordPress search plugins available on the market.
WooCommerce needs AJAX-based product search options because they create a more user-friendly, interactive search experience. If searching, sorting and filtering are powered by AJAX, then it means that it happens instantly without reloading the page. This improves the customer’s experience with your online store and makes for a more intuitive buying user flow.
Why most WooCommerce stores need AJAX-based product search
If you have more than about 15 products, then your customers will expect quick and easy ways for them to narrow down the list.
Here are some of the main benefits of offering AJAX search, sort and filter in WooCommerce:
- Help customers find products faster WooCommerce AJAX search and sort allow customers to find products faster and quickly narrow down the product catalog. For example, if you sell all sorts of clothing, customers can search for t-shirts only. And once they have a WooCommerce AJAX search result of all t-shirts, they can sort products by price.
- Improve e-commerce store navigation WooCommerce AJAX search and sort options make it easier for customers to browse through the more relevant results of products. In other words, they see the products they’re most interested in purchasing. For example, this could be products that fit their budget or specific requirements (such as red t-shirts).
- Increase salesWhen customers can find products faster and more easily, they’re more likely to make a purchase. Put simply, the WooCommerce AJAX search and sort options help customers make quick buying decisions.
Should you offer search and sort options?
For most online stores, having WooCommerce AJAX search and sort options is essential. Here are a few ideas about who should offer search and sort options in WooCommerce:
- Large product catalogBrowsing stores with large product catalogs isn’t user-friendly. WooCommerce AJAX search and sort options enable customers to easily find what they’re looking for in your online store. They can choose to view only the products they’re interested in buying.
- Sell products at different price pointsIf you sell products at different price points, you can give your customers the customization option to sort by price – either low-to-high or high-to-low. Customers can simply sort products by price which helps them quickly find what they want based on their budget.
- Sell a wide variety of productsStores that sell all sorts of products can make it easy for their customers to sort products by category or type. For example, customers might want to view only boots or sandals. You can give them the option to sort by product type or let them search for a type of product.
As we have seen, the search function on an e-commerce website is crucial for customers to find the products they want quickly and efficiently. A WooCommerce AJAX search plugin offers several features that can improve the search experience for customers, leading to increased sales and customer satisfaction.
Here are two case studies of how WooCommerce AJAX search has improved shopping for customers of two different types of online store.
Instant search results for an online clothing store
An online clothing store was experiencing a high bounce rate on its website, particularly on the search results page. They realized that customers were not finding what they were looking for quickly enough, which led to frustration and a poor user experience. To address, this they installed the WooCommerce AJAX search plugin.
By implementing the instant WooCommerce AJAX search results feature, customers were now able to see real-time results as they typed in their search queries. This helped customers find what they were looking for much faster and reduced the time spent searching. As a result, the clothing store's bounce rate decreased, and they saw an increase in sales.
Autocomplete suggestions for a bookstore
A bookstore was struggling to keep up with the number of books they had in their inventory, which made it difficult for customers to find what they were looking for. They decided to implement the WooCommerce AJAX search plugin to help customers find books faster.
By using the autocomplete suggestion feature, customers were provided with relevant suggestions as they typed in their search queries. This not only helped customers find what they were looking for but also helped reduce typing errors. In addition, they implemented the WooCommerce search by SKU, which enabled customers to search for books using their SKU lookup numbers.
Now that you know how you can benefit by offering live search and sorting options on your store, let’s take a closer look at the default WooCommerce AJAX search features and their limitations.
Does WooCommerce have AJAX search?
In a word, no.
There are several major problems with the product search which comes with WooCommerce itself:
- No live AJAX search - The default WooCommerce search doesn’t offer live search options. What this means is it won’t display search results as you enter letters in the search field. You have to click the search button to start searching for products. Considering most online shoppers are accustomed to live search (think search engines, Amazon, and eBay), you need to offer WooCommerce AJAX search and sort options for your own online store. The easiest way to do this is by using a WooCommerce AJAX search plugin.
- It's limited to complete word searching - WooCommerce’s default search function lets you search only after you’ve entered the full words in the search box. Once you enter the full search query, the search results are displayed on a separate page. While this might be suitable for blogs or business sites, it certainly doesn’t deliver the best user experience for WooCommerce stores. What this means in the context of WooCommerce is that your customers can only find a product by entering the full product name. The good news is that WooCommerce store search can work with multiple word order patterns. So, for instance, if you’re searching for a product called floral print dress and you type in dress floral print, the WooCommerce store search will return the correct word order pattern i.e. floral print dress.
- No SKU search - Many customers like to find specific products by entering their unique ID - the SKU. However, customers are unable to perform advanced woo search by variable product SKU. With SKU lookup functionality, they could easily find a specific product by its unique SKU code. This is especially helpful for WooCommerce wholesale stores.
Keep reading to discover a plugin which solves all these problems, and more 😀
Introducing WooCommerce Product Table: the best AJAX search plugin
When customers are searching through large numbers of products, they need an AJAX search which displays results in an easy-to-read layout. On its own, WooCommerce isn't great at that! The solution is to install the WooCommerce Product Table plugin.
WooCommerce Product Table is much more than just a WooCommerce AJAX search plugin. It actually transforms the layout of your products, as well as adding an instant AJAX-powered search box.
How it works
The WooCommerce Product Table plugin lists your products in a quick one-page order form for faster shopping. It comes with several AJAX-based product search options right out of the box:
- Instant AJAX keyword product searchCustomers can enter a keyword in the search box above the product table and quickly view matching results in the table. The product table is instantly updated through the AJAX search for WooCommerce as they’re typing.
- AJAX filter dropdownsYou have the option to add any number of filter dropdown lists above the product table. Customers can use these options to instantly filter products by categories, tags, attributions, variations, or custom taxonomies. Thanks to AJAX search for WooCommerce, these filters update displays in the product table without reloading the page.
- Filter widgetsWooCommerce Product Table also gives you access to its basic filter widgets that are built into the WooCommerce core. You can add price filters to specify a price range, checkbox filters for product attributes, or average ratings.
- Column sortingWooCommerce Product Table lets you create AJAX-based sortable columns. Customers can click on a column heading to order by that column.
Having a robust WooCommerce search AJAX plugin allows you to deliver better product browsing experiences. This makes it easier for customers to quickly find what they’re looking for.
And once they've used the various search features, they can view the results in a product table. This makes it much easier for them to make product comparisons and make fast buying decisions.
What else can the search plugin do?
WooCommerce Product Table gives you complete control over which products you want to include allowing you to list hundreds (or even thousands) of products. You can display any information you want in columns including product images, descriptions, prices, videos, custom fields, taxonomies, SKUs, and product attributes and variations.
WooCommerce Product Table uses AJAX which means that:
- It displays search results in the product table rather than on a separate page.
- Results are displayed without a page refresh so it’s super fast.
It also features a live search results option similar to what you get with search engines like Google or marketplaces like Amazon. In other words, it displays results as you type the keywords or search query in the search box. This search form sort of implementation makes for an intuitive user experience.
You can add product tables to pages, posts, and custom post types. You can add a search box anywhere to your site. It's also worth mentioning that WooCommerce Product Table is 100% WPML compatible. And, it works with your page builder plugin templates (e.g. Elementor).
The styling of the product table will automatically match your theme. You don't need to mess around with custom CSS (unless you want to!).
How to set add AJAX search, sort and filter to WooCommerce
Having a robust search and sort option for your online store is essential. And the easiest way to get started is by using a powerful WooCommerce AJAX search plugin. Below we’ll discuss how you can add the search and sort options to your WooCommerce site.
For this tutorial, we’ll assume you already have a WooCommerce store set up with some products added to it.
Step #1: Install WooCommerce Product Table
To get started, grab a copy of the WooCommerce Product Table plugin. You’ll find the license key for it in the confirmation email you receive along with the plugin’s zipped file.
Next, navigate to Plugins → Add New from the WordPress admin panel and upload the plugin’s zipped file to your WordPress site to install the plugin. Click the Activate button to continue.
Finally, head over to WooCommerce → Settings → Products → Product tables and enter the license key from the confirmation email. Click the Save Changes button at the bottom of the screen.
Step #2: List products in a table layout
Now that you have the WooCommerce AJAX search plugin installed and activated on your WooCommerce website, you can decide which columns to include in it. Choose columns that’ll make it easier for your customers to:
- Find the products they’re looking e.g. product name and SKU.
- Find out everything they need to know to make a purchase decision e.g. product description, price, and ratings.
Here’s what you need to do:
Go to WooCommerce → Settings → Products → Product tables and scroll down till you reach the Columns option. Create columns for the product’s image, name, description, price, and add-to-cart button by adding image,name,description,price,add-to-cart in the Columns text box.
In addition to this, you can create other columns such as product SKU in your product table. This allows customers to easily search for and select the correct item. Similarly, adding a rating column lets customers know what other people thought of the product.
Be sure to check out the complete list of available product table columns for more ideas!
Step #3: Add an instant search box and filters to the product table
From the same screen, scroll down till you reach the Table controls plugin settings.
First, set the Search box option to Above table using the dropdown menu. This allows your customers to easily find an item using the product name or WooCommerce search by SKU.
You can also add filters to display the information you’ve already added about your WooCommerce products such as categories or product tags. This will enable customers to quickly search specific types of items. To do this, set the Product filters option to Custom and add categories,tags in the Custom filters text box.
Check out the complete list of filter options for more ideas!
Customers can sort the product table based on the columns you include. Here are a few examples to demonstrate how it works:
- Price. If you have a column displaying product prices, customers can sort the products from low to high (or high to low).
- Product name. If you have a column displaying the product names, customers can sort the products alphabetically (either in ascending or descending order).
- Product ratings. If you have a column displaying product ratings, customers can sort the products by worst to best rating (or best to worst) rating.
You can add the product table to any page, post, or custom post type using the
[product_table] shortcode. It will essentially work like a dynamic search form.
Supercharge your AJAX product filters
While WooCommerce Product Table adds a live AJAX search box to your product lists, its filters are a bit basic. For the best possible results, you can supercharge your product table filters with the WooCommerce Product Filter plugin.
WooCommerce Product Filters is a powerful tool that allows you to add advanced filtering options to your product table, such as dropdowns, clickable color swatches, checkboxes, and range sliders. This gives your customers more options to refine their search and find the products they are looking for quickly and easily.
By using WooCommerce Product Filters in combination with WooCommerce Product Table, you can create a seamless user experience that allows customers to search, filter, and sort through your products with ease. The two plugins complement each other perfectly, allowing you to provide a comprehensive product search and browsing experience for your customers.
How to add AJAX filters to your WooCommerce search
To get started, simply install and activate WooCommerce Product Filters - either alone or alongside WooCommerce Product Table. You can then add your desired filters to your product table using the drag-and-drop interface in the WooCommerce Product Filters settings.
With these powerful plugins working together, you can provide a seamless and efficient browsing experience for your customers, making it easier for them to find and purchase the products they are looking for on your WooCommerce store.
Check out this
quick guide to WooCommerce Product Table’s search term option for more information.
Check out this
Bonus: Supercharge the WooCommerce search logic
The AJAX search added by the WooCommerce Product Table plugin does an exact match search. Customers can enter 3 or more letters and the instant search will take place, live.
If lots of customers use the search on your store, then it's a good idea to extend it using the SearchWP plugin. This adds lots more features to your AJAX search box, including:
- Control the exact logic of the search functionality.
- View search analytics, and use the data to make improvements such as adding synonyms for common misspellings.
Bonus: Add a standalone WooCommerce product search box anywhere on your site
So far, we've looked at how to add an instant AJAX search For WooCommerce above a product table. It's also possible to add a search box as a standalone element, for example on the homepage, or in your header or sidebar.
To do this, you need to use the 'Product Search' widget that comes with WooCommerce itself. This adds a custom search box wherever you add the widget.
Once you've done that, use these instructions to add the product table layout to the search results page.
Bonus: List products based on a specific search term
You can also use the WooCommerce Product Table plugin to create pre-searched product tables using the
search_term parameter. This is a neat feature that lets you display search results on your online store without requiring the user to do it manually.
For example, the
[product_table search_term="sandals"] shortcode would automatically apply “sandals” as the search term and display all relevant results in the product table.
This is useful if you blog about specific products or want to offer discounts and need a way to automatically display those results using your WooCommerce AJAX search plugin.
Check out this quick guide to WooCommerce Product Table’s search term option for more information.
Set up your WooCommerce AJAX search plugin today
By using a robust WooCommerce search plugin, you can improve store navigation, help customers quickly find products, and boost sales on your website. It’s a great way to increase conversions while delivering an enhanced shopping experience.
With WooCommerce Product Table - the best WooCommerce search plugin - you can:
- Automatically generate a WooCommerce AJAX search results page.
- Let customers quickly find what they’re looking for using a dynamic site search form with search, sort, and filter options, including WooCommerce search by SKU.
- Make it easy for customers to learn more about your products by including as many columns as you’d like.
Either use it on its own, or with the WooCommerce Product Filters plugin for best results.
Do you agree that adding search and sort features to your online store will improve your customers’ shopping experience? Let us know by commenting below!