Overview
The Ajax Search module adds a powerful live search bar to your Divi pages. As visitors type, matching results appear instantly in a dropdown panel — no page reload required. It supports five visual skin styles, full control over which content types are searched, smart features like voice search, suggested searches, and recent search history, plus deep WooCommerce product integration with prices, ratings, and add-to-cart functionality.
Content Settings
Content
Title (Text Field)
An optional heading displayed above the search bar.
Search Configuration
Skin (Dropdown)
Choose the search bar layout style.
- Available options: Dropdown, Inline, Modal, Slide In, Floating
- Default: Dropdown
Placeholder Text (Text Field)
Enter the placeholder text shown inside the search input field before the visitor starts typing.
- Default: Search products, articles…
Minimum Characters (Slider)
Minimum number of characters a visitor must type before the search is triggered.
- Range: 1 to 5 characters
- Default: 3
Results Per Page (Slider)
Number of search results to display at a time in the results panel.
- Range: 1 to 20 results
- Default: 5
Order By (Dropdown)
Choose how search results are sorted.
- Available options: Date, Title, Random
- Default: Date
Search Posts (Toggle)
Include WordPress blog posts in search results.
- Default: On
Search Pages (Toggle)
Include WordPress pages in search results.
- Default: On
Search Products (Toggle)
Include WooCommerce products in search results.
- Default: Off
Search Projects (Toggle)
Include Divi portfolio projects in search results.
- Default: Off
Search in Title (Toggle)
Search within post and page titles.
- Default: On
Search in Content (Toggle)
Search within the body content of posts and pages.
- Default: On
Search in Excerpt (Toggle)
Search within post excerpts.
- Default: On
Search in Categories (Toggle)
Search within category names.
- Default: Off
Search in Tags (Toggle)
Search within tag names.
- Default: Off
Search in SKU (Toggle)
Search within WooCommerce product SKU numbers.
- Default: Off
Search in Meta (Toggle)
Search within custom meta fields.
- Default: Off
Display Settings
Result Layout (Dropdown)
Choose the layout style for how search results are displayed in the panel.
- Available options: List, Grid, Masonry, Carousel, Compact
- Default: List
Image Position (Dropdown)
Choose where the featured image appears within each search result.
- Available options: Left, Right, Top, Hidden
- Default: Left
Excerpt Length (Slider)
Maximum number of characters shown for the result excerpt text.
- Range: 20 to 200 characters
- Default: 100
No Results Message (Text Field)
The message shown to visitors when their search returns no results.
- Default: No results found. Try a different search.
Pagination Style (Dropdown)
Choose how additional results are loaded when there are more than one page of results.
- Available options: Numbered, Previous / Next, Load More, Infinite Scroll, None
- Default: Load More
Loader Style (Dropdown)
Choose the visual style of the loading animation shown while results are fetching.
- Available options: Spinner, Dots, Bar, Skeleton
- Default: Spinner
Show Title (Toggle)
Display the post or page title in each search result.
- Default: On
Show Excerpt (Toggle)
Display a short excerpt of content in each search result.
- Default: On
Show Image (Toggle)
Display the featured image in each search result.
- Default: On
Show Category (Toggle)
Display the post category as a badge in each search result.
- Default: On
Show Date (Toggle)
Display the post publication date in each search result.
- Default: Off
Show Author (Toggle)
Display the post author name in each search result.
- Default: Off
Show Search Icon (Toggle)
Display the magnifying glass search icon inside the search bar.
- Default: On
Show Clear Button (Toggle)
Display an × button inside the search bar that clears the current search query.
- Default: On
Show Loader (Toggle)
Display a loading animation while search results are being fetched.
- Default: On
Show Results Count (Toggle)
Display the total number of results found at the top of the results panel.
- Default: On
Show See All Link (Toggle)
Display a ‘See all results’ link at the bottom of the results panel linking to the full search results page.
- Default: On
Smart Search
Show Suggested Searches (Toggle)
Display pre-set suggested search terms in the dropdown panel before the visitor has typed anything.
- Default: On
Show Recent Searches (Toggle)
Display recent search terms in the dropdown panel.
- Default: On
Auto Correct (Toggle)
Automatically correct misspelled search terms.
- Default: Off
Voice Search (Toggle)
Display a microphone icon in the search bar that allows visitors to search by speaking.
- Default: On
Keyboard Shortcut (Toggle)
Allow visitors to open the search bar using a keyboard shortcut.
- Default: On
Category Filter (Toggle)
Display category filter tabs in the search panel so visitors can narrow results by content type.
- Default: On
Categories (Checkboxes)
Select which categories to show as filter tabs in the search panel.
- Available options: All, Products, Articles, Pages
- Default: All selected
Suggested Searches (Checkboxes)
Select which suggested search terms to display in the panel.
- Available options: Divi Modules, WooCommerce, Page Speed, Theme Builder, CSS Grid
- Default: All selected
Recent Searches (Text Field)
Enter the search terms to show as recent searches. Separate items with a pipe character (|).
- Default: page builder|theme options|contact form
Shortcut Badge Text (Text Field)
The text shown in the keyboard shortcut badge inside the search bar.
- Default: ⌘K
WooCommerce
Show Price (Toggle)
Display the product price in WooCommerce search results.
- Default: On
Show Rating (Toggle)
Display the star rating in WooCommerce product search results.
- Default: On
Show Sale Badge (Toggle)
Display a sale badge on discounted products in search results.
- Default: On
Show Add to Cart (Toggle)
Display an Add to Cart button directly in WooCommerce product search results.
- Default: Off
Design Settings
Search Input
Background (Color Picker)
Background color of the search input bar.
- Default: White (#ffffff)
Text Color (Color Picker)
Color of the text typed into the search field.
- Default: Dark gray (#374151)
Border Color (Color Picker)
Border color of the search input bar.
- Default: Light gray (#e2e8f0)
Border Radius (Slider)
How rounded the corners of the search input bar are.
- Range: 0 to 50 (in px or %)
- Default: 50px (pill shape)
Height (Slider)
Height of the search input bar.
- Range: 36 to 72 pixels
- Default: 48px
Font Size (Slider)
Font size of the text inside the search input.
- Range: 12 to 24 (in px, em, or rem)
- Default: 14px
Icon Color (Color Picker)
Color of the search icon inside the bar.
- Default: Gray (#9ca3af)
Focus Ring (Color Picker)
Color of the outline that appears around the search bar when a visitor clicks into it.
- Default: Purple (#7a5af8)
Results Container
Background (Color Picker)
Background color of the results dropdown panel.
- Default: White (#ffffff)
Border Radius (Slider)
How rounded the corners of the results dropdown panel are.
- Range: 0 to 24 pixels
- Default: 16px
Shadow Depth (Slider)
The blur radius of the drop shadow beneath the results panel. Higher values create a softer, deeper shadow.
- Range: 0 to 60 pixels
- Default: 12px
Animation (Dropdown)
The animation used when the results panel opens.
- Available options: Fade In, Slide Down, Scale Up, None
- Default: Fade In
Result Items
Item Background (Color Picker)
Background color of each individual search result row.
- Default: White (#ffffff)
Hover Background (Color Picker)
Background color of a search result row when hovered.
- Default: Light gray (#f9fafb)
Title Color (Color Picker)
Color of the title text in each search result.
- Default: Dark gray (#374151)
Title Size (Slider)
Font size of the title in each search result.
- Range: 12 to 22 (in px, em, or rem)
- Default: 14px
Excerpt Color (Color Picker)
Color of the excerpt text in each search result.
- Default: Medium gray (#6b7280)
Price Color (Color Picker)
Color of product price text in WooCommerce search results.
- Default: Purple (#7a5af8)
Badge Background (Color Picker)
Background color of the category badge shown on each result.
Badge Color (Color Picker)
Text color of the category badge shown on each result.
Image Radius (Slider)
How rounded the corners of the featured image in each result are.
- Range: 0 to 20 (in px or %)
- Default: 8px
Item Padding (Slider)
The internal padding (spacing inside the edges) of each result row.
- Range: 4 to 24 (in px or em)
- Default: 10px
Item Gap (Slider)
The vertical spacing between result rows.
- Range: 0 to 12 pixels
- Default: 0px
Hover Transform (Dropdown)
A visual transform effect applied to each result row when the visitor hovers over it.
- Available options: None, Lift (translateY), Scale Up, Glow Shadow
- Default: None
Title Text
Typography settings for the optional module title, including font family, size, weight, color, and letter spacing.
Module Styling
Standard Divi design options for the overall module wrapper: Background, Sizing, Spacing, Border, Box Shadow, Filters, Transform, Animation, Overflow, Transition, Position, Z-Index, Scroll, and Sticky.
Advanced Settings
- CSS ID & Classes — Add a custom CSS ID or class to the module.
- Custom CSS — Write custom CSS targeting specific parts of the module: Search Bar, Search Input, Category Dropdown, Dropdown Panel, Suggested Tag, Recent Item, and Title.
- HTML Attributes — Add custom HTML attributes to the module wrapper.
- Visibility — Show or hide this module on desktop, tablet, or phone.
- Overflow — Control whether content extending beyond the module is visible or clipped.
- Transition — Customize hover transition duration and style.
- Position — Control the module’s positioning (static, relative, absolute, or fixed).
- Z-Index — Set the stacking order relative to other page elements.
- Scroll Effects — Add Divi’s built-in scroll-triggered effects.
- Sticky — Make the module stick to the top of the viewport when scrolling.
- Conditions — Set display conditions for when this module should appear.
Tips & Best Practices
- Enable ‘Search Products’ and turn on all WooCommerce display options (Price, Rating, Sale Badge) to create a powerful instant product finder for your online store.
- For a minimal header search bar, choose the ‘Slide In’ or ‘Floating’ skin, set a large Border Radius (50px) on the input, and enable the Keyboard Shortcut so power users can press ⌘K to open it instantly.
- The Category Filter tabs work best when paired with clear content categories — for example, ‘Products’, ‘Articles’, and ‘Pages’ — giving visitors a quick way to scope their search before they start typing.
- Set the Pagination Style to ‘Infinite Scroll’ for content-heavy sites so visitors never need to click a button to see more results.