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