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