FuseCommerce - Instant Product Search (Pro)
Version 1.0.0
Introduction
Support: SakuraLeaf
Product: FuseCommerce Instant Product Search for WooCommerce
Note! This documentation applies to both the free and pro plugin versions.
This documentation will help you install, configure, and customize the FuseCommerce Pro plugin. Please read through the documentation carefully to understand how this plugin works and how to get the most out of its features.
FuseCommerce transforms your WooCommerce store with instant, client-side product search powered by fuzzy matching algorithms. Your customers will enjoy lightning-fast search results as they type, with zero server delays.
FuseCommerce Pro is optimized for large catalogs and performs smoothly on stores with up to 10,000 products, delivering instant client-side search results without slowing down your site.
Key Benefits
- Lightning-Fast Search: All searches happen client-side with zero server delays
- Fuzzy Matching: Find products even with typos or partial matches
- Advanced Filtering: Filter by categories, tags, attributes, and price ranges
- Customizable: Control search behavior via shortcode parameters
- Optimized Performance: Efficient indexing system handles large product catalogs
- Developer Friendly: Hooks and filters for customization
Requirements
In order to work properly, the plugin requires the following:
- WordPress 6.4 or higher
- PHP 8.2 or higher
- WooCommerce (active and configured)
Installation
Follow these steps to install and activate the FuseCommerce Pro plugin:
- Deactivate the free version: If you have the free version of FuseCommerce installed, deactivate it first
- Log in to WordPress Admin: Navigate to Plugins > Add New > Upload Plugin
- Upload the ZIP file: Click "Choose File" and select the fusecommerce-pro.zip file
- Install the plugin: Click "Install Now" and wait for the installation to complete
- Activate the plugin: Click the "Activate" button
- Navigate to settings: Go to Admin > FuseCommerce to configure the plugin
- Start indexing: Click "Start Indexing" to create your product search index (see Product Indexing section)
Note! After activation, you must index your products before the search functionality will work. See the Product Indexing section for details.
Main Settings
Once you have installed and activated the plugin, navigate to Admin > FuseCommerce to access the settings page.
The settings page is organized into four main tabs:
- Indexing: Manage product indexing, start/resume/reset the index, and monitor progress
- Filters: Configure which filters appear on the frontend and their display order
- Shortcodes: View shortcode documentation and available parameters
- Settings: Configure plugin options like quick view, caching, and currency settings
Product Indexing
Product indexing is the process of creating optimized JSON files that contain all your WooCommerce product data. This index is what makes client-side search possible.
Understanding the Indexing Process
FuseCommerce uses a two-phase indexing process designed to handle large stores:
- Phase 1: Taxonomies - Indexes categories, product attributes, and tags with their hierarchical relationships
- Phase 2: Products - Processes products in batches (30 products per batch by default) to prevent memory issues and timeouts
The indexing system includes intelligent time management that uses only 70% of your PHP max_execution_time, ensuring the process can be resumed if needed.
Starting Initial Indexing
To index your products for the first time:
- Navigate to Admin > FuseCommerce > Indexing tab
- Click the "Start Indexing" button
- Monitor the progress bar as products are indexed
- Wait for the completion message
Note! For large catalogs (~1000 products), indexing may take several minutes. The process runs in the background and resumes itself when it reaches max exec time.
Index Files Generated
The indexing process creates the following JSON files in your WordPress uploads directory:
Generated files:
- products.json - Contains all indexed products with names, descriptions, prices, images, and variations
- categories.json - Category hierarchy with parent/child relationships and product counts
- attributes.json - Product attributes and their terms
- tags.json - Product tags with usage counts
Filter Configuration
The Filters tab allows you to control which filters appear in your frontend search interface and in what order.
Available Filter Types
FuseCommerce supports the following filter types:
- Free Text Search: Search box with fuzzy matching
- Categories: Hierarchical category filter with parent/child relationships
- Product Attributes: Custom WooCommerce attributes (color, size, etc.)
- Tags: Product tags for additional classification
- Price Range: Slider to filter by minimum and maximum price
Managing Filters
Navigate to Admin > FuseCommerce > Filters tab to configure your filters:
- Drag-and-drop to reorder: Click and drag filters to change their display order on the frontend
- Toggle visibility: Use checkboxes to show or hide specific filters
- Select attributes: Choose which product attributes should be available for filtering
- Refresh from index: Click "Refresh" to update filter options based on your latest product data
Category Hierarchy
Category filters automatically maintain parent/child relationships. When a parent category is selected, child categories are displayed for further refinement. Each category shows the number of products it contains.
Tip! Limit the number of visible filters to avoid overwhelming users. Focus on the most relevant filters for your product catalog.
Shortcode Usage & Configuration
The FuseCommerce search interface is added to your pages using simple shortcodes.
Main shortcode [fusecommerce]
Add the search interface to any page, post, or widget area:
[fusecommerce]
Available Attributes
Customize the search behavior by adding parameters to the shortcode. Here's an example with all available parameters:
[fusecommerce
fuse_threshold="0.3"
fuse_name_weight="2"
fuse_short_description_weight="1"
initial_products_load_no="12"
load_more_products_no="12"
free_search_debounce_delay="1000"
tag_limit="10"
category_limit="5"
]
Parameter Descriptions
Usage Examples
Basic Shop Page
[fusecommerce initial_products_load_no="24"]
Shows 24 products initially, perfect for a main shop page.
Strict Matching
[fusecommerce fuse_threshold="0.2"]
Requires closer matches, ideal for technical products with specific names.
Mobile-Optimized
[fusecommerce initial_products_load_no="8" load_more_products_no="8"]
Loads fewer products at a time for better mobile performance.
Fast Search
[fusecommerce free_search_debounce_delay="300"]
Triggers search faster for a more responsive feel (good for small catalogs).
Cart icon shortcode [fusecommerce_cart_icon]
The [fusecommerce_cart_icon] shortcode displays the cart icon, which listens to cart updates. You can also place it in the top menu by going to Appearance > Menu > Custom Link and pasting the shortcode as a label.
Note! You can use multiple instances of the shortcode on different pages with different parameters to customize the search experience for different contexts.
Frontend Search Interface
The FuseCommerce frontend interface provides a powerful, user-friendly search experience for your customers.
Search Bar
The free text search bar features:
- Fuzzy matching: Finds products even with typos or partial matches
- Real-time results: Updates product display as users type
- Debounce delay: Prevents excessive filtering by waiting until the user stops typing
- Smart ranking: Orders results by relevance based on name and description weights
Filter Panel
Multiple filters can be applied simultaneously:
- Categories: Collapsible hierarchy showing parent and child categories with product counts
- Attributes: Dynamically generated from your product attributes (color, size, material, etc.)
- Tags: Product tags with configurable display limits
- Price Range: Interactive slider to filter by minimum and maximum price
Product Display
Products are displayed in a responsive grid layout featuring:
- Product image: Medium-sized thumbnail (configurable in settings)
- Product name: Clickable link to product page
- Price: Formatted with your currency settings, shows price range for variable products
- "Add to Cart" button: Quick add to cart without leaving the search page
- "Quick View" button: Opens modal with product details (if enabled)
Pagination
The search interface uses load-more pagination:
- Initial load count determined by initial_products_load_no parameter
- "Load More" button appears when there are additional products
- Product count display shows total matching products
Mobile Responsive Design
The interface automatically adapts to mobile devices:
- Filters collapse into a slide-out panel
- Product grid adjusts to single or two-column layout
- Touch-optimized controls for sliders and selections
Tip! All searches and filtering happen instantly in the browser without any server requests, providing a fast, smooth experience for your customers.
Quick View Feature
The Quick View feature allows customers to preview product details in a modal popup without leaving the search page.
Enabling Quick View
To enable the Quick View feature:
- Navigate to Admin > FuseCommerce > Settings tab
- Find the "Quick View" option
- Check the box to enable Quick View
- Save your settings
Using Quick View
When Quick View is enabled, each product in the search results displays a "Quick View" button. Clicking this button opens a modal that displays:
- Product image gallery: Main image with thumbnails for additional images
- Product name and price: Clear display of product information
- Short description: Brief product overview
- Variation selector: Dropdown menus or swatches for variable products
- Quantity selector: Adjust quantity before adding to cart
- Add to cart button: Add directly to cart from the modal
Variable Products
For products with variations (different sizes, colors, etc.), the Quick View modal provides:
- Variation dropdowns: Select attributes to view specific variation
- Dynamic pricing: Price updates automatically based on selected variation
- Stock status: Shows availability for each variation
- Variation images: Images update when variations are selected
Note! Quick View adds to cart via AJAX, keeping customers on the search page and maintaining their filters and search state.
Plugin Settings
Navigate to Admin > FuseCommerce > Settings tab to configure general plugin options.
Available Options
Cache Settings
Control client-side caching of product index:
- Enable client-side caching: Store product index in browser localStorage/IndexedDB for faster subsequent loads
- Cache duration: The local index will update if a new version has been generated in the backend.
Tip! Client-side caching significantly improves load times for returning visitors, especially with large product catalogs.
Quick View
- Enable/disable quick view modal: Toggle the Quick View feature on or off globally
Currency Settings
Customize how prices are displayed:
- Currency symbol: Symbol to display (inherits from WooCommerce by default)
- Position: Before or after the price amount
- Decimal separator: Character used for decimals (. or ,)
- Thousands separator: Character used for thousands (,, ., or space)
Display Options
- Product image size: Choose which WordPress image size to use (medium, large)
Performance & Optimization
FuseCommerce is designed for exceptional performance, even with large product catalogs.
How Client-Side Search Works
Understanding the technology behind FuseCommerce:
- Index loaded once: When a page with the shortcode loads, the product index (JSON file) is fetched from your server
- Browser-side processing: The Fuse.js library performs all search and filtering operations in the visitor's browser
- Zero server requests: After the initial index load, no additional server requests are needed for search or filtering
- Fuzzy matching algorithm: Fuse.js uses sophisticated algorithms to find relevant matches even with typos
Index File Caching
Multiple layers of caching ensure optimal performance:
- Browser caching: JSON files are cached by the browser according to HTTP headers
- localStorage/IndexedDB caching: Optional client-side storage keeps index data for faster subsequent visits
- Automatic cache invalidation: Cache is automatically cleared when you reindex products
Large Catalog Handling
FuseCommerce can handle stores with thousands of products:
- Batch processing: Indexing processes products in batches to prevent memory exhaustion
- Streaming JSON write: Products are written to disk incrementally, reducing memory usage
- Time-based execution: Indexing monitors PHP execution time and pauses before timeout
- Resume capability: Large catalogues (~10,000 products) are indexed in the background
Best Practices for Optimal Performance
- Optimize product images: Use appropriately sized images to reduce page weight
- Set appropriate initial load counts: Lower counts (8-12) are better for mobile, higher counts (20-30) work well on desktop
- Enable client-side caching: Improve load times for returning visitors
- Monitor index file sizes: Very large catalogs may benefit from removing unnecessary product data
Note! Client-side search means your server resources are freed up for other tasks. Even during high traffic, search performance remains consistent because processing happens on the client side.
Automatic Change Detection
FuseCommerce automatically tracks changes to your products and can trigger reindexing as needed.
Product Change Tracking
The plugin hooks into WooCommerce product save events to detect:
- Product additions: When new products are published
- Product updates: When existing products are modified (name, price, description, etc.)
- Product deletions: When products are moved to trash or permanently deleted
- Variation changes: When product variations are added, updated, or removed
Changes are stored and tracked until the next indexing operation processes them.
Auto-Reindexing
Set up automatic reindexing to keep your search index current:
- Navigate to Admin > FuseCommerce > Settings tab
- Find the "Auto-Reindex" section
- Enable automatic reindexing
- Choose a schedule frequency
Manual Reindexing
You can always trigger manual reindexing:
- Go to the Indexing tab
- Click "Start Indexing" to reindex all products
- Or click "Resume" if a previous indexing was interrupted
Developer Resources
FuseCommerce provides hooks and filters for developers to customize and extend the plugin's functionality.
Find out more about how to extend the plugin
Available PHP filters
- fusecommerce_filter_render_free_search
- fusecommerce_filter_render_categories
- fusecommerce_filter_render_all_attributes
- fusecommerce_filter_render_price_range
- fusecommerce_filter_attribute_group_title
Available JS filters
- overrideRenderProductCard
REST API Endpoints
FuseCommerce registers REST API endpoints for programmatic access:
External Resources
- Fuse.js Documentation: https://fusejs.io - Learn about fuzzy search options and configuration
- localForage Documentation: - localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API
- WooCommerce Developer Docs: https://woocommerce.com/developers - WooCommerce hooks and filters reference
- WordPress Developer Resources: https://developer.wordpress.org - WordPress coding standards and best practices
Note! Always test customizations on a staging site before deploying to production. Custom code should follow WordPress coding standards and be properly escaped for security.
Changelog
Version 1.0.0 - Monday Dec 1, 2025
- Initial release of FuseCommerce Pro
- Client-side fuzzy search powered by Fuse.js v7.1.0
- Two-phase product indexing system with batch processing
- Advanced filtering: categories, tags, attributes, and price range
- Customizable shortcode with 8+ parameters
- Admin settings panel with 4 tabs (Indexing, Filters, Shortcodes, Settings)
- Automatic and manual indexing options
- Resume capability for interrupted indexing processes
- Quick View modal for products with AJAX add to cart
- Full support for variable products and variations
- Responsive frontend interface with mobile optimization
- Product change detection and tracking system
- Cron-based automatic reindexing with configurable schedules
- Resume capability for large catalogs (10,000+ products)
- Client-side caching options for improved performance
- Multi-currency support with customizable formatting
- REST API endpoints for programmatic access
- Developer hooks and filters for customization
- Drag-and-drop filter configuration interface
- Hierarchical category filtering with parent/child relationships
- Time-based execution management to prevent timeouts
- Memory-optimized streaming for large catalog indexing
Third-Party Libraries
FuseCommerce includes the following open-source libraries, used in compliance with their respective licenses:
- Fuse.js v7.1.0 - Lightweight fuzzy-search library
License: Apache License 2.0
Website: https://fusejs.io
Copyright: Kiro Risk - Bootstrap v5.3.8 - Frontend component library
License: MIT License
Website: https://getbootstrap.com
Copyright: The Bootstrap Authors - Toastr v2.1.4 - Notification library
License: MIT License
Website: https://github.com/CodeSeven/toastr
Copyright: John Papa, Hans Fj�llemark, and Tim Ferrell - localForage 1.10.0 - Storage library
License: (c) 2013-2017 Mozilla, Apache License 2.0
Website: https://localforage.github.io/localForage - localForage Documentation: - localForage improves the offline experience of your web app by using asynchronous storage (IndexedDB or WebSQL) with a simple, localStorage-like API
Note! Future updates will be documented here. Check this section regularly for new features, improvements, and bug fixes.