Search Dropdown

Hi,

You can use the advanced title & description field features for that. For example, if you want to display the price within the title, you could use this as the advanced title field:

[{_price} - ]{titlefield}

..or for example displaying the SKU and price as well as the product description, within the advanced content field:

[SKU: <strong>{_sku}</strong>]<br>
[Price: {_price}]<br>
{descriptionfield}

You should checked the linked documentation as well, there are many more examples 🙂

Hi Dan,

Sure, you can set the font under the Theme Options -> Typography panel, or you can simply use this custom CSS if you prefer that:

.asp_r h3,
.asp_r h3 a {
    font-family: "Playfair Display" !important;
}

The easiest way of styling those items is probably by wrapping them around custom CSS classes, like for example:

<span class='asp_res_sku'>[SKU: <strong>{_sku}</strong>]</span><br>
<span class='asp_res_price'>[Price: {_price}]</span><br>
{descriptionfield}

..then using a custom css like:

.asp_res_sku {
    color: red !important;
}

.asp_res_price {
    color: blue !important;
}

I am not completely sure about the margin, as it depends on the layout, and where exactly do you want it, but I can guess, maybe something like this:

.asp_r h3 {
   margin-top: 6px !important;
}

..or maybe:

.asp_r .item .asp_content {
   margin-top: 6px !important;
}

Hi Dan,

There is a compact search box feature, it is not exactly the same, but it is as close as it gets.

Hi Dan,

Unfortunately not without custom code. Some themes feature this layout, so there is a separate search icon, and a container with the actual search bar – those work in most cases, as the plugin automatically replaces the search form, but since the icon is separate, it stays where it is.