Help customers find products in real-time using fast and instant Ajax-based search in your WooCommerce stores. The Ajax instant search extension for WooCommerce helps customers locate their desired products with relevant search suggestions in real-time as they type in their query. Saves time and a trip to the search result page to find desired products.
With dedicated dropdowns for products & pages, categories, and brands, customers can further filter results with pinpoint accuracy. Moreover, with detailed search templates, customers can not only see relevant products, but also categories and pages relevant to their queries.
With extensive customization functionality, merchants can choose from 3 different search engines: WordPress default search, WooCommerce default search, and the plugin’s custom search. In addition to this, using shortcode, merchants can place instant search anywhere they like and hide or show product elements like price, add to cart, stock status, excerpt, content, tags, sales badges, thumbnail, and more.
<h2>Features</h2>
<ul>
<li>Add an Ajax-based instant search bar to your WooCommerce stores</li>
<li>Fully detailed search suggestions for an accurate searching experience</li>
<li>Choose from 3 different search engines(result pages):
<ul>
<li>WordPress default search</li>
<li>WooCommerce default search</li>
<li>Custom plugin search</li>
</ul>
</li>
<li>Choose to replace WooCommerce/WordPress default search with Ajax instant search</li>
<li>Place Ajax instant search anywhere using a shortcode</li>
<li>Define the minimum number of characters input to display the search result</li>
<li>Define the maximum number of search results in signly suggestion</li>
<li>Customize search field’s:
<ul>
<li>Title</li>
<li>Placeholder</li>
<li>Button text</li>
</ul>
</li>
<li>Choose to display half or full width</li>
<li>Let customers filter search results from:
<ul>
<li>All pages</li>
<li>Products only</li>
</ul>
</li>
<li>Enable/Disable search sorting dropdown</li>
<li>Choose to display first:
<ul>
<li>Products</li>
<li>Post & Pages</li>
</ul>
</li>
<li>Allow customers to filter searches based on:
<ul>
<li>Product and Pages</li>
<li>Categories</li>
<li>Brands</li>
</ul>
</li>
<li>Let customers search products by SKUs</li>
<li>Hide specific or out-of-stock products from search results</li>
<li>Choose to show or hide product thumbnails in suggestions</li>
<li>Choose to display product thumbnails in left or right orientation</li>
<li>Show or hide the following product elements in suggestions:
<ul>
<li>Add to cart button</li>
<li>Sale badge</li>
<li>Stock badge</li>
<li>Featured badge</li>
<li>Price</li>
<li>Excerpt</li>
</ul>
</li>
<li>Enable featured products that are displayed when the search bar is empty</li>
<li>Enable fuzzy strings to auto-correct spelling mistakes in search queries i.e “Wach” > “Watch”</li>
<li>Add synonyms to display results for matching terms, i.e “time piece” > “Watch”</li>
<li>Choose from 3 aesthetically pleasing search suggestion templates, which are:
<ul>
<li>Default instant search</li>
<li>Advanced search panel</li>
<li>Smart search grid</li>
</ul>
</li>
<li>Choose to display view all link to display detailed search results</li>
<li>Customizable text for “No result” queries</li>
<li>Style following elements of search bar:
<ul>
<li>Background color</li>
<li>Search bar text color</li>
<li>Search button color</li>
<li>Search button text color</li>
<li>Search bar border radius</li>
<li>Search icon</li>
<li>Search suggestion customization</li>
</ul>
</li>
<li>View a detailed search analytics dashboard to gain insights into search trends</li>
</ul>
<h2>Show results in real time using Ajax Instant Search</h2>
Show results in a flash to boost conversions using the WooCommerce Ajax search extension. This highly customizable extension lets you show search suggestions in different templates and style them to match your store’s theme. Also show categories, posts, and pages to match customers’ queries with precision.
<img class="alignnone size-full wp-image-18734005906585" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-2.gif" alt="" width="980" height="827" />
<h2>Display suggestions based on products, categories & pages</h2>
Merchants can choose to display suggestions based on categories, products, and pages using the Ajax search for WooCommerce extension. Displaying suggestions this way can further enhance the conversion rate of your WooCommerce store as the customer sees more relevant products, categories, and pages, they might explore and buy more!
<img class="alignnone size-full wp-image-18734005906593" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-3.png" alt="" width="980" height="913" />
<h2>Let customers add products directly to the cart via instant search</h2>
One of the main issues that instant search solves is that it quickly displays products related to the customer’s query to increase the chances of conversions before the customer’s intent changes. All that effort of displaying products instantly will be lost if the customer has to visit the product page and buy the product. This WooCommerce search plugin not only allows merchants to display all the product’s relevant information in search results, but customers can also add-to-cart their desired products directly from the suggestions.
<img class="alignnone size-full wp-image-18734005906608" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-4-1.gif" alt="" width="980" height="827" />
<h2>Use fuzzy strings and synonyms to match customers’ queries instantly</h2>
Our advanced and smart Woo search extension enables merchants to use fuzzy strings to match customers’ search intentions even when they are misspelled. It also enables merchants to add synonyms against product titles so customers can actually get what they are looking for. These smart features of Ajax instant search ensure that all queries convert!
<img class="alignnone size-full wp-image-18734005906614" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-5.png" alt="" width="980" height="449" />
<h2>Exclude products and hide out-of-stock products from search</h2>
In addition to other customization functionalities, this smart WooCommerce product search plugin enables merchants to either show out-of-stock products with an out-of-stock tag or they simply hide out-of-stock products from search suggestions. Moreover, merchants can also hide specific products from search results if they choose to.
<img class="alignnone size-full wp-image-18734005906617" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-6.png" alt="" width="980" height="454" />
<h2>Choose from a variety of search filters to choose from</h2>
With extensive customization options, this smart, Ajax-based search extension enables merchants to display search suggestions based on various filters such as categories, brands, SKUs, and more.
<img class="alignnone size-full wp-image-18734005906620" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-7.png" alt="" width="980" height="939" />
<h2>Extensive search customization options</h2>
With multiple customization features, merchants can choose to style the search bar display and the suggestions section in various ways.
<img class="alignnone size-full wp-image-18734005906626" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-8.png" alt="" width="980" height="491" />
<h2>Detailed search dashboard to gain customer insights</h2>
Get detailed insights on user search trends using Ajax instant search for WooCommerce extension. In this detailed dashboard, merchants can view information like:
<ul>
<li>View search and click data</li>
<li>View top clicked products</li>
<li>View top searched products</li>
<li>View queries with no result</li>
</ul>
<img class="alignnone size-full wp-image-18734005906630" src="https://woocommerce.com/wp-content/uploads/2021/02/woocommerce-ajax-search-9.png" alt="" width="980" height="931" />

