In this guide
Explore the steps and reference sections below.
On this page
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
Appearance 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
Additional Search controls (Pro)
Search Suggestions can show a customer’s recent searches when the field receives focus (choose 1–10 recent terms) and popular searches based on collected analytics. Advanced Search adds typo tolerance, synonym groups of equivalent words, exact-match boosting, and title-match boosting. Field Weights set relative relevance for title, description, short description, and SKU. Higher weight gives that field more influence. Test a product name, a misspelling, a synonym, and an SKU to tune these controls.
Analytics collection and interpretation
Search analytics are controlled separately in Analytics → Analytics collection. Turn on collection, then choose whether to track searches, result clicks, or both. Popular-search suggestions need search data to be useful. The report shows top terms, zero-result queries, most-clicked products, and activity over time; an empty report may mean collection is off or that no events occurred in the selected period. Do not describe an empty report as zero customer interest until the collection
state is checked.
Storefront test
- Place search on the intended page with the shortcode or Pro Elementor widget, then type several terms and confirm results appear without a page reload.
- Check excluded categories and out-of-stock behavior; compare exact title, SKU, typo, and synonym matches.
- Test keyboard selection and mobile width, and confirm the Appearance preview matches the live search field.
Shortcode tab and compact Search controls
The shortcode box is now in its own Shortcode tab immediately after Search, not in Appearance. Copy [swift_commerce_search] into a WordPress Shortcode block or supported widget area. It uses saved General, Search and Appearance settings. This shortcode searches WooCommerce products; custom post type support is not included.
Configure synonym groups (Pro)
- Go to Search → Advanced Search and turn on Enable Synonyms.
- Under the switch, click Add Group. Enter at least two equivalent terms, one per field—for example sneakers and trainers.
- Add another group for a different product meaning. Collapse completed groups to keep the list compact.
- Save Changes and search for each term on the storefront. Check stock visibility and category exclusions if the expected product is filtered out.
A synonym group is for alternative words customers use for the same product meaning, not a list of loosely related products. The group summary shows its terms and term count. Deleting a word or group changes search expansion after saving.
Test typo tolerance (Pro)
Enable Typo Tolerance in the same Advanced Search section and save. Test a small misspelling of an actual searchable product word, such as block for a product containing Black, then compare the correctly spelled query. Approximate matches still follow the search’s enabled fields, stock rules and exclusions. Keep exact/title boosts where literal relevance should rank first. This is spelling tolerance, not a semantic search service.