Do you want to add a search feature specifically for your WooCommerce products? Having a search feature on your WooCommerce store can improve the user experience by allowing customers to find products quickly.
However the default search from WordPress or Elementor searches everything, but with the Search Bar widget from The Plus Addons for Elementor, you can limit the search to WooCommerce products only.
To check the complete feature overview documentation of The Plus Addons for Elementor Search Bar widget, click here.
Best Used For:
- WooCommerce stores that want to restrict the search results to products only, preventing blog posts and pages from appearing in search results.
- Online shops with large product catalogs where customers need a fast, focused search to find specific products without irrelevant results.
- Elementor-built store pages that need a branded search bar scoped to WooCommerce products with a dropdown category selector.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it is installed & activated to enjoy all its powers.
To do this, make sure you have added some products to your WooCommerce store.
Then, add the Search Bar widget on the page or template, then follow the steps.
1. Open the item under Search Bar and select Post from the Source dropdown.
2. From the Select Type dropdown, select Products.
Note: Make sure to remove Posts, it will be selected by default.
Now, you should be able to see a dropdown beside the search bar.
In the Label field, add a label name for the select dropdown. This is useful when you want to display a visible prompt like “Search Products” above the search field on your WooCommerce store page.
In the Placeholder field, add a placeholder text for the select dropdown.
From the Show Index toggle, show the number of products the item has in numbers. Use this when you want to display product counts next to each category in the search dropdown, helping customers gauge selection size before clicking.
To add product comparison features alongside search on your WooCommerce store, see How to Add Product Compare in Elementor?
3. Now go to Extra Option tab and make sure the AJAX Search is enabled.
Note: The AJAX Search will be enabled by default.
Now you can select product from the dropdown to show all the products in the search result or you can directly search for products as well.
Also, read How to Search WooCommerce Products by Category in Elementor.
