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:
[swift_commerce_search]Simply paste this shortcode into any page, post, or widget area where you want the search to appear.
Shortcode with Options:
Example Shortcodes:
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…” |
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
