<h2>Help Your Customers Find Your Products</h2>
<p>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!</p>
<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><strong>Product benefits:</strong></h2>
<ul>
<li><strong>Save search query(filter memory)</strong> 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<br />
always get interesting products – this improves the user experience</li>
<li><strong>Hierarchy dropdown</strong> 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><strong>Skins</strong> 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><strong>Performance</strong> 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><strong>Text search by attribute</strong> Text search can work not only by title and description of products, but also by taxonomies(Attributes, Categories, Tags)</li>
<li><strong>Search by ACF fieds</strong> Filtering by fields of this type: Text, Text Area, Number, Range, Select, Radio Button, Button Group, True/False, Date Time Picker</li>
<li><strong>Meta filter </strong>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><strong>Flexibility</strong>, 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><strong>WCAG 2.0</strong></li>
<li><strong>SEO URLs </strong>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><strong>Search logic IN/AND/NOT IN. </strong>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><strong>Ajax  mode. </strong>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><strong>Predefinition</strong> 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><strong>[avalon23_content] </strong>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><strong>Let’s get started! </strong></h3>
<p lang="en-US">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:</p>
<p lang="en-US"><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></p>
<p lang="en-US">On the settings page you can add a filter:</p>
<p lang="en-US"><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></p>
<p lang="en-US">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).</p>
<p lang="en-US">To add elements to the filter, for example, filter by price, by category, etc., click on the “gear” icon:</p>
<p lang="en-US"><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></p>
<p lang="en-US">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></p>
<p lang="en-US"><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></p>
<p lang="en-US">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></p>
<p lang="en-US">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.</p>
<p lang="en-US">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></p>
<p lang="en-US">When you see the first result, you can go to the main setting of this filter:</p>
<p lang="en-US"><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></p>
<p lang="en-US">In this tab, you can configure the filter so that it performs a search on the first click (autosubmit) on the filter element:</p>
<p lang="en-US"><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></p>
<p lang="en-US">Or you can make a filtration in Ajax mode:</p>
<p lang="en-US"><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></p>
<p lang="en-US">Or you can hide filters that give zero products in the current search query:</p>
<p lang="en-US"><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></p>
<p lang="en-US">Read more about these settings <a href="https://avalon23.dev/document/options/" target="_blank" rel="noopener noreferrer">here</a>.</p>
<p lang="en-US"><strong><em>Congratulations, you’ve learned the basic filter settings!</em></strong></p>
<h3>Further, we recommend reading useful information that will help improve your filter and make your site more attractive and user-friendly:</h3>
<hr />
<p lang="en-US">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.</p>
<p lang="en-US">You can easily change the color scheme of the filter to suit your website design:</p>
<p lang="en-US"><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></p>
<p lang="en-US">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></p>
<p lang="en-US">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></p>
<hr />
<p lang="en-US">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:</p>
<p lang="en-US"><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></p>
<p lang="en-US">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></p>
<p lang="en-US">Read the documentation for <a href="https://avalon23.dev/document/predefinition/" target="_blank" rel="noopener noreferrer">more details</a></p>
<hr />
<p lang="en-US">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.</p>
<p lang="en-US">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:</p>
<p lang="en-US"><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></p>
<p lang="en-US">Optimization of loading JS and CSS files:</p>
<p lang="en-US"><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></p>
<p lang="en-US">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></p>
<p lang="en-US"><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></p>
<p lang="en-US">You can read <a href="https://avalon23.dev/how-can-i-optimize-the-filter/" target="_blank" rel="noopener noreferrer">more here</a></p>
<hr />
<p lang="en-US">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:</p>
<p lang="en-US"><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></p>
<p lang="en-US">You can display some types of filters in a compact form (drop-down list) in the filter element settings:</p>
<p lang="en-US"><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></p>
<p lang="en-US">This is how it should work:</p>
<p lang="en-US"><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></p>
<p lang="en-US">You can see an <a href="https://demo.avalon23.dev/filter-pattern-depending-on-the-device/" target="_blank" rel="noopener noreferrer">example here</a></p>
<hr />
<p lang="en-US">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.</p>
<p><span lang="en-US">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</span><span lang="en-US">.</span></p>
<p>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></p>
<p><span lang="en-US">IN – will show all products that have at least one of the selected terms</span><span lang="en-US">.</span></p>
<p><span lang="en-US">AND – will show the products that have all the selected terms</span><span lang="en-US">.</span></p>
<p><span lang="en-US">NOT IN – will show all products that do not have the selected terms</span><span lang="en-US">.</span></p>
<p lang="en-US">You can see an <a href="https://demo.avalon23.dev/filter-logic/" target="_blank" rel="noopener noreferrer">example here</a></p>
<hr />
<p lang="en-US">About other settings, please read<a href="https://avalon23.dev/documentation/" target="_blank" rel="noopener noreferrer"> the documentation </a></p>
<hr />
<h3>Requirements</h3>
<p>Minimum PHP version: 7.0</p>
<p> </p>

