Advanced Search

How to use Advanced Search Widget of Sky Addons for Elementor

Advanced Search is a live search bar for Elementor that shows matching results in a dropdown while your visitor is still typing — no page reload, no waiting. Unlike the default WordPress search, which lists posts by date, it puts the closest title match at the top, so the thing people are actually looking for appears first. You can let visitors narrow results by category and date, show a thumbnail, price, or excerpt beside each result, and even search WooCommerce products by SKU. This documentation will guide you through the process of using the Advanced Search Widget to help visitors find things on your site fast.

Features:

1. Instant Results While Typing: Matching posts appear in a dropdown as the visitor types, with a small spinner while the site is looking.
2. Best Match First: An exact title match is pushed to the top instead of being buried under newer posts, which is what plain WordPress search does.
3. Category and Date Filters: Optional dropdowns let visitors narrow the search, including a custom From/To date range.
4. Rich Result Rows: Show a thumbnail, the post type, and a short excerpt, with the searched words highlighted in the text.
5. WooCommerce Ready: Product results can show price, SKU, and stock status — and visitors can search by SKU, which WordPress cannot do on its own.
6. Grouped Results: Give each post type its own heading and its own share of the dropdown, so posts never crowd out products or pages.
7. Popular Searches: Show the terms people actually search on your site as clickable chips under the bar.
8. Query Builder: Limit what is searchable by author, category or tag, or hide specific posts entirely.
9. Keyboard Friendly: Arrow keys move through results, Enter opens the highlighted one, Escape closes the dropdown — and screen readers announce how many results were found.
10. One Styleable Bar: The whole search bar is a single box you can shape into a rounded pill, a bordered bar, or a flat minimal field.

Insert Advanced Search Widget

1. Open Elementor Editor. In the Elementor panel, search for “Advanced Search” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor.

Configure Layout

The Layout section decides what gets searched and how the search behaves:

1. Search In: Pick which content types are searched — Posts, Pages, Products, or any custom post type on your site. You can select several at once.
2. Results To Show: How many results appear in the dropdown, from 1 to 20. Five is a comfortable starting point.
3. Search In Content: Choose how deep the search looks — Title + Excerpt + Content (most thorough), Title + Excerpt, or Title only. Searching post content is the slowest part of the query, so on a site with tens of thousands of posts, narrowing this makes results noticeably faster.
4. Start Searching After: How many characters must be typed before the first search runs. Two is the default; raising it to three cuts down needless searching on very busy sites.
5. Open Results Page In New Tab: When a visitor presses Enter or clicks the button to see the full results page, open it in a new browser tab.

Configure Search Field

The Search Field section controls the bar itself — its wording, its icon, and its button:

1. Placeholder: The grey hint text shown in the empty field, such as “Search…” or “What are you looking for?”.
2. Search Icon: Leave this empty to use the built-in magnifier, which always displays. Pick your own icon only if you want something different.
3. Icon Position: Put the icon before the text (left) or after it (right). Right-side icons give the clean, minimal look you see on many modern sites.
4. Show Submit Button: Turn the “Search” button on or off. With it off, the bar becomes a single clean field — visitors still search by typing or pressing Enter.
5. Submit Text: The wording on the button, for example Search, Go, or Find.
6. Submit Icon & Icon Spacing: Optionally add an icon inside the button and set the gap between the icon and its text.

Configure Filters

Filters are small dropdowns that sit inside the search bar and let visitors narrow their own results. Both are off by default:

1. Category Filter: Adds a category dropdown to the bar. Use All Categories Text to rename the default “search everything” option.
2. Date Filter: Adds a date dropdown with Today, Yesterday, Last 7 Days, This Month, Last Month, and Custom. Choosing Custom slides open a From and To date picker; results update once both dates are set.

Configure Query Builder

The Query Builder is optional and decides what is allowed to appear in results at all. Your visitors never see these settings — think of it as fencing off the searchable area. Leave every field empty to search everything:

1. Include Authors: Only content written by the chosen authors can appear.
2. Exclude Authors: Content by the chosen authors is never shown.
3. Include Terms: Only content in the chosen categories or tags can appear — handy for a search bar that covers one section of the site, such as a knowledge base.
4. Exclude Terms: Content in the chosen categories or tags is hidden from results.
5. Exclude Posts: Hide specific posts or pages by picking them one by one — useful for thank-you pages or internal notes.

Configure Results

The Results section shapes the dropdown that appears under the bar:

