Product Search (Divi)

Live WooCommerce search for Divi 5: a field, a search icon or an icon with a label — chosen per device — opening its results in a dropdown, a side panel or a window. It searches titles, SKUs, categories, tags, attributes and brands, highlights the match and remembers answers while the page is open. Try hoodie, leather or cotton.

1. An icon that opens a window

Trigger: icon · results in a modal at the top of the screen · detailed rows with the image, category, SKU, price, rating, stock and a short description · ↑ ↓ to move, Enter to open, Esc to close.

2. An icon with a label, opening a side panel

Trigger: icon and the label “Find products” · results slide in from the right, full width on phones · also searches tags and attributes, so “navy” or “XL” find the pieces that come in them.

3. A visible field with a dropdown

Trigger: a search field with results in a dropdown under it · on phones it becomes an icon that opens a window, so the header stays tidy.