Simple AJAX Product Search for WooCommerce

🚀 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:

1. cd blocks/simple-ajax-product-search-toggle
2. npm install
3. 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

1. Upload the plugin folder to /wp-content/plugins/simple-ajax-product-search-for-woocommerce/ — or install it via Plugins → Add New.
2. Activate the plugin through the ‘Plugins’ screen in WordPress.
3. Visit Simple AJAX Search in the WP Admin menu to configure settings.
4. Add the search toggle via:
   • Appearance → Menus
   • The shortcode
   • The Gutenberg block

1. 

   🔍 Search overlay (frontend) — Live AJAX results displayed in the overlay.

2. 

   🔍 Mobile search overlay (frontend) — Live AJAX results displayed in the overlay on mobile devices.

3. 

   ⚙️ Admin settings panel (backend) — Configure layout, behaviour, styling and Pro options.

4. 

   🧭 Search toggle in the navigation menu (frontend) — Seamless integration with any menu.

5. 

   🎛 Navigation menu setup (backend) — Add the toggle via Appearance → Menus.

6. 

   🧩 Gutenberg block (backend) — Insert the search toggle into templates.

1.0

• Initial release 🎉