As an online store owner, there are many reasons why you should install a WooCommerce search plugin. It can help customers find products faster and make your store easier to navigate, leading to greater profitability.
In this tutorial, you'll discover the easy way to set up instant WooCommerce AJAX search and sort. It will look something like this:
Key benefits of offering search and sort in WooCommerce
There are a few simple ways you can 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 box to find a particular product. The keyword is typically matched against the product name, product description, SKU, or something similar.
- Product sorting is applied to all of the products in a category or search list. Search results are re-ordered based on sort attributes such as relevance, date added, price low-high (or high-low), or average buyer rating.
- Product filtering helps narrow down the number of search results based on selected attributes such as product categories, tags or other data.
If searching, sorting or filtering is powered by AJAX, then it means that it happens instantly without reloading the page.
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.
Benefits of offering search and sort in WooCommerce
Here are some of the main benefits of offering search and sort in WooCommerce:
- Help customers find products faster WooCommerce 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 search result of all t-shirts, they can sort products by price.
- Improve e-commerce store navigation Search and sort options make it easier for customers to browse through more relevant 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 search and sort options help customers make quick buying decisions.
Should you offer search and sort options?
For most online stores, having 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. Search and sort options enable customers to easily find what they’re looking for on 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 option to sort by price – either low-to-high or high-to-low. Customers can simply sort products by the 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.
Now that you know how you can benefit by offering search and sorting options on your store, let’s take a closer look at the default WooCommerce search features and their inherent limitations.
Limitations of default WooCommerce product search
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.
However, 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 AJAX search and sort options for your own online store. The easiest way to do this is by using a WooCommerce search plugin.
Your customers also can't search by product SKU. This is especially helpful for WooCommerce wholesale stores (and we'll show you how to do it here).
WooCommerce Product Table: The best WooCommerce AJAX search plugin
WooCommerce Product Table allows you to display WooCommerce products in a neat table layout. The plugin comes with its own instant AJAX search, sort, and filter options. This is great for improving the shopping experience your online store delivers.
The best part is that the search, sort, and filter options are incredibly easy to use. Customers can sort products the way they want by clicking on any column in the product table.
It also 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, price, videos, custom fields, taxonomies, SKUs, and product attributes and variations.
WooCommerce Product Table is 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 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 intuitive user experience.
You can add product tables to pages, posts, and custom post types. It's also worth mentioning that WooCommerce Product Table is 100% WPML compatible.
How to set up instant WooCommerce product search and sort
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 website.
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 website 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 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 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 SKU.
You can also add filters to display the information you’ve already added about your WooCommerce products such as categories or 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 to 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 price, customers can sort the products from low to high (or high to low).
- Product name. If you have a column displaying product name, 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.
Another way to list products in a table layout with instant search options
The standard WooCommerce Product Table places the search box above or below the product table – based on what you decide.
However, if you want to add the product search box anywhere else on your online store – such as your header or sidebar – you can do so by using the native WooCommerce product search widget with your table-based search results layout.
To do this, simply enable the product table layout on category archive pages. This adds product tables to all your product category pages, and also the product search results page.
Why AJAX-based product search options are necessary
AJAX-based product search options are necessary for WooCommerce stores as it creates a more user-friendly, interactive search experience. For starters, it loads search results on the same page without a page refresh. This improves the customer’s experience with your online store and makes for a more intuitive buying user flow.
WooCommerce Product Table offers various 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 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, 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 and makes it easier for customers to quickly find what they’re looking for.
Bonus: Add a standalone product search box anywhere on your site
So far, we've looked at how to add an instant AJAX search 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 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: Use WooCommerce Product Table with third party filter plugins
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, you can:
- Automatically generate an AJAX search results page.
- Let customers quickly find what they’re looking for using a dynamic search form with search, sort, and filter options, including by product SKU.
- Make it easy for customers to learn more about your products by including as many columns as you’d like.
Do you agree that adding the search and sort features to your online store will improve your customers’ shopping experience? Let us know by commenting below!