The Woo AJAX Search Widget for Elementor allows you to create a fast and responsive search experience on your website. With this widget, users can search for products instantly with live results, enhancing navigation and making it easier for visitors to find exactly what they’re looking for. Whether you’re managing affiliate products or an e-commerce site, this widget integrates seamlessly with Elementor, adding powerful search functionality without compromising page speed or design. In this guide, we will walk you through the steps to add and customize Woo AJAX filters on your Elementor website.
Let’s look at each of the options in the Woo AJAX Search widget for Elementor below.
Before starting, ensure you have added a WooCommerce widget, as the Woo AJAX Search works exclusively with WooCommerce widgets. The filter integrates seamlessly with various types, including ‘Woo Product Grid,’ ‘Woo Product List,’ and more. In this tutorial, we’ll use one of these WooCommerce widgets.
To know more about WooCommerce widgets, click here.
Add a Woo AJAX Search Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Woo AJAX Search”
- Hover over the widget in the search results and click install
- Add the “Woo AJAX Search” widget to any Elementor Page
General Settings
Enable Connection for AJAX Post Filters
Turn on the connection for AJAX post filters.
Search Result Open New Window
By turning this on, search results will open in new window.
Search Placeholder
Type the placeholder for search input field.
Show Search Label
Show or hide the search label.
Search Label
Type text to show as search label.
Layout
Choose the layout.
- Row
- Row Reverse
Show Suggested Searches
Show/hide the suggested searches.
Suggested Searches
Type text for suggested searches.
Show Product Card
Show/Hide the product card.
Enable Third Party Hooks
Enable third party hooks. Third party hooks are disabled by default to allow errorless ajax search functionality. but sometimes you can choose to turn them on. For WPML integration for example.
Search Button Settings
Search Button Open New Window
Search button will open new window.
Show Search Button
Show/Hide the search button.
Search Button Text
Type text for search button.
Search Button Icon
Choose icon for search button.
Product Card Settings
Product Card Width
Set the product the width in percentage.
Show Price
Show or hide the price element.
Show Product Card Image
Show or hide the product card image.
Show Product Title
Show/Hide the product title.
Show Add To Cart
Show/Hide the add to cart button.
Add To Cart Button Text
Type text for add to cart button.
Out Of Stock Text
Type text for out of stock message.
Show Count Buttons
Show/Hide the quantity count buttons.
Quantity Minus
Choose icon for quantity minus button.
Quantity Plus
Choose icon for quantity plus button.
Show Product Page Button
Show/Hide the product page button.
Product Page Text
Type text for product page button.
Hide Card On Breakpoint
Set the breakpoint beyond which the product card will be hidden.
Results Settings
Show Prices In Results
Show/hide the product prices in results.
Show Images In Results
Show/hide the product images in results.
Show Pagination
Show/Hide the pagination.
Pagination Position
Set the position of pagination
- Before Results
- After Results
Number of Items Per Page
Set the number of items to display per page.
Left Font Awesome
Paste unicode from font awesome website for left text.
Right Font Awesome
Paste unicode from font awesome website for right text.
Keys Control
Turn on the keys control.
Go To Search Page On Enter
Open search page on pressing enter.
Number of Columns
Set the number of columns in page.
Items Gap
Set the gap between items.
No Results Text
Type to show the no results message.
Results Text
Type text to show as results text.
Mark Bold Search Phrase
Searched terms will be shown bold.
Show Label From "Custom Field"
Show label from custom field.
Custom Field Name
Type the custom field name.
Testing and Tools
Show List Debug
Debug list in editor, so you can style it.
Show Loader Debug
Show/hide the loader debug option.
Products Query Setting
Select the exact products you want to show in your Ajax Search results.
Product Source
Choose any of the below options for your product source.
- Custom Products
- Current Query Product
- Related Products
- Manual Selection
Include By
Include the Products from different options given below
- Author
- Date
- Post Meta
- Current Page Terms
- Most Viewed
- IDs from PHP function
- IDs from Product Meta
- Post IDs from Dynamic Field
- Terms from Dynamic Field
- Terms from Current Post Meta
- Terms Free Selection
- Current Query as a Base
- Products On Sale Only (woo)
- Up Sells Product (woo)
- Cross Sells Product (woo)
- Out of Stock Products Only (woo)
- Recently Viewed Products (woo)
- Products From Post Content (woo)
Include By Terms
Choose specific Products that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
Exclude By
Choose specific Products that you would like to exclude from your selection by adding rules.
- Out of Stock Products (woo)
- Products on Sale (woo)
- Terms
- Current Products
- Specific Products
- Author
- Product Without Featured Image
- Products With Current Category
- Products With Current Tags
- Offset
- Avoid Duplicates
- Post IDs from Dynamic Field
To know more about Product query setting, please visit our article on Advanced Post Selection
Post Pagination
Pagination
Display the pagination for your ajax search results
- None
- Numbers
- Using Pagination Widget
Woo Ajax Search Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Wrapper Styling
Set the wrapper width, padding, border, radius, alignment, shadow and background.
Search Input Styling
Set the search input border, radius, background, text color, placeholder color, padding, and typography.
Suggested Styling
You can set the suggested search color, typography, and padding.
Search Button Styling
Here, you can set the search button gap, typography, padding, radius, background, border, icon size, color and gap.
Loader Styling
You can set the loader color.
Results Styling
You can style the results shadow, border, radius, background, offset and padding.
Results Pagination Styling
Here, you can set the results pagination padding, background, color, and typography.
Results Item Styling
You can set the results item border, padding, background, typography, text color, and layout.
Results Image Styling
Set the results image width, height, radius, image fit, and border.
Results Title Styling
Style the results title typography and title color.
Results Price Styling
Here, you can set the typography and color of result price element.
Product Page Button Styling
You can set the product page button typography, padding, spacing, border radius, background color, text color and border.
Add To Cart Button Styling
You can set the add to cart button typography, padding, spacing, border radius, background color, text color and border.
Custom Field Label Styling
Here, you can set the custom field label typography, alignment, background color, padding, and spacing.
Woo AJAX Search Design Examples For Elementor
Here are some live use cases for the Woo AJAX Search Widget.
Woo AJAX Search widget on fashion store.
Woo AJAX filter shown on jewelry store.
Thank you for exploring the Woo Ajax Search Widget for Elementor! We hope this documentation has helped you integrate a smooth, effective search experience on your website. If you have further questions or need additional resources, please don’t hesitate to reach out, we’re here to support!
