WP Manifestindependent plugin directory
manifest / ecommerce / custom-woo-search

Custom Woo Search

A lightweight plugin for Wordpress integrated with Elementor and Woocommerce to enhance the searchbar for products, category and tags

by Boreale Design · github.com/borealedesign/custom-woo-search · website

★ 0stars
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/borealedesign/custom-woo-search/archive/refs/heads/main.zip
Readme github.com/borealedesign/custom-woo-search ↗

Dependencies: WordPress 5.8+, Elementor, WooCommerce

Installation

  1. Upload the custom-woo-search folder to /wp-content/plugins/
  2. Activate the plugin from Plugins → Installed Plugins
  3. The "Smart Search WooCommerce" widget will be available in the Elementor editor under the WooCommerce Elements (or General) category.

Features

Elementor Widget

The widget adds a search bar with a fully customizable dropdown preview from the Elementor panel.

Content Settings

Option Description
Placeholder Text Text displayed in the empty input field
Min Characters Minimum number of characters before search starts (default: 3)
Max Dropdown Results How many results to show (max 10)
Show Thumbnail Display the product image in the dropdown
Show Price Display the formatted price (WooCommerce)
Open Link in New Tab Target blank on dropdown links

Search Filters

Filter Result
Product Name Search in published product titles
Category Search in product categories (product_cat)
Tag Search in product tags (product_tag)
All 3 Show mixed results, priority: Products → Categories → Tags
Type Badge Display the colored badge "Product / Category / Tag"

Style

Everything is customizable directly from Elementor:

  • Bar: width, height, padding, background/text/placeholder colors, typography, border, border radius, box shadow.
  • Button: icon color, background, hover, border radius; optionally hide it.
  • Dropdown: background, border, border radius, box shadow, text color, typography, hover, divider, price color, badge colors.

Keyboard Navigation

  • ↑ / ↓ — navigate through results
  • Enter — open the selected result (or execute the search)
  • Escape — close the dropdown

Full-text Search (Enter / Button)

Redirects to /?s=TERM&post_type=product for the standard WooCommerce results page.

Technical Notes

  • Search is asynchronous via wp_ajax with security nonces.
  • 280ms debounce on input to reduce server calls.
  • Compatible with Elementor editor (working widget preview).
  • CSS is fully scoped/overridable with {{WRAPPER}} selectors.