Product Search

Product Search is a realtime WooCommerce search module designed especially for headers and ecommerce navigation. Results update as the customer types, helping them reach products and relevant catalog pages quickly.

For installation and module activation help, see Installation & Setup.

Choose a trigger

Select one of three trigger types:

• Search Icon — the default, compact choice for most headers

• Icon + Label — adds a clear text label beside the icon

• Search Field — keeps the input visible on the page

The trigger type is responsive, so a full field on desktop can become an icon on a smaller screen.

Choose how search opens

• Dropdown opens the field and results near the trigger. A visible Search Field also uses the dropdown results experience.

• Off Canvas opens a side panel and works well when results need more space.

• Modal opens a focused search panel over the page.

The Search Field itself remains consistent across all three displays.

Realtime search

Results refresh after the customer enters the minimum number of characters. The module can search relevant WooCommerce information including:

• Product titles

• Product SKU and variation SKU

• Categories and tags

• Product attributes

• Brands when the store has a supported product brand taxonomy

• Product descriptions when enabled

Choose only the sources that are useful for your catalog. For example, SKU search is valuable for parts and wholesale stores, while attributes help customers find products by material, size, or other assigned terms.

Search results

Results can include products plus matching category and brand sections. Product rows can be Compact or Detailed, depending on how much information you want to show. Detailed results can include stock and a short description in addition to image, title, category, SKU, price, and rating.

Enable View All Results to send the full query to the normal search results page.

Responsive search

Search Trigger and Search Display can change by device. A common setup uses a visible field or dropdown on desktop and a modal or off-canvas panel on mobile. Adjust panel width and position for each breakpoint, then test at 390px to make sure the close control, field, and results are easy to use.

Design

The Design tab provides focused sections for the Search Trigger, Search Field, Search Icon, active results panel, Modal, Off Canvas, overlay, result items, View All link, and search states. Display-specific sections appear only when that display is selected.

Set the panel and field layout first. Then style product images, titles, metadata, prices, ratings, and state messages that are visible in your chosen result layout.

Builder preview and troubleshooting

Use Builder Search Preview to keep sample results visible while styling. Enter a preview query that matches products in your store.

If the module does not appear, enable Product Search under Divi Ecommerce → Modules and reload the Visual Builder. If preview results are empty, confirm WooCommerce is active and try a query that matches a published, search-visible product.