🚀 Simple AJAX Product Search for WooCommerce delivers a fast, modern and intuitive product search experience that helps customers find items instantly without reloading the page.
As the user types, results appear immediately in a clean, full screen overlay. This provides a distraction free search experience that improves product discovery and increases conversions.
💡 Lightweight, responsive and compatible with major themes, this plugin integrates seamlessly with WooCommerce stores of any size.
✨ Free Features (✔ included)
✔ Instant AJAX product search
✔ Full screen responsive search overlay
✔ Smooth animations & modern design
✔ Add a search toggle to your navigation menu
✔ Dedicated Gutenberg block for easy placement
✔ Shortcode support:
[sapsfwc_button label=”Search Products”]
✔ Works with any WooCommerce compatible theme
✔ Fully responsive (mobile, tablet, desktop)
✔ Lightweight & fast — minimal impact on performance
🔥 Pro Features (🚀 upgrade available)
Unlock additional layout and display options with Simple AJAX Product Search for WooCommerce Pro:
📐 Advanced Layout Controls
– Load More results button
– Products Per Page
– Columns on Desktop
– Columns on Mobile
– Custom Container Width
– Adjustable Screen Height
🎨 Branding Enhancements
– Logo Image
– Max Logo Width
– Max Logo Height
These options let you fine-tune the search overlay and improve product visibility.
⌨ Shortcode
Use this shortcode anywhere you’d like to display the toggle button:
[sapsfwc_button label=”Search Products”]
🧩 Gutenberg Block
Insert the search toggle directly inside templates, headers or page layouts using the included block:
Simple AJAX Product Search Toggle
Source Code
The human-readable source for compiled block files is included in the plugin.
Block source (for files under blocks/…/build):
– blocks/simple-ajax-product-search-toggle/ (edit.js, save.js, index.js, editor.scss, style.scss)
Build Instructions
Requires Node.js. From within the block directory:
- cd blocks/simple-ajax-product-search-toggle
- npm install
- npm run build (outputs to /build)
Third-Party Libraries
- wp-color-picker-alpha
File:assets/js/wp-color-picker-alpha.min.js
Source: https://github.com/kallookoo/wp-color-picker-alpha
License: GPLv2 or later
Credits
Developed by TFB Global Ltd
Screenshots
🔍 Search overlay (frontend) — Live AJAX results displayed in the overlay.
🔍 Mobile search overlay (frontend) — Live AJAX results displayed in the overlay on mobile devices.
⚙️ Admin settings panel (backend) — Configure layout, behaviour, styling and Pro options.
🧭 Search toggle in the navigation menu (frontend) — Seamless integration with any menu.
🎛 Navigation menu setup (backend) — Add the toggle via Appearance → Menus.
🧩 Gutenberg block (backend) — Insert the search toggle into templates.