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 Configuration
  • Theme
  • Taxonomy term Filters
  • Custom field filters
  • Organize and Advanced
  • Result Fields
  • Adding the Search and Results to the page
  1. Tips & Miscellaneous
  2. Tutorials

Demo Setup: WooCommerce Search

WooCommerce search example explained

PreviousDemo setup: Staff search and FilterNextDemo setup: WooCommerce Shop Search and Filter

Last updated 1 month ago

This tutorial shows how to recreate the page.

Search Configuration

Theme

Under the Theme & Styling -> Overall box Layout panel choose the Simple Blue Horizontal theme.

Taxonomy term Filters

Go to the Frontend Search Settings -> General panel and change the Search Settings Position option to Block or Custom, and also make it visible by default.

Now let's create the filters. First switch to the Taxonom Terms filters panel and choose the terms you want to display. In your case we choose "all" from product_cat, pa_color and pa_size

Now to change how the filters appear, click on the blue Display Mode button. For every selected taxonomy box you can choose the filter types and the related options.

That's it, now you will have taxonomy term filters available.

Custom field filters

In this example we have a simple price filter. To make that, switch to the Custom Fields panel, and make a filter on the _price field, choose Range Slider as the type. Leave empty the Slider Range so the min/max price is parsed from the database.

Organize and Advanced

You can change the order of the filter group fields on the Advanced panel. If you want to display results where the price is not specified then make sure that the Allow results with missing custom fields, when using custom field selectors? option is also enabled.

Result Fields

Go to the Advanced Options -> Content & Fields panel, and change the Advanced Description field accordingly. In the example we used:

<p>{_price_html}</p>
[<p><strong>Category: </strong>{__tax_product_cat}</p>]
[<p><strong>Size: </strong>{__tax_pa_size}</p>]
[<p><strong>Color: </strong>{__tax_pa_color}</p>]

This displays the price, the product categories, the product sizes and product colors in the result contents.

Adding the Search and Results to the page

[wd_asp id=1]

..and:

[wpdreams_ajaxsearchpro_results id=1]

We simply added the search shorcode into a column, and the results shortcode into shortcode below the column row like this:

That's it!

In the results we want to display some taxonomy terms as well as the price. For that we are using the features. That allows displaying categories, custom fields etc.. within the result contents.

In the example we are using the Gutenber editor, but you can use any page builder or even the classic editor if you want to - all you need is the , which look like this:

Advanced Title and Content field
search and results shortcodes
WooCommerce search example
Ajax Search Pro and WooCommerce Search