# Searcher - Advanced Search for Elementor

- created: 08/28/2022
- latest update: 08/28/2022
- by: merkulove
- myselection.io/searcher

WordPress plugins Documentation

### Overview

The Searcher is a lightweight advanced search WordPress plugin for Elementor. The search field makes it easy and quick for anyone to find specific information. It allows searching throughout the content of the site or separately on pages, posts, WooCommerce products or other post types.

The plugin supports two types of requests: Asynchronous and Regular. The Asynchronous type displays the results already in the process of typing. In this case, the user does not need to know the exact name of a blog name or product but only a small part of it and it’s up to the search system to do the rest. At the same time, the results are displayed clearly and relevantly. Depending on the post type, the list of results will consist of a featured image/product image, a title, and a short description. The Regular type starts searching after entering a query and displays the results on a separate page. Each widget element such as field, button and label has separate settings for customization.

Support Request Types: Asynchronous and Regular
Search by Custom Post Types
Crafted for Elementor Builder
Woocommerce Product Data Support
Support Icon Management
Includes Templates for Elementor
Suitable for all kinds of Layouts and Templates
Perfect for Popular Elementor Themes
Completely Cross-Browser Support

To better understand the capabilities of the widget, we included 5 templates in the package. These are just some examples that can inspire you to create your style. It provides you with a quick start in a few clicks.

Flexible and straightforward style settings for the search field and for the list with results allow you to customize it in accordance with the design of your site. Change the color, typography, width and height, background color, border, margins, and paddings for each element. All this can be configured directly from the Elementor’s interface and does not require additional code knowledge.

Searcher plugin for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.

### Features of the Searcher plugin for Elementor

- Advanced quick search for Elementor
- Search by custom post types
- Supports Woocommerce products
- Supports two request types: Asynchronous and Regular
- Editable text for empty results (Asynchronous type)
- Clear and relevant results
- Supports different languages
- Icon management
- Flexible style settings
- Responsiveness settings
- Perfect for Elementor 3.0 and higher
- Works well with all WordPress themes built on Elementor
- Totally SEO Friendly
- Included pot file for quick translation on any language
- Perfect for RTL direction
- Fast and smooth installing
- Tested and compatible up to WordPress 6+
- Lightweight and Fast
- All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
- Easy to use and customize with a modern User Interface
- Installation Guide and detailed Users Manual
- Six months Included Support for CodeCanyon buyers

The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.

### Installing

Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:

## Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )

###### STEP 1

First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin

###### STEP 2

Go to Plugins > Add New

Add New Plugin to WordPress

###### STEP 3

Click Upload Plugin Button

Upload New Plugin to WordPress

###### STEP 5

Choose archive with Plugin and press Install Now Button

###### STEP 6

After Installing go back to the Plugins page and click Activate below plugin title

Activate Installed Plugin

## Installation the plugin through FTP or build-in File manager

###### STEP 1

Use Login and Password to connect to your web-server via FTP or use your hosting file manager.

###### STEP 2

Upload archive with plugin to /wp-content/plugins

###### STEP 3

On next step Unzip the archive with the plugin

###### STEP 4

Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.

Activate Installed Plugin

After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.

### Settings

The Search widget for Elementor is an advanced search form for WordPress that makes it easy and quick for anyone to find specific information. It allows searching throughout the content of the site or separately on pages, posts, WooCommerce products or other post types.

For further work, you need Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

- Content
- Style
- Advanced

## Content Tab

In the Content section, you can manage basic settings of the Search widget such as types of posts, request type, search button and label, etc.

### General

- Alignment – manage the current button alignment (left, center, right).
- Placeholder – enter the placeholder text for the search field.
- Request type – select one of the available search request types: Asynchronous or Regular. Asynchronous type displays the results already in the process of typing. For this type, additional settings are available to specify the number of results on typing, the delay in displaying the result, and text editing for an empty result. The Regular type starts searching after entering a query and displays the results on a separate page.
- Show search button – the toggle to enable/disable the search button display.
- Search post types – select the post types that will be included in the search.

General settings of the Search widget

### Search button

- Search button content – text field for entering the button caption.
- Search button position – select the button position relative to the search bar: Left, Right, Above left, Above center, Above right, Under left, Under center, Under right, Inside.
- Show search button icon – the toggle to enable/disable the search button icon display. If the option is enabled it allows you to select an icon from the Font Awesome library and specify the icon position: Left, Right, Top left, Top center, Top right, Bottom left, Bottom center,Bottom right.

Search button settings

### Search bar label

- Search bar label – text field for entering the label.
- Search bar label position – select the label position relative to the search bar: Left, Right, Above left, Above center, Above right, Under left, Under center, Under right, Inside.
- Hide label – the toggle to hide/disable the search bar label.

Bar label settings of the Search widget

## Style tab

On the Custom fields widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

### Search form

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Width – specify search form width using the slider in different units(px, %) for desktops, tablets, or phones.

###### NORMAL/HOVER

The search form settings for different states of the Search widget.

- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Search button

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Icon spacing – the setting allows managing the spacing between text and button icon in different units(px, em, %) for desktops, tablets, or phones.
- Icon size – specify the icon size of the button via slider for desktops, tablets, or phones.
- Width – specify search button width using the slider in different units(px, %) for desktops, tablets, or phones.
- Height – specify search button height using the slider in different units(px, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.

###### NORMAL/HOVER/FOCUS

The search button settings for different states of the Search widget.

- Color– specify the font color and opacity for the text of the current block using the color picker.
- Icon Color – specify the icon color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Search field

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Width – specify search field width using the slider in different units(px, %) for desktops, tablets, or phones.
- Height – specify search field height using the slider in different units(px, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.

###### NORMAL/HOVER/FOCUS

The search button settings for different states.

- Color– specify the font color and opacity for the text of the current block using the color picker.
- Placeholder Color – specify the font color and opacity for the placeholder text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Label/Result box/Result box item/Result box item post title/Result item post excerpt

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.

###### NORMAL/HOVER

The search label settings for different states.

- Color– specify the font color and opacity for the text of the current block using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

### Result box item image

- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.

###### NORMAL/HOVER

The settings of the result box item image for different states.

- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

## Advanced Tab

The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

## Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor

#### Was this article helpful to you?