---
title: "Search Bar Widget Settings Overview"
url: https://theplusaddons.com/docs/search-bar-widget-settings-overview/
date: 2023-09-13
modified: 2026-04-10
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/09/Search-Bar-Widget_-Settings-Overview-1024x536.jpg
word_count: 1462
---

# Search Bar Widget Settings Overview

## Key Takeaways

- WP Search Bar widget from The Plus Addons for Elementor allows users to search from posts, pages, products, or custom post types.
- Ajax Search feature can be easily added to enhance search functionality.
- Users can customize search results by managing visibility settings for title, content, and featured image.
- Keyword Suggestions can be added to the search bar for improved user experience.

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. 

[LIVE WIDGET LINK](https://theplusaddons.com/plus-search-filters/advanced-wp-ajax-searchbar/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) plugin installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text).

- Make sure the Search Bar widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Search Bar and activate.

## Learn via Video Tutorial:

https://www.youtube.com/watch?v=6A_HZSfZ5IA&t=618s

## How to Activate the Search Bar Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name** **and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar.png)

## 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 - 

![search bar search bar fields](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-search-bar-fields.gif)

**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](https://theplusaddons.com/docs//add-search-bar-for-posts-in-elementor/).

**Pages** - With this, you can search pages.

**Custom Post Type** - With this, you can [search custom post types](https://theplusaddons.com/docs//search-specific-custom-post-types-in-elementor/).

> *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](https://theplusaddons.com/docs/only-search-woocommerce-products-in-elementor/).

> *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](https://theplusaddons.com/docs//search-by-post-category-in-elementor/).

**post_tag** - With this, you can [search by different post tags](https://theplusaddons.com/docs/search-by-post-tag-in-elementor/).

**custom taxonomy** - With this you can [search by different custom taxonomies](https://theplusaddons.com/docs/search-custom-post-types-by-custom-taxonomy-in-elementor/).

> *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](https://theplusaddons.com/docs/search-woocommerce-products-by-category-in-elementor/).

**product_tag** - With this, you can [search by different product tags](https://theplusaddons.com/docs//search-woocommerce-products-by-tag-in-elementor/).

> *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 -

![search bar results area](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-results-area.png)

> *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 bar standard search](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-standard-search.png)

**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](https://theplusaddons.com/docs/search-posts-by-title-only-in-elementor/).

- **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](https://theplusaddons.com/docs//search-posts-by-custom-field-in-elementor/).

### 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](https://theplusaddons.com/docs/add-ajax-pagination-to-search-result-in-elementor/). 

- **Load more** - With this, you can [add an Ajax load more button to the search result](https://theplusaddons.com/docs/add-ajax-load-more-button-to-search-result-in-elementor/).

- **Lazy Load** - With this option, you can [add an Ajax lazy load to the search result](https://theplusaddons.com/docs//add-ajax-lazy-load-to-search-result-in-elementor/).

### Extra Option

In the **Extra Option** tab, you’ll find some powerful options.

![search bar extra option](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-extra-option.png)

**AJAX Search** - From here, you can [turn your search into an Ajax search](https://theplusaddons.com/docs/add-ajax-search-for-woocommerce-products-in-elementor/).

**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](https://theplusaddons.com/docs/add-keyword-suggestions-below-search-in-elementor/).

**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.

![search bar style](https://theplusaddons.com/wp-content/uploads/2023/09/search-bar-style.png)

**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](https://theplusaddons.com/docs//on-scroll-view-animation/)

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: How do I customize the search bar in WordPress?**
A: The Plus Addons for Elementor allows you to customize the search bar extensively. You can manage the label text, placeholder text, and icon of the search input field under the Search Input tab. Additionally, styling options for the search box, dropdown, and result area can be adjusted in the Style tab. This flexibility helps create a search bar that fits your site's design and enhances user experience.

**Q: What are the key features of the search bar widget?**
A: The search bar widget from The Plus Addons for Elementor includes several key features such as Ajax search, which provides instant results, and the ability to search across multiple post types including posts, pages, and custom post types. You can also implement keyword suggestions and search based on custom fields, making it a powerful tool for enhancing site navigation.

**Q: What common mistakes should I avoid when setting up the search bar?**
A: A common mistake is not activating the Search Bar widget after installation. To ensure it works, go to The Plus Addons u2192 Widgets and toggle the Search Bar on. Additionally, failing to configure the search input and result area settings can lead to a poor user experience, as users may not see relevant results or may be confused by the search interface.