Ajax Search Pro Knowledge Base
Buy Ajax Search Pro!DocumentationGet SupportDevelopment
  • Knowledge Base
  • Safe Coding Guideline
  • Hooks
    • Filters
      • Query & Output
        • asp_query_args
        • asp_query_{type}
        • asp_cached_content
        • asp_pre_get_front_filters
        • asp_before_ajax_output
        • asp_shortcode_output
        • asp_print_search_query
      • Keyword Suggestions
      • Search Results
        • asp_suggested_phrases
        • asp_results
        • asp_cpt_results
        • asp_buddyp_results
        • asp_attachment_results
        • asp_comment_results
        • asp_blog_results
        • asp_terms_results
        • asp_peepso_group_results
        • asp_peepso_activities_results
        • asp_only_keyword_results
        • asp_only_non_keyword_results
        • asp_result_groups
      • CSS & JS
        • asp_load_js
        • asp_load_css
        • asp_load_css_js
      • Template & Output
        • asp_icl_t
      • Index Table Related
        • asp_index_on_save_stop
        • asp_indexing_keywords
        • asp_indexing_string_pre_process
        • asp_indexing_string_post_process
        • asp_post_content_before_tokenize_clear
        • asp_post_content_before_tokenize
        • asp_post_excerpt_before_tokenize
        • asp_post_title_before_tokenize
        • asp_file_contents_before_tokenize
        • asp_post_permalink_before_tokenize
        • asp_index_terms
        • asp_post_custom_field_before_tokenize
        • asp_index_cf_contents_before_tokenize
        • asp_index_before_shortcode_execution
        • asp_index_after_shortcode_execution
    • Templating
      • Filter layouts Templating
      • Result Templating
    • Constants
  • Frontend Filters
    • Taxonomy Filters
      • Restricting results to the same category as the current post object
      • How to automatically check/select filter values based on the archive page?
    • Frontend filters API
  • Tips & Miscellaneous
    • Divi
      • Divi Blogs Live Search and Filter
    • Jet Engine
      • Jet Engine Listing Grid Live Search and Filter
      • Searching Jet Engine Custom Meta Storage fields
    • Tutorials
      • PDF results thumbnails
      • Demo setup: Staff search and Filter
      • Demo Setup: WooCommerce Search
      • Demo setup: WooCommerce Shop Search and Filter
      • Demo Setup: Events Search – Events Manager
      • Demo Setup: Events Search – The Events Calendar
      • Compact ‘pop-out’ search bar placement on specific pages only
      • Index Table – Indexing ACF repeater field titles and contents
      • Change Suggested Phrases conditionally
      • How to add shortcode to the results content?
      • How to add variables to the “redirect to url” or the “show more url”?
      • Indexing Shortcodes within custom field contents
    • Post Types
      • Index Table - Indexing child post contents to parent
      • Limit results to specific post IDs only
      • Filter posts (or CPT) which user can’t access
      • Restricting results by user Groups using the Groups plugin by itthinx
      • Limiting results to specific posts by parent ID
      • Limit results to current page children
      • Excluding posts or CPT by parent ID(s)
      • Searching posts, pages (or any CPT) by specified keywords only, nothing else
      • Showing the post type name in result title or content
      • Searching within given categories/taxonomy terms only
      • Search only in the same category as the current post or page (single page)
      • Search only within the current category (or any taxonomy) archive
      • Filtering pages by page template
    • Taxonomy Terms
      • Displaying taxonomy name in taxonomy term results
      • Limiting taxonomy term results to specific term IDs only
    • WooCommerce
      • Displaying On Sale products only in WooCommerce
      • Ordering product by stock status
      • Making a product in-stock & out of stock filter
      • Add to cart button for Vertical and Horizontal results
      • Get formatted price in result title or in content
      • Showing products in-stock only
      • Showing in-stock and backorder products only
      • Excluding hidden catalog products
      • Showing featured products first
      • How to search products & product SKU?
      • How to search Products by variation SKUs?
      • Search product attributes
      • How to search users by city, state, zip code… ?
    • Compatibility
      • WPML Compatibility issues and fixes
    • Files & Media
      • Searching Image EXIF metadata
    • Other
      • Restrict results from the current author archive page
      • Presetting search options via a custom URL
      • Matomo analytics tracking integration
      • Replace search keywords (whole words)
      • Replace or remove characters from search phrase
      • Adding spaces in search phrase between alphabetics and numbers
      • How to change the results URL to something else?
      • Numbering the results
      • How to use the search without the live ajax feature, as a regular search?
      • Empty search input field on the search results page
      • Singular and Plural keywords index
  • Other
    • SearchQuery
    • REST API
    • Building a custom REST API
    • Javascript API
    • Javascript Hooks
      • asp_redirect_url
      • asp_search_data
      • asp_live_load_html
      • asp_search_html
      • asp_compact_width
    • Theme Functions