1. Thumbnail: Show the featured image beside each result.
2. Post Type Label: Show a small label such as Post, Page, or Product under the title, so visitors know what they are about to open.
3. Excerpt: Show a one-line summary under each title.
4. Group By Post Type: Add a heading for each content type and give every type its own share of the dropdown. Without this, one busy type can fill every slot and products or pages never get seen.
5. Results Per Type: How many results each type may contribute when grouping is on.
6. View All Text: The wording of the link at the bottom of the dropdown that opens the full results page. Leave it empty to hide the link.
7. No Results Text: The message shown when nothing matches, for example “Nothing found — try another word”.
8. Reveal Section: Paste the CSS class or ID of any section on the page (for example .promo-box or #help-block) and that section appears only when a search returns nothing. It is a friendly way to offer help, a contact form, or your best-selling products instead of a dead end.

Configure Popular Keywords

Popular Keywords shows the terms people really search for on your site as small clickable chips under the bar. Nothing needs to be typed in by hand — the list builds itself from real searches, and clicking a chip runs that search:

1. Show Popular Keywords: Turns the chip list on. On a brand-new site it stays empty until visitors start searching.
2. Title: The small heading above the chips, such as “Popular Searches” or “Trending”.
3. Max Keywords: How many chips to display, from 1 to 20.

Configure WooCommerce

This section appears once Products is one of the types in Search In, and it only affects product results:

1. Search by SKU: Lets visitors type a product code and find the product. WordPress cannot normally match a SKU, so this is genuinely useful for shops, wholesalers, and support teams. Matching products are placed at the very top of the results.
2. Price: Show the product price beside the result, including sale and price-range formats.
3. SKU: Show the product code in the result row.
4. Stock Status: Show In stock, Out of stock, or On backorder, so shoppers know before clicking.

Style Your Search Bar

Everything visual lives in the Style tab. The search bar is built as one single box, which is what lets you turn the same widget into a rounded Google-style pill, a bordered bar with a category dropdown, or a plain minimal field:

1. Search Box:
   Max width, background, border, border radius, shadow, padding, and the gap between the parts inside. A large radius makes the pill shape; removing the shadow and using a light grey background gives the flat minimal look.
2. Input:
   Typography, icon colour and size, and a Normal and Focus tab for the text colour plus the box background and border while the visitor is typing.
3. Submit Button:
   Padding, typography, border and radius, plus Normal and Hover tabs with text colour, gradient-capable background, icon colour, text shadow, box shadow, and a hover animation.
4. Filter Dropdowns:
   Text colour, background, and border for the category and date dropdowns.
5. Results:
   The dropdown background and shadow, result title and meta colours, the hover colour of a row, the group headings, the View All link with its divider, and the no-results message.
6. Popular Keywords:
   Title styling, chip spacing, chip typography, padding, border and radius, with Normal and Hover tabs for colour, background, and shadow.
7. Product Meta:
   Price typography and colour, SKU colour, and separate colours for In stock and Out of stock.

Because every part is styled separately, the same widget can sit quietly in a header or become the centrepiece of a landing page.

Save and Preview

1. Save your changes by clicking the Update / Publish button in the Elementor editor.
2. Preview the page and type a few letters into the bar to see the live results, then try the arrow keys and Enter.

Best Practices

1. Keep the dropdown short. Five to eight results is enough. A long list is harder to scan than a short one, and visitors can always open the full results page.
2. Group when you search several types. If the bar covers posts, pages, and products at once, turn on Group By Post Type so each one is visible.
3. Use Reveal Section instead of a dead end. An empty result is a lost visitor — show a contact block, popular products, or your help page.
4. Test on mobile. Check that the bar, the filters, and the dropdown all fit comfortably on a phone before publishing.

Troubleshooting

1. No results appear while typing. Check that you typed at least the number of characters set in Start Searching After, and that the content type you expect is selected in Search In. Also confirm the posts are published, since drafts are never searched.
2. A post you just published is missing. Results are briefly cached for speed and refresh automatically when content is saved. Reload the page and search again.
3. Popular Keywords is empty. That list is built from real searches on your site, so it stays empty until visitors have used the bar a few times.
4. Searching feels slow on a very large site. Set Search In Content to Title + Excerpt, or Title only, and raise Start Searching After to three characters.

Frequently Asked Questions

How is this different from the default WordPress search?

Default WordPress search reloads the page and lists results by date, so the newest post wins even when an older one matches the words exactly. Advanced Search shows results instantly as the visitor types and puts the closest title match first, with optional filters, thumbnails, and product details.

Can visitors search WooCommerce products by SKU?

Yes. Turn on Search by SKU in the WooCommerce section and typing a product code will find the product — something WordPress cannot do on its own. Matching products are shown at the top of the results, and you can display the price, SKU, and stock status on each row.

Does it work with Relevanssi?

Yes. If Relevanssi is installed and its index has been built, Advanced Search automatically hands the searching over to it, so you get its relevance, synonyms, and typo tolerance inside this widget’s design and filters. Nothing needs to be switched on — remove Relevanssi and the widget quietly goes back to its own search.

Can I use the keyboard instead of the mouse?

Yes. The up and down arrow keys move through the results, Enter opens the highlighted one, and Escape closes the dropdown. Screen readers are told how many results were found, so the widget is comfortable for keyboard and assistive-technology users.

Can I limit the search to one part of my site?

Yes. Use Search In to choose the content types, and the Query Builder to include only certain categories, tags, or authors. This is how you build a search bar that covers only your knowledge base or only one product range.

Related Documentation

• Nav Menu
• Off-Canvas
• Post List
• Tags Cloud

Conclusion

The Advanced Search Widget by Sky Addons for Elementor turns a plain search box into the fastest way around your site — instant answers, the right result first, and filters that let visitors narrow things down themselves. Drop it in your header or on a landing page, style it to match your brand, and watch people find what they came for. For further assistance, consult the Sky Addons support team or community forums. Happy searching!