Do you want to add a search functionality to your Elementor site? Adding a search bar to your Elementor site can help improve the user experience and increase engagement, especially if you have lots of posts or products.
With the WP Search Bar widget from The Plus Addons for Elementor, you can easily allow users to search from posts, pages, products or custom post types.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have The Plus Addons for Elementor plugin installed and activated.
- This is a Premium widget, and you need the PRO version of The Plus Addons for Elementor.
- Make sure the Search Bar widget is activated, to verify this visit Plus Settings → and Search for Search Bar and activate.
Learn via Video Tutorial:
How to Activate the Search Bar Widget?
Go to
- The Plus Settings → Plus widgets
- Search the widget name and turn on the toggle then click Save.
Key Features
- Ajax Search – You can easily add an Ajax search feature.
- Multiple Post Types – You can search from different post types such as post, page, products and custom post types.
- Search Specific Post Type – You can also search from a specific post type.
- Search by Taxonomy – You can search from different taxonomies such as post category, post tag, product category, product tag and custom taxonomy.
- Search Based on Custom Fields – You can easily search posts based on custom fields.
- Keyword Suggestion – You can add custom keyword suggestions to your search bar.
How to Use the Search Bar Widget?
To use the Search Bar widget, add the widget on the page or template.
Search Bar Fields
Open the item under Search Bar.
From the Source dropdown, you have to select the source where the search will function. Here, you’ll find two options –
Post – For searching different post types such as post, page, product and custom post type.
Taxonomy – For searching different taxonomies such as post category, post tag, product category, product tag and custom taxonomy.
Post
When you select Post, from the Select Type field, you have to select from different post types. Here you’ll find few options –
Posts – With this, you can search normal blog posts.
Pages – With this, you can search pages.
Custom Post Type – With this, you can search custom post types.
Note: The option name will depend on the custom post type name and the number of items will depend on the number of custom post types you have.
Products – With this, you can search products.
Note: You must have WooCommerce installed for the product option.
You can select multiple post types together as well.
Taxonomy
When you select Taxonomy, from the Select Taxonomy field, you have to select from different taxonomies. Here, you’ll find few options –
category – With this, you can search by different post categories.
post_tag – With this, you can search by different post tags.
custom taxonomy – With this you can search by different custom taxonomies.
Note: The option name will depend on the custom taxonomy name and the number of items will depend on the number of custom taxonomies you have.
product_cat – With this, you can search by different product categories.
product_tag – With this, you can search by different product tags.
Note: You must have WooCommerce installed for the product options.
In the Label field, you can add a label name for the select dropdown.
In the Placeholder field, you can add a placeholder text for the select dropdown.
When you select a source you’ll see a Show Index toggle, by turning it on you can show the number of posts an item has in numbers.
You can click on the +Add Item button to add multiple sources.
Search Input
From the the Search Input tab, you can manage the label text, placeholder text and icon of the search input field.
Result Area
From there, you can manage the Ajax search results. Here, you’ll find few options –
Note: This option is only available when you have turned on AJAX Search from the Extra Option tab.
Result Style – From here, you can make the search result style horizontal or vertical.
Posts Per Page – From here, you can set the number of items per page that will show in the search result.
Result Visibility Settings – From here, you can manage which elements of the post will be visible in the search result.
- Enable Title – To show or hide post title.
- Enable Content – To show or hide post content.
- Enable Thumb – To show or hide post featured image.
- Enable Price (Woo) – To show or hide WooCommerce product price.
- Enable Short Description – To show or hide post short description.
- Enable Total Count – To show or hide the result count.
- Total Result Text – From here, you can customize the result text.
Text Limit – From here, you can limit title and content by word or character separately.
Result area link – From here, you can enable or disable the result items links.
Enable ScrollBar – From here, you can add a scroll bar to the Ajax search result area by setting a height.
Standard Search
Note: This option is only available when you have turned on AJAX Search from the Extra Option tab.
Search Type – From here, you can choose the search type. Here, you’ll find three options –
- Full Match – With this option, results will only show on exact match.
- Word Match – With this option, results will show on partial or word match.
- Default – This will keep the search in the default mode.
Generic Filters – From here, you can set on which part the search will be performed. Here, you’ll find few options –
- Search in Title – This will search the post title.
- Search in Excerpt – This will search the item excerpt content.
- Search in Content – This will search the item content.
- Search in Permalink – This will search the item slug or permalink
- Search in Category – This will search the item category.
- Search in Tags – This will search the item tag.
ACF Filters – From here, you can search items based on custom field data.
Load More/Lazy Load
Note: This option is only available when you have turned on AJAX Search from the Extra Option tab.
Loading Options – From here, you can add options to load more items on the Ajax search result area. Here, you’ll find three options –
- Pagination – With this, you can add an Ajax pagination to the search result.
- Load more – With this, you can add an Ajax load more button to the search result.
- Lazy Load – With this option, you can add an Ajax lazy load to the search result.
Extra Option
In the Extra Option tab, you’ll find some powerful options.
AJAX Search – From here, you can turn your search into an Ajax search.
Only for specific CPT – From here, you can limit the search to a specific post type such as post, page, product or custom post type.
Keyword Suggestions Area – From here, you can add custom keyword suggestions to your search.
Search Button – From here, you can manage the search button text and icon.
Post Not Found Message – From here, you can customize the message if there are no items to show.
How to Style the Search Bar Widget?
To style the Search Bar widget, you’ll find all the styling options under the Style tab.
Label – From here, you can manage the style of the field label.
SearchBox – From here, you can manage the style of the search field.
Dropdown – From here, you can manage the style of the dropdown.
Button – From here, you can manage the style of the search button.
Result Box – From here, you can manage the style of the search result area.
Results Heading – From here, you can manage the style of the search result heading.
Results Content – From here, you can manage the style of the search result items.
Overlay Option – From here, you can manage the style of the search overlay background.
Background Option – From here, you can manage the style of the search area background.
Error Option – From here, you can manage the style of the result not found text and background.
On Scroll View Animation – This is our global extension available for all our widget, this adds scrolling animation as the widget comes in viewport.
Learn more about On Scroll View Animation
Advanced options remain common for all our widget, you can explore all it options from here.