Powered by GitBook
On this page
  • Search Setup
  • General Options
  • Search Filters
  • Placing the search filter on the Shop Page
  • Using a Block Widget
  • Using a Page Builder or Shortcode Block
  1. Tips & Miscellaneous
  2. Tutorials

Demo setup: WooCommerce Shop Search and Filter

Placing Ajax Search Pro search and filters to the WooCommerce shop page

PreviousDemo Setup: WooCommerce SearchNextDemo Setup: Events Search – Events Manager

Last updated 1 month ago

This tutorial explains how to replicate the setup exactly.

Search Setup

First off, create a new search instance and open it's settings. (click on the image to magnify)

General Options

On the Search Sources -> Post Type Search panel choose the Products post type.

Next, go to the Search Behavior -> Search | Elementor | Archive | Shop page Live Results panel and turn On the live loader for the WooCommerce Shop page.

Search Filters

On the Frontend Search Settings -> General panel let's set the search settings to Visible and to a Block layout. This will make sure the Search Filters are visible at all time.

Next, let's quickly create the search filters. On the demo we are using the default WooCommerce demo data - which has 3 taxonomies as well as a custom field for a price.

Taxonomy Term Filters

Let's now switch to the Categories & Taxonomy Terms subpanel and select the taxonomies we want to be displayed on the filters.

In our case we will select Product Categories, Product Color and Product Size. For each one we drag the Use all from ... option value to the right side. This will create a filter box for each taxonomy.

Next, click on the blue Change Display Mode button. This allows changing the filter properties. We set the following properties:

  • Product categories - Display as Multiselect

  • Product Color - Display as Checkboxes & Display the "Select All" option

  • Product Size - Display as Radio & Display the "Choose one/Any" option

Price Slider Filter

Price in WooCommerce is stored in the "_price" custom field, so it's super easy to use in filters.

Switch to the Custom Fields subpanel and create a new filter with the following details:

  • Title Label: Price

  • Custom field: _price

  • Type: Range Slider

  • Slider Range: Make sure it's empty, the plugin will fetch the min/max values

  • Prefix: $ and Suffix: ,-

  • Track 1 & Track 2 defaults: Leave empty

That's it, the filters are done!

Placing the search filter on the Shop Page

This step highly depends on the theme or your exact setup.

In our case, we are using a theme with a Shop Sidebar widget support. Most modern Block themes support that.

Using a Block Widget

Go to the Appearance -> Widgets panel:

  • Open up the Shop Sidebar and Search for Ajax Search Pro block

  • Chose the search bar we just created (WooCommerce Shop Search)

  • Save the page

Using a Page Builder or Shortcode Block

Page builder often time offer a customizable shop page. In those cases either the Search Block (if supported) or the Search Shortcode can be used in a shortcode block.

The search shortcode can be found on the Ajax Search Pro menu page.

  • In your page builder open up the Shop page editor

  • Use the search shortcode in a shortcode block anywhere you prefer the search to be displayed

To learn more about filters, please check the documentation

That's it for the taxonomy filters

😄
search filters
shop search demo
WooCommerce shop page live search