Avalon23 Products Filter

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

<p style="text-align: right"><span style="color: #808080"><strong><em>The essential extension for every WooCommerce store!</em></strong></span></p>
<div>
<h2><img class="alignleft wp-image-2941177" style="margin-bottom: 4em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-logo.png?w=480" alt="" width="128" height="128" />Your best Search Experience for WooCommerce</h2>
<p>The perfect Search Engine for your store helps your customers to find and buy the right products quickly.</p>
<p style="overflow: hidden">Your customers will love your store for this, because it makes getting to the products they want to buy easier than ever.</p>
</div>
<div>
<h2><img class="alignleft wp-image-18734005739883" style="margin-bottom: 5em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-ai.png" alt="" width="128" height="128" />AI</h2>
<p>Delivers AI-powered search results through its sophisticated, intelligent algorithms.</p>
<p style="overflow: hidden">Your data remains <em>your</em> data. Its self-contained AI integration keeps your data within your server. It is not shared with external platforms or services.</p>
<p>Artificial Intelligence that works for you, not for your competitors.</p>
</div>
<div>
<h2><img class="wp-image-2941192 alignleft" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-live-search-field.png?w=512" alt="" width="128" height="128" />Live Search</h2>
<p>The Live Search Field allows customers to find products as they type, along with images, price information and they can add the product directly to the cart.</p>
<p style="overflow: hidden">Type, click & buy … it’s that easy.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941208" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-filter.png?w=512" alt="" width="128" height="128" />Live Filters</h2>
<p>Our live filters take care of showing updated results on the shop page while your customers search by keyword, price range, use categories, tags or any product attributes to narrow down the results.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941211" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-easy-shopping.png?w=512" alt="" width="128" height="128" />Experience Easy Shopping</h2>
<p>With a no-fuzz automated setup that integrates smoothly with popular themes, Storefront and child-themes included, your customers will have a truly delightful shopping experience. Let them enjoy how easy it is to find the right thing in your store.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941245" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-reports-searches.png" alt="" width="128" height="128" />Search Statistics</h2>
<p>Gain valuable insights on what your visitors are searching in your store. See real-time and historic product search activity and relate it to your marketing efforts.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941244" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-reports-queries.png" alt="" width="128" height="128" />Business Insights</h2>
<p>Discover what your customers are searching for, what they can find and what not. Our reports will help you to reveal what products your visitors are searching for and optimize your store’s offering to meet current and trending demands.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941240" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-automated-integration.png" alt="" width="128" height="128" />Automated Integration</h2>
<p>The Search Engine takes care of providing the best search results on the front end and back end. Our advanced search algorithms integrate seamlessly with your store and the administrative dashboard.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941243" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-indexer.png" alt="" width="128" height="128" />Search Index</h2>
<p>The Search Indexer will automatically index all products in your store and keep everything up-to-date for you. Even when you add, modify or remove products and related aspects, you don’t need to do anything to have your store fully indexed, products ready to be found.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941247" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-thumbnails.png" alt="" width="128" height="128" />Visually Intuitive Filters</h2>
<p>An image says more than a thousand words … create a visually appealing search experience for your customers! Add thumbnails used with live product filters for product categories, tags and attributes. Filter by color, size, brand … showing the actual color, intuitive icons and logos.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941248" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-weights.png" alt="" width="128" height="128" />Relevant Search Results</h2>
<p>Search Weights based on keyword matches present more relevant results to your customers. The relevance of your store’s product search results is substantially improved, with powerful controls that introduce Search Weights to WooCommerce.</p>
</div>
<div>
<h2><img class="alignleft wp-image-18734002851621" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-cache.png?w=512" alt="" width="128" height="128" />High Performance Cache</h2>
<p>The Search Engine is boosted by a unique high-performance cache system. It is based on technology we have specifically engineered, to support fast and scalable product searches and filtering. This provides a fast and efficient cache system which also integrates with Redis and Memcached.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941241" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-back-end.png" alt="" width="128" height="128" />Powerful Back-End Features</h2>
<p>This extension is smoothly integrated with your WooCommerce store and WordPress Dashboard.</p>
<p style="overflow: hidden">From important business insights provided by its search reports, to optimized back-end product search results powered by the extension’s Search Engine – this essential tool provides everything you need to be in control.</p>
</div>
<div>
<h2><img class="alignleft wp-image-18734002851488" style="margin-bottom: 4em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-blocks.png?w=512" alt="" width="128" height="128" />Blocks</h2>
<p>Add exclusive live search and filter blocks across your site. The extension includes stylish blocks that make it easy to customize the right search experience for your customers, anywhere on your site.</p>
<p>Choose from a comprehensive set of elements. Just click to add and adjust as needed: search fields, filters for product categories, attributes, tags, prices and ratings, filters to show products on sale or that are in stock. Combine them to make it easy for customers to find the right product quickly.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941249" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-widgets.png" alt="" width="128" height="128" />Widgets</h2>
<p>Your customers will love the live Product Search Field that shows results while you type and lets you add items directly to the cart. It automatically replaces the standard product search field if desired, and it is also available as a widget to use in sidebars.</p>
<p style="overflow: hidden">Flexible live filters update your shop page as the customer types, indicates a price or chooses from product categories, tags or any product attributes.</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941246" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-shortcodes.png" alt="" width="128" height="128" />Shortcodes</h2>
<p>All live search facilities are available as WordPress shortcodes. In addition to these, we include facilities to render search results on any page. This even allows you to create specialized shop pages!</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941242" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-css.png" alt="" width="128" height="128" />Stylish!</h2>
<p>The extension is tested and integrates with lots of popular themes and requires no or very little CSS adjustments in most cases. To make things very easy for you, we have included a section where you can add your own CSS rules. And you’re always welcome to ask for our help!</p>
</div>
<div>
<h2><img class="alignleft wp-image-2941238" style="margin-bottom: 3em" src="https://woocommerce.com/wp-content/uploads/2014/10/wps-api.png" alt="" width="128" height="128" />API</h2>
<p>As with the widgets and shortcodes, we provide a very easy to use API that gives you access to all search and filtering facilities, so you can effortlessly include them in templates.</p>
</div>
<p> </p>
<p> </p>
<hr />
<h2>Blocks and Templates</h2>
<p>It is easy to set up a Shop page with live product search and filters, using the exclusive blocks provided by the extension. Template customizations and new shop page compositions based on blocks can be created quickly, as we show below.</p>
<p>In this tutorial, we customize the Product Catalog template, adding filters that work with the Product Collection block.</p>
<p><span class="embed-youtube" style="text-align:center"></span></p>
<p>This next clip shows how to compose a shop page using several filter blocks.</p>
<p><span class="embed-youtube" style="text-align:center"></span></p>
<p>The exclusive blocks provided with the extension make it easy to set up live search and filter features for customers in a matter of minutes.</p>
<p><span class="embed-youtube" style="text-align:center"></span></p>
<p>With its advanced features, you have limitless possibilities to build custom shop sections. The following clip shows how to create a new Shop page using the exclusive blocks provided by the extension.</p>
<p><span class="embed-youtube" style="text-align:center"></span></p>
<p> </p>
<hr />
<h2>Live Search and Filters</h2>
<p>The Live Search Field allows customers to find products and buy products in an instant – <strong>Find, Click & Buy</strong> … it’s that easy.</p>
<figure id="attachment_3053576" aria-describedby="caption-attachment-3053576" style="width: 1200px" class="wp-caption aligncenter"><img class="wp-image-3053576 size-full" src="https://woocommerce.com/wp-content/uploads/2014/10/product-search-field-search-results-detail.png" alt="Product Search Field - Search Results - Detail" width="1200" height="978" /><figcaption id="caption-attachment-3053576" class="wp-caption-text">An example of the live Product Search Field in action. Search results appear while the customer types.</figcaption></figure>
<p> </p>
<p>WooCommerce Product Search provides an easy search experience for your customers with live Product Filters – suited even for stores with thousands of variable products and product attributes.</p>
<figure id="attachment_3053590" aria-describedby="caption-attachment-3053590" style="width: 1200px" class="wp-caption aligncenter"><img class="wp-image-3053590 size-full" src="https://woocommerce.com/wp-content/uploads/2014/10/product-filter-e28093-search-live-filter-in-action-on-the-shop-page.png" alt="" width="1200" height="920" /><figcaption id="caption-attachment-3053590" class="wp-caption-text">An example with a live Product Search Filter in action. Your shop page updates automatically, showing relevant and matching results, based on the customer’s choices and without the need to reload the page.</figcaption></figure>
<p> </p>
<figure id="attachment_3055425" aria-describedby="caption-attachment-3055425" style="width: 980px" class="wp-caption aligncenter"><img class="size-full wp-image-3055425" src="https://woocommerce.com/wp-content/uploads/2014/10/product-filters-e28093-shop-page-detail-with-categories-expanded.png" alt="Product Filters – Shop Page - Detail with Categories Expanded" width="980" height="613" /><figcaption id="caption-attachment-3055425" class="wp-caption-text">Live category filters can be expanded to reveal child categories on hover and make navigation easy. On touch-enabled devices, tapping a category’s expander shows its children.</figcaption></figure>
<p> </p>
<figure id="attachment_3055898" aria-describedby="caption-attachment-3055898" style="width: 980px" class="wp-caption aligncenter"><img class="size-full wp-image-3055898" src="https://woocommerce.com/wp-content/uploads/2014/10/product-filters-e28093-shop-page-filters-and-thumbnails.png" alt="Product Filters – Shop Page - Filters and Thumbnails" width="980" height="606" /><figcaption id="caption-attachment-3055898" class="wp-caption-text">Add intuitive thumbnails used with live product filters for product categories, tags and attributes, showing the actual colors, intuitive icons and logos.</figcaption></figure>
<p> </p>
<figure id="attachment_3055951" aria-describedby="caption-attachment-3055951" style="width: 980px" class="wp-caption aligncenter"><img class="wp-image-3055951 size-full" src="https://woocommerce.com/wp-content/uploads/2014/10/product-filter-attributes-in-action-color-size-category.png" alt="Finding the matching product with live Product Filters and intuitive thumbnails." width="980" height="613" /><figcaption id="caption-attachment-3055951" class="wp-caption-text">Customers can find products easily with live Product Filters showing intuitive thumbnails.</figcaption></figure>
<p> </p>
<hr />
<h2>Reports and Business Intelligence</h2>
<p>WooCommerce Product Search helps you to discover what your customers are searching for and optimize your store’s offering to meet current and trending demands.</p>
<figure id="attachment_2941510" aria-describedby="caption-attachment-2941510" style="width: 1280px" class="wp-caption aligncenter"><img class="wp-image-2941510 size-full" src="https://woocommerce.com/wp-content/uploads/2014/10/search-graph-example.png" alt="" width="1280" height="768" /><figcaption id="caption-attachment-2941510" class="wp-caption-text">With <a href="https://woocommerce.com/products/woocommerce-product-search/">WooCommerce Product Search</a> you will gain valuable insights on what your customers are searching for. Discover the current search performance and trends to optimize your store.</figcaption></figure>
<p> </p>
<figure id="attachment_2941511" aria-describedby="caption-attachment-2941511" style="width: 980px" class="wp-caption aligncenter"><img class="size-full wp-image-2941511" src="https://woocommerce.com/wp-content/uploads/2014/10/search-queries-example.png" alt="" width="980" height="588" /><figcaption id="caption-attachment-2941511" class="wp-caption-text">Discover what exactly your customers are searching for. Do you offer what your customers want to buy? <a href="https://woocommerce.com/products/woocommerce-product-search/">WooCommerce Product Search</a> helps you with valuable insights.</figcaption></figure>
<p> </p>

WooCommerce Product Search

<p>The perfect Search Engine helps customers to find and buy products quickly – essential for every WooCommerce store.</p>

Avalon23 Products Filter vs WooCommerce Product Search