The “Woo AJAX Search Widget” allows you to add a powerful live search bar for free in WordPress Elementor websites with WooCommerce. This widget enhances the shopping experience by providing instant product search results as users type, making it easier to find products quickly. You can customize the search box design, result layout, and styling to match your site seamlessly.
Let’s explore the features of the “Woo AJAX Search Widget” below.
Elementor Woo AJAX Search Tutorial Video (Step by Step Guide)
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 Free Woo AJAX Search to Elementor
This widget requires Unlimited Elements Free 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 in Elementor Woo AJAX Search
Enable Connection for AJAX Post Filters (Pro)
Turn on the connection for AJAX post filters.
Search Result Open New Window (Pro)
By turning this on, search results will open in new window.
Search Placeholder
Type the placeholder for search input field.
Show Search Label (Pro)
Show or hide the search label.
Search Label (Pro)
Type text to show as search label.
Layout
Choose the layout.
- Row
- Row Reverse (Pro)
Show Suggested Searches
Show/hide the suggested searches.
Suggested Searches
Type text for suggested searches.
Show Product Card (Pro)
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 in Elementor Woo AJAX Search
Product Card Settings in Elementor Woo AJAX Search (Pro)
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 in Elementor Woo AJAX Search
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 (Pro)
Turn on the keys control.
Go To Search Page On Enter (Pro)
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 (Pro)
Searched terms will be shown bold.
Show Label From "Custom Field" (Pro)
Show label from custom field.
Custom Field Name
Type the custom field name.
Testing and Tools in Elementor Woo AJAX Search
Products Query Settings in Elementor Woo AJAX Search
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 in Elementor Woo AJAX Search
Elementor 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.
Elementor Woo AJAX Search Wrapper Styling
Set the wrapper width, padding, border, radius, alignment, shadow and background.
Search Input Styling in Elementor Woo AJAX Search
Set the search input border, radius, background, text color, placeholder color, padding, and typography.
Suggested Styling in Elementor Woo AJAX Search
You can set the suggested search color, typography, and padding.
Search Button Styling in Elementor Woo AJAX Search
Here, you can set the search button gap, typography, padding, radius, background, border, icon size, color and gap.
Loader Styling in Elementor Woo AJAX Search
You can set the loader color.
Results Styling in Elementor Woo AJAX Search
You can style the results shadow, border, radius, background, offset and padding.
Results Pagination Styling in Elementor Woo AJAX Search
Here, you can set the results pagination padding, background, color, and typography.
Results Item Styling in Elementor Woo AJAX Search
You can set the results item border, padding, background, typography, text color, and layout.
Results Image Styling in Elementor Woo AJAX Search
Set the results image width, height, radius, image fit, and border.
Results Title Styling in Elementor Woo AJAX Search
Style the results title typography and title color.
Results Price Styling in Elementor Woo AJAX Search
Here, you can set the typography and color of result price element.
Product Page Button Styling in Elementor Woo AJAX Search
You can set the product page button typography, padding, spacing, border radius, background color, text color and border.
Add To Cart Button Styling in Elementor Woo AJAX Search
You can set the add to cart button typography, padding, spacing, border radius, background color, text color and border.
Custom Field Label Styling in Elementor Woo AJAX Search
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.
Free Elementor Woo AJAX Search with a Woo Product Grid.
Free Elementor Woo AJAX Search for a Jewelry Shop.
Thank you for using the Woo AJAX Search Widget for Elementor! With its fast, real-time search functionality and seamless WooCommerce integration, this is the best Woo AJAX Search Widget for Elementor, perfect for helping customers find products quickly and efficiently. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.