1. Documentation /
  2. Ajax Instant Search

Ajax Instant Search

Allow your customers to get instant live search results as they type their query.

Installation

↑ Back to top
  1. Download the .zip file from your WooCommerce account.
  2. Go to: WordPress Admin > Plugins > Add New and Upload Plugin with the file you downloaded with Choose File.
  3. Install Now and Activate the extension.
More information at Install and Activate Plugins/Extensions.

Setup and Configuration

↑ Back to top
Once the extension is installed navigate to WordPress Admin > WooCommerce > Ajax Search. Here you can customize all extension settings and use the shortcode to add live search bar anywhere on your website. Please configure all of the below settings, copy and paste the shortcode where you want to add the instant search bar.

General Settings:

↑ Back to top
Here you can customize following options,
  • Search form title
  • Place holder
  • Button text
  • Minimum character limit
  • Maximum search results to be displayed in instant live search results

Filter Settings:

↑ Back to top
The filter settings enables you filter your search results. That is where the extension should search for entered query – in products or All (products, pages and posts). Further down, you can choose to show/hide category dropdown and enable search by SKU. Please note when “All” is selected in specify search section a drop will be displayed along with the search bar to let customer choose if they want to search in ALL(products, pages and posts) or just products. For product search you can refine search results by choosing the products elements where the extension should search for given query. The elements include,
  • Product title
  • Excerpt
  • Content
  • Product tags
  • Hide out of stock products

Results Sorting:

↑ Back to top
This tab allows you to customize the display order of your search results. You can choose to what to display products or posts and pages first.

Search Results Settings:

↑ Back to top
This tab allow customize following settings: Search page: Here you can choose which search page the extension should return when customer enter hit the search button. WordPress and WooCommmerce search are your default search pages which the WordPress search displays both products + pages and posts and WooCommerce search displays only product results. You can choose the custom plugin search that lists products + posts and pages based on the settings you have defined in filters tab above. Templates: The extension comes with 2 templates where in template1, the image thumbnails are displayed in left and in template2 the thumbnail is displayed on the right side. Thumbnail visibility: You can choose to show/hide product thumbnails. Works only with live search results. Search bar width: You can choose to display search bar in full or default width. The width will be automatically adjusted when the filter dropdowns are included. Show price: You can choose to show price in live search results and customize price label. Works only with live search results only. Loader image: You can a custom loader image to keep your customers informed that the search is fetching their results.

Display Settings:

↑ Back to top
In display settings you can customize following options. These options are for only live search results displayed as customers’ type their query.
  • Enable add to cart button
  • Show sales badge and customize its background and text color
  • Show out of stock badge and customize its background and text color
  • Show featured badge and customize its background and text color
  • Customize Text size for Title, Category, Price and Description
  • Customize title color
  • Excerpt limit
  • Show/hide category in results
  • Enable and customize “View All” link and no results text