Ajax Instant Search

Provide a fast and effective live search bar to show relevant results as the customers type their query.

<h2>Help Your Customers Find Your Products</h2>
An effective filter is one of the most important functions of an online store. Make sure your customer can always find what they’re searching for in your store with the Avalon23 Products Filter for WooCommerce!
<h2><a href="https://woocommerce.com/wp-content/uploads/2021/01/screenshot-1.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-9095896 size-medium" src="https://woocommerce.com/wp-content/uploads/2021/01/screenshot-1.png?w=620" alt="" width="620" height="349" /></a></h2>
<h2>Product benefits:</h2>
<ul>
<li>Save search query(filter memory) This function allows the user to save the search query. And when switching to another page or if the user visits the page the next day, the filter selection will remain. Demo( a widget “Filter with memory”) – <a href="https://cars.avalon23.dev/" target="_blank" rel="noopener">demo site of car parts</a>.  The user can now select filtering once and 
always get interesting products – this improves the user experience</li>
<li>Hierarchy dropdown This type of filter only works with hierarchical taxonomy. You can see how it works here <a href="https://demo.avalon23.dev/hierarchy-dropdown/" rel="nofollow ugc">Demo1</a> AND <a href="https://cars.avalon23.dev/tyres/" rel="nofollow ugc">Demo2.</a> This type of filter has the feature of switching the image depending on the hierarchy level(You can check  <a href="https://cars.avalon23.dev/tyres/" target="_blank" rel="noopener">it  here </a>“Tyres”). This helps the user to correctly navigate the search.</li>
<li>Skins Filters can have different <a href="https://demo.avalon23.dev/skins/?av23_pa_season=24&av23_filter_id=11&av23_pa_color=71&av23_product_cat=80&av23_pa_size=74&av23_on_sale=1&av23_price=2:77" rel="nofollow ugc">color schemes</a>. These are specially selected color patterns that will help you integrate the filter into your website design.</li>
<li>Performance The plugin has options to optimize CSS and JS files. Also caching which reduces the number of queries to the database. Also, flexible configuration of each filter element will allow you to optimize queries by disabling dynamic recalculation where it is not needed.</li>
<li>Text search by attribute Text search can work not only by title and description of products, but also by taxonomies(Attributes, Categories, Tags)</li>
<li>Search by ACF fieds Filtering by fields of this type: Text, Text Area, Number, Range, Select, Radio Button, Button Group, True/False, Date Time Picker</li>
<li>Meta filter The plugin has the ability to configure filters for custom fields (ACF fields are added automatically). There is a wide range of filter types for meta fields: Radio/Checkbox/Label/Dropdown/Slider/Text input/Datepicker/Color/Image</li>
<li>Flexibility, The plugin has the ability to adjust the width and visibility of each filter element depending on the device. This is very useful if you place the filter horizontally. Also, each filter container can be toggled depending on the device – this will make the filter compact for mobile devices.</li>
<li>WCAG 2.0</li>
<li>SEO URLs The search query can have a human-readable form in the URL. An example: https…………….com/search/color-red/season-autumn/product_cat-hoodies/  And the plugin also has SEO settings that improve the indexing of pages with search results.</li>
<li>Search logic IN/AND/NOT IN. Customizing the comparison logic can fine-tune the search results to suit your business. For example, NOT IN logic can exclude products with a certain attribute, this is useful for a grocery store to exclude ingredients that could cause allergies.</li>
<li>Ajax  mode. Fast and light Ajax filtering. In this mode, filtering occurs without reloading the page. Attention: Ajax mode may not work correctly on some themes</li>
<li>Predefinition allows to display filter that adapts to the current request by default(prefiltration). For example you can display the filter only for <a href="https://demo.avalon23.dev/by-specific-attribute/" target="_blank" rel="noopener">a specific attribute</a> or only for <a href="https://demo.avalon23.dev/on-sale/" target="_blank" rel="noopener">discounted products</a></li>
<li>[avalon23_content] This is a special shortcode that can hide/show content depending on the current search. More details can be <a href="https://avalon23.dev/document/avalon23_content/" target="_blank" rel="noopener">found here</a></li>
</ul>
<h3>Let’s get started! </h3>
So let’s get started! You have installed Avalon23 on your website. After activating the plugin, you will see a menu for accessing the main settings:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/398-1.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-396" src="https://avalon23.dev/wp-content/uploads/2021/02/398-1.png" alt="" width="872" height="243" /></a>
On the settings page you can add a filter:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-2.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-398" src="https://avalon23.dev/wp-content/uploads/2021/02/394-2.png" alt="" width="908" height="170" /></a>
Each filter has its own <a href="https://avalon23.dev/document/avalon23/" target="_blank" rel="noopener noreferrer">shortcode</a> that can be inserted into the content to display the filter, or you can use a<a href="https://avalon23.dev/document/widget/" target="_blank" rel="noopener noreferrer"> widget</a>. You can also add a title to quickly find the filter (this title is not displayed at the front).
To add elements to the filter, for example, filter by price, by category, etc., click on the “gear” icon:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-3.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-399" src="https://avalon23.dev/wp-content/uploads/2021/02/394-3.png" alt="" width="389" height="149" /></a>
Now you can add <a href="https://avalon23.dev/document/standard-filters/" target="_blank" rel="noopener noreferrer">standard filters</a>, filters by <a href="https://avalon23.dev/document/filter-by-taxonomies/" target="_blank" rel="noopener noreferrer">taxonomy</a> or <a href="https://avalon23.dev/document/filter-by-meta-data/" target="_blank" rel="noopener noreferrer">metafields</a>
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-4.gif" target="_blank" rel="noopener"><img class="aligncenter wp-image-401 size-full" src="https://avalon23.dev/wp-content/uploads/2021/02/394-4.gif" alt="" width="800" height="354" /></a>
Filters can be activated or deactivated to hide or show them at the front. You can read more about the settings <a href="https://avalon23.dev/document/filter-item/" target="_blank" rel="noopener noreferrer">here</a>
Note: if you do not see the options fields (like on the demo site) “color”, “size”, “location”, etc. are taxonomies. Just create an attribute with this name.
Now you can show these filters using a<a href="https://avalon23.dev/document/widget/" target="_blank" rel="noopener noreferrer"> widget</a> or <a href="https://avalon23.dev/document/avalon23/" target="_blank" rel="noopener noreferrer">shortcode</a>
When you see the first result, you can go to the main setting of this filter:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-5.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-402" src="https://avalon23.dev/wp-content/uploads/2021/02/394-5.png" alt="" width="756" height="308" /></a>
In this tab, you can configure the filter so that it performs a search on the first click (autosubmit) on the filter element:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-6.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-403" src="https://avalon23.dev/wp-content/uploads/2021/02/394-6.png" alt="" width="602" height="44" /></a>
Or you can make a filtration in Ajax mode:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-7.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-404" src="https://avalon23.dev/wp-content/uploads/2021/02/394-7.png" alt="" width="587" height="63" /></a>
Or you can hide filters that give zero products in the current search query:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-8.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-405 size-full" src="https://avalon23.dev/wp-content/uploads/2021/02/394-8.png" alt="" width="526" height="82" /></a>
Read more about these settings <a href="https://avalon23.dev/document/options/" target="_blank" rel="noopener noreferrer">here</a>.
Congratulations, you’ve learned the basic filter settings!
<h3>Further, we recommend reading useful information that will help improve your filter and make your site more attractive and user-friendly:</h3>
<hr />
WordPress has a huge number of themes, and each theme has its own styles and colors. Each owner wants a unique design, wanting to make their business stand out. Unfortunately, it is not possible to make filter styles to fit all themes. For this, we have developed functionality that will help you choose filter styles for your theme.
You can easily change the color scheme of the filter to suit your website design:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-9.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-406" src="https://avalon23.dev/wp-content/uploads/2021/02/394-9.png" alt="" width="398" height="244" /></a>
You can see examples<a href="https://demo.avalon23.dev/skins/?av23_pa_season=24&av23_filter_id=11&av23_pa_color=71&av23_product_cat=80&av23_pa_size=74&av23_on_sale=1&av23_price=2:77" target="_blank" rel="noopener noreferrer"> here</a>
If you have experience with CSS, you can <a href="https://avalon23.dev/how-to-create-custom-skins/" target="_blank" rel="noopener noreferrer">create custom styles</a>
<hr />
It is sometimes very useful to create a page with a specific set of products to highlight them for the buyer. For example, discounted products, or products from a specific category, or a specific color and size, or a specific author. And even if you don’t have many products, it’s better to add a filter to this page. In order for the plugin to show only relevant filters, use the Predefinition setting:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-10.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-407" src="https://avalon23.dev/wp-content/uploads/2021/02/394-10.png" alt="" width="854" height="286" /></a>
You can see <a href="https://demo.avalon23.dev/on-sale/" target="_blank" rel="noopener noreferrer">examples here</a> or <a href="https://demo.avalon23.dev/by-specific-attribute/" target="_blank" rel="noopener noreferrer">here</a>
Read the documentation for <a href="https://avalon23.dev/document/predefinition/" target="_blank" rel="noopener noreferrer">more details</a>
<hr />
Over time, the assortment of even a small store grows, and you already start dealing with a large number of products, and more resources are spent on filtering. This slows down page loading even for powerful servers. But the number of taxonomies (attributes and categories) affects the loading speed even more. Therefore, you should pay attention to optimization so that slow filtering does not annoy customers, and this does not lead to lost sales. We have developed a number of settings to help solve this problem.
You can optimize filtering. This option is useful in the “First level of optimization” main setting tab if there are many filters by meta fields:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-11.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-408" src="https://avalon23.dev/wp-content/uploads/2021/02/394-11.png" alt="" width="965" height="48" /></a>“Advanced optimization” – this setting caches all your filters and reduces the number of database queries:<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-12.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-409" src="https://avalon23.dev/wp-content/uploads/2021/02/394-12.png" alt="" width="954" height="42" /></a>
Optimization of loading JS and CSS files:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-14.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-411 size-full" src="https://avalon23.dev/wp-content/uploads/2021/02/394-14.png" alt="" width="397" height="48" /></a>
A lot of resources are wasted on dynamic recalculation, because a query is made to the database for each filter element. This is necessary in order to receive up-to-date data for the counters. To optimize this process, you can turn off dynamic recalculation for unimportant filters. <a href="https://demo.avalon23.dev/dynamic-recount/" target="_blank" rel="noopener noreferrer">Example here</a>
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-13.gif" target="_blank" rel="noopener"><img class="aligncenter wp-image-410 size-full" src="https://avalon23.dev/wp-content/uploads/2021/02/394-13.gif" alt="" width="640" height="300" /></a>
You can read <a href="https://avalon23.dev/how-can-i-optimize-the-filter/" target="_blank" rel="noopener noreferrer">more here</a>
<hr />
Our plugin has different types of filters like drop-down, slider, checkbox, color, etc. Since you can have a different number of checkboxes or, for example, a different slider range, in order for the filter to look more compact and, also, for the convenience of the user, you can arrange the filter elements in columns of different widths, and in turn, the width of these columns will be depend on device screen width:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-15.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-414" src="https://avalon23.dev/wp-content/uploads/2021/02/394-15.png" alt="" width="845" height="222" /></a>
You can display some types of filters in a compact form (drop-down list) in the filter element settings:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-16.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-415" src="https://avalon23.dev/wp-content/uploads/2021/02/394-16.png" alt="" width="596" height="107" /></a>
This is how it should work:
<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-17.gif" target="_blank" rel="noopener"><img class="aligncenter wp-image-416 size-full" src="https://avalon23.dev/wp-content/uploads/2021/02/394-17.gif" alt="" width="572" height="470" /></a>
You can see an <a href="https://demo.avalon23.dev/filter-pattern-depending-on-the-device/" target="_blank" rel="noopener noreferrer">example here</a>
<hr />
Depending on the type of commercial activity of your store, different filtering logic may be required. For example, you are selling food and you want to exclude products by ingredient so that the user can see products that do not cause him allergies. In this case, the logic “NOT IN” will be useful.
Or, for example, you sell electronic devices. And the user must receive a product that contains all the selected technologies (Bluetooth, Wi-Fi, 5G). In this case, “AND” logic will be useful.
This option is available for filters by taxonomy:<a href="https://avalon23.dev/wp-content/uploads/2021/02/394-17.png" target="_blank" rel="noopener"><img class="aligncenter wp-image-417" src="https://avalon23.dev/wp-content/uploads/2021/02/394-17.png" alt="" width="341" height="68" /></a>
IN – will show all products that have at least one of the selected terms.
AND – will show the products that have all the selected terms.
NOT IN – will show all products that do not have the selected terms.
You can see an <a href="https://demo.avalon23.dev/filter-logic/" target="_blank" rel="noopener noreferrer">example here</a>
<hr />
About other settings, please read<a href="https://avalon23.dev/documentation/" target="_blank" rel="noopener noreferrer"> the documentation </a>
<hr />
<h3>Requirements</h3>
Minimum PHP version: 7.0

Avalon23 Products Filter

This is a product filter with a wide range of features that will help you customize your search for most types of commerce

Ajax Instant Search vs Avalon23 Products Filter