Adding an Ajax Search for WooCommerce Products in Elementor is a great way to improve the user experience on your online store. With the free “Woo AJAX Search Widget,” you can enable real-time product search that displays instant results as users type—eliminating the need to reload the page. This not only speeds up the product discovery process but also helps shoppers find exactly what they’re looking for more efficiently. Plus, the widget offers flexible styling options, so you can match the search bar design with your site’s branding seamlessly.
Popular Use Cases for adding an Ajax Search for WooCommerce Products on an Elementor Website
Large Product Catalogs
Stores with hundreds or thousands of products benefit greatly from Ajax Search, as it helps customers find specific items quickly without browsing through multiple pages.
Mobile Shopping
Ajax Search improves mobile usability by offering quick, live search results in real time—ideal for users who want fast access without navigating deep menus.
Multi-Category Shops
In stores that offer a wide range of categories (e.g., electronics, fashion, home décor), Ajax Search helps users jump straight to products across different categories with ease.
Niche Online Stores
If your store sells specialized items (e.g., car parts, pet supplies, health supplements), Ajax Search helps users instantly locate exactly what they need by typing in specific keywords or product codes.
Improving UX in One-Page Layouts
Ideal for Elementor-built landing pages or one-page stores where you don’t want users to leave the page—they can search and view suggestions dynamically in the same view.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Woo AJAX Search widget to your Elementor website
To add ajax search for WooCommerce products, install the Woo AJAX Search widget from the Unlimited Elements Widget library.
Step #3: Add the Woo AJAX Search widget to your Elementor page
Now, in the Elementor editor, find the Woo AJAX Search widget and drag it to the desired part of your page.
Search Sources
Search By
Select the search criteria. You can choose more than one custom post field.
- All Product Fields
- Title
- Content
- Excerpt
Search By SKU
Enable this option to search by SKU.
Search In Meta
Enable this option to search within meta fields.
Search In Terms
Enable this option to search within taxonomy terms.
General Settings
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
Product Card Settings (Pro Feature)
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 (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
Products Query Settings
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
Post Pagination
Wrapping it Up!
Implementing an Ajax Search for WooCommerce Products in your Elementor-built site is a simple yet powerful upgrade that can significantly enhance your store’s usability. With real-time results and customizable design, your customers enjoy a smoother and faster shopping experience. Try adding the Woo AJAX Search Widget today and give your visitors the smart product search functionality they expect from a modern online store.
