The Ajax Search feature provides a powerful, real-time product search experience for your WooCommerce store. As customers type in the search box, products matching their query appear instantly—without page reloads. This creates a faster, more engaging shopping experience that helps customers find products quickly.
Key Capabilities
- Instant Search Results: Products appear as customers type, with no page refresh required
- Multiple Layout Options: Choose dropdown, full-width, or modal (Pro) display styles
- Smart Search: Search across product titles, descriptions, SKUs, categories, and more
- Rich Product Cards: Display images, prices, ratings, stock status, and sale badges
- Category Filtering: Allow customers to narrow results by product category
- Recent & Popular Searches: Show helpful suggestions based on search history
- Search Analytics (Pro): Track what customers are searching for and optimize your store
Getting Started #
Enabling Ajax Search
- Go to Swift Commerce → Ajax Search in your WordPress admin
- Toggle Enable Ajax Search to turn on the feature
- Configure your preferred settings across the available tabs
- Click Save to apply your changes
Once enabled, the Ajax Search will automatically replace your theme’s default WooCommerce product search (if enabled in settings).
Adding Ajax Search to Your Site #
There are two main ways to add the Ajax Search widget to your pages:
Method 1: Using the Shortcode
The easiest way to add Ajax Search anywhere on your site is using the shortcode.
Basic Shortcode:
Simply paste this shortcode into any page, post, or widget area where you want the search to appear.
Shortcode with Options:
| Attribute | Description | Example |
|---|---|---|
| placeholder | Custom placeholder text | placeholder=”Find your product…” |
category_filter | Show category dropdown filter | category_filter="true" |
| layout | Results display style: dropdown, fullwidth, or modal | layout=”fullwidth” |
max_results | Limit number of results shown | max_results="5" |
| class | Add custom CSS class for styling | class=”my-search-box” |
Example Shortcodes:
| Use Case | Shortcode |
|---|---|
| Basic search | [swift_commerce_search] |
| With custom placeholder | [swift_commerce_search placeholder="What are you looking for?"] |
| With category filter | [swift_commerce_search category_filter="true"] |
| Full-width results | [swift_commerce_search layout="fullwidth"] |
| Modal overlay (Pro) | [swift_commerce_search layout="modal"] |
| Limited results | [swift_commerce_search max_results="5"] |
| All options combined | [swift_commerce_search placeholder="Search..." category_filter="true" layout="dropdown" max_results="10"] |
Method 2: Using Elementor Widget (Pro)
If you’re using Elementor page builder, you can drag and drop the Ajax Search widget directly onto your page.
Steps:
- Open any page in Elementor editor
- Search for “Ajax Product Search” in the widgets panel
- Drag the widget to your desired location
- Configure settings in the Elementor panel
Elementor Widget Features:
| Setting | Description |
|---|---|
| Template | Choose from Default, Modern, Classic, or Custom styling |
| Placeholder Text | Customize the search input placeholder |
| Results Layout | Dropdown, Full Width, or Modal |
| Category Filter | Show/hide category dropdown |
| Display Options | Toggle images, prices, ratings, stock, etc. |
| Style Controls | Full control over colors, typography, spacing, and shadows |
Available Templates:
- Default: Clean minimalist design with subtle borders and light shadows
- Modern: Fully rounded corners, prominent shadows, and bold colors
- Classic: Traditional squared design with solid borders
- Custom: Full control over every styling aspect
General Tab #
Configure core search behavior and performance settings.
Search Behavior
| Setting | Description | Default |
|---|---|---|
| Minimum Characters | Number of characters required before search starts | 3 |
| Maximum Results | Maximum products to show in dropdown | 10 |
| Search Delay | Milliseconds to wait after typing before searching | 300ms |
Tips:
- Lower search delay feels more responsive but increases server load
- Set minimum characters to 2-3 to balance relevance with usability
- Limit maximum results to 8-12 for best visual experience
Performance & Caching
| Setting | Description | Default |
|---|---|---|
| Enable Search Cache | Cache search results for faster repeated searches | Off |
| Cache Duration | How long to keep results in cache | 1 hour |
Enable caching on high-traffic stores to reduce database queries.
Search Tab #
Configure which product fields are searched and set up filtering options.
Search Fields (Pro)
Select which product data to include when searching:
| Field | Description |
|---|---|
| Product Title | Search in product names |
| Product Content | Search in full product description |
| Short Description | Search in product excerpt |
| SKU | Search by product SKU number |
| Categories | Include category names in search |
| Tags | Include product tags in search |
| Attributes | Search in product attributes (color, size, etc.) |
Stock Settings
| Setting | Description | Default |
|---|---|---|
| Include Out of Stock | Show out-of-stock products in results | On |
Category Exclusions
Exclude specific product categories from appearing in search results. Useful for hiding:
- Private or internal categories
- Wholesale-only products
- Discontinued product categories
Customization Tab #
The Customization tab consolidates all visual settings including templates, display options, colors, and styling.
Templates
Choose how search results are displayed:
| Template | Description |
|---|---|
| Dropdown | Results appear directly below the search input |
| Full Width | Results span the full page width |
| Modal (Pro) | Results appear in a centered overlay with blur background |
Result Columns (Pro)
Display search results in single or double column layout.
Width Control
| Setting | Description | Default |
|---|---|---|
| Full Width | Expand search to fill container | Off |
| Maximum Width | Maximum width in pixels (when not full width) | 500px |
Product Information (Pro)
Toggle which product details appear in search results:
| Option | Description |
|---|---|
| Product Image | Show product thumbnail |
| Product Price | Display current price (with sale price if applicable) |
| Category Name | Show product category below title |
| SKU | Display product SKU number |
| Product Rating | Show star rating and review count |
| Stock Status | Display in stock / out of stock label |
| Sale Badge | Show “Sale” badge for discounted products |
Description Settings (Pro)
| Setting | Description | Default |
|---|---|---|
| Show Description | Display a short product excerpt | Off |
| Description Length | Maximum characters to display | 50 |
Colors
Customize the color scheme to match your brand:
| Color | Description | Default |
|---|---|---|
| Primary Color | Main accent color (buttons, highlights) | #2271b1 |
| Secondary Color | Secondary accent color | #135e96 |
| Text Color | Main text color | #333333 |
| Background Color | Results container background | #ffffff |
Input Style
| Setting | Description | Default |
|---|---|---|
| Input Height | Height of search input field | 44px |
| Input Font Size | Font size in the search input | 14px |
| Border Color | Input border color | #e0e0e0 |
| Border Width | Input border thickness | 1px |
| Focus Border Color | Border color when input is focused | #2271b1 |
Border & Shadow
| Setting | Description | Default |
|---|---|---|
| Border Radius | Corner roundness for input and results | 8px |
| Box Shadow | Shadow style: None, Light, Medium, Heavy | Light |
Text Labels
Customize the text shown to users:
| Setting | Description | Default |
|---|---|---|
| Placeholder | Text shown in empty search field | “Search products…” |
| No Results | Message when no products found | “No products found” |
| View All | Link text to see all results | “View all results” |
| Searching | Text shown while loading results | “Searching…” |
Shortcode Tab #
The Shortcode tab provides a convenient shortcode generator and examples.
Shortcode Generator
Build a custom shortcode with your preferred options:
- Configure options:
- Placeholder text
- Enable/disable category filter
- Select layout (dropdown, fullwidth, modal)
- Set maximum results
- Add custom CSS class
- Copy the generated shortcode
- Paste into any page, post, or widget
The shortcode inherits your global style settings but can override specific options as needed.
Analytics Tab (Pro) #
Track and analyze customer search behavior to optimize your store.
Overview Metrics
| Metric | Description |
|---|---|
| Total Searches | Number of searches performed |
| Unique Searches | Number of distinct search terms |
| Searches with Results | Searches that returned products |
| Searches without Results | Searches with no matching products |
| Click-Through Rate | Percentage of searches that led to product clicks |
| Average Results | Average number of products shown per search |
Top Search Terms
View the most frequently searched terms in your store, including:
- Search term
- Number of searches
- Number of clicks
- Click-through rate (CTR)
Use this data to:
- Identify popular products to promote
- Discover product naming opportunities
- Improve product titles and descriptions
No-Result Searches
See which searches returned zero results. This helps you:
- Identify missing products customers want
- Add synonyms for common alternate spellings
- Improve product discoverability
Data Actions
| Action | Description |
|---|---|
| Refresh | Update analytics data |
| Export | Download data as CSV or JSON |
| Clear | Delete all analytics data |
Time Period Filter
View analytics for:
- Last 7 days
- Last 30 days
- Last 90 days
- All time
How Ajax Search Works #
Search Flow
- Customer Types: As the customer types in the search box, the search waits for the configured delay
- Query Sent: Once minimum characters are reached and delay passes, a search request is sent
- Products Found: The server searches enabled fields (title, SKU, description, etc.)
- Results Displayed: Matching products appear instantly in the dropdown/modal
- Customer Clicks: Customer can click a product to visit its page, or “View All” for full results
Result Display
Each product result can show (based on your settings):
- Product image thumbnail
- Product title (linked to product page)
- Category name
- Price (with sale price if applicable)
- Star rating
- Stock status
- Sale badge
Category Filter
When enabled, a dropdown appears next to the search input allowing customers to:
- Search all categories (default)
- Filter results to a specific category
- Narrow down results for faster product discovery
Replacing Default Search #
When Replace Default Search is enabled:
- Your theme’s WooCommerce product search form is automatically replaced
- The Ajax Search appears wherever your theme displays search
- No additional shortcodes needed for header/sidebar search
To keep your theme’s search alongside Ajax Search, disable this option and use shortcodes or the Elementor widget for placement.
Best Practices #
For Performance
- Enable caching on high-traffic stores
- Set minimum characters to 3 to reduce unnecessary searches
- Limit search fields to relevant data (title, SKU, excerpt)
- Use search delay of 300-400ms for balance of speed and server load
For User Experience
- Show product images for visual recognition
- Display prices so customers know cost immediately
- Include stock status to avoid frustration with unavailable items
- Use descriptive placeholder text like “Search for shirts, shoes…”
For Conversion
- Enable Sale Badge to highlight discounts
- Show ratings to build trust
- Use Full Width or Modal layout for prominent search on landing pages
- Review Analytics regularly to identify improvement opportunities
Troubleshooting #
Search Not Working
- Ensure Ajax Search is enabled in settings
- Check that you’ve typed at least the minimum characters
- Verify your store has published products
- Clear any caching plugins and try again
Results Not Appearing
- Check browser console for JavaScript errors
- Ensure WooCommerce REST API is not blocked
- Verify products aren’t excluded by category settings
- Confirm products aren’t out of stock (if excluded)
Styling Issues
- If colors don’t apply, check for theme CSS conflicts
- Use the Custom CSS option in Customization tab
- Add !important to override stubborn theme styles
- Use the Elementor widget for more granular control
Feature Comparison #
| Feature | Free | Pro |
|---|---|---|
| Instant Ajax Search | ✓ | ✓ |
| Dropdown Layout | ✓ | ✓ |
| Full Width Layout | ✓ | ✓ |
| Replace Default Search | ✓ | ✓ |
| Show Product Image | ✓ | ✓ |
| Show Product Price | ✓ | ✓ |
| Show Stock Status | ✓ | ✓ |
| Color Customization | ✓ | ✓ |
| Shortcode Support | ✓ | ✓ |
| Search Caching | ✓ | ✓ |
| Modal Layout | — | ✓ |
| Search Field Selection | — | ✓ |
| Multi-Column Results | — | ✓ |
| Product Description in Results | — | ✓ |
| Elementor Widget | — | ✓ |
| Search Analytics | — | ✓ |
| Export Analytics Data | — | ✓ |
| Synonym Support | — | ✓ |
| Typo Tolerance | — | ✓ |
| Remove Credits | — | ✓ |
