Dprime Ajax Search v1.5.0 WooCommerce

Live AJAX product search for WooCommerce. Results appear as customers type, no page reload. Keyboard navigable with thumbnail, price, and SKU.

Installation Shortcode Settings CSS classes FAQ Override classes

Installation

Install and activate WooCommerce first.
Download Dprime Ajax Search from my.dprime.au and install via Plugins > Add New > Upload Plugin.
Activate. Configure defaults in Dprime > Ajax Search > Settings.
Drop [dprime_ajax_search] anywhere on your site.

Shortcode

With no attributes, uses your saved Settings values:

[dprime_ajax_search]

Override per instance:

[dprime_ajax_search placeholder="Search products..." limit="6" show_sku="yes" button_icon="yes"]

Attribute	Values	Default
`placeholder`	any text	Settings value
`button_text`	any text	Settings value
`button_icon`	yes / no	Settings value
`limit`	1 to 12	Settings value
`show_image`	yes / no	Settings value
`show_price`	yes / no	Settings value
`show_sku`	yes / no	Settings value

Settings

The Settings tab sets the default values used by every shortcode instance that does not provide its own attributes. Changes here do not affect instances that override an attribute explicitly.

CSS classes

Class	Element
`.vh-ajax-search`	Outermost wrapper
`.vh-ajax-search-form`	The form element
`.vh-ajax-search-input`	The text input
`.search-submit`	Submit button
`.search-submit--icon`	Added when icon mode is on
`.is-open`	Added to wrapper when dropdown is visible
`.vh-ajax-search-panel`	Floating results dropdown
`.vh-ajax-search-item`	Single result row
`.is-active`	Keyboard-highlighted result
`.vh-ajax-search-thumb`	Product image in result
`.vh-ajax-search-title`	Product name in result
`.vh-ajax-search-sku`	SKU beneath product name
`.vh-ajax-search-price`	Price in result
`.vh-ajax-search-view-all`	View all results link
`.vh-ajax-search-loading`	Loading state
`.vh-ajax-search-empty`	No results state

FAQ

Can I have multiple search bars on one page?

Yes. Each shortcode instance is independent. They can have different settings via shortcode attributes and they do not interfere with each other.

The search returns no results for a product I know exists.

The plugin searches published products only. Check the product is Published in WooCommerce, not in Draft or Private. Also check the product has a name or SKU that matches what was typed.

Does it work if WooCommerce is deactivated?

The shortcode silently returns nothing rather than breaking the page. Your page layout stays intact.

Override classes (admin UI)

.dp-as-page              { /* outer page wrapper */ }
/* Frontend shortcode */
.vh-ajax-search           { /* wrapper */ }
.vh-ajax-search-input     { }
.vh-ajax-search-panel     { }
.vh-ajax-search-item      { }
.vh-ajax-search-price     { }