Search Dropdown

[danc1206Participant]

Hi,

How do I change the dropdown results so that they show the product name, product price and product sku?

thanks,

Dan

[Ernest MarcinkoKeymaster]

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 🙂

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[danc1206Participant]

Thank you that’s great. Is there a way to style the fields individually and is it possible to add a font to the options as we us Playfair display for all our headings?

Finally, is it possible to add a bit of margin before the title so that the information fits nicely in the dropdown box?

Thanks,

Dan

[Ernest MarcinkoKeymaster]

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;
}

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[danc1206Participant]

Thank you that’s greatly appreciated. Finally, is there a way to setup the search box for mobile so that when you click on the magnifying glass it the search box drop below the menu header at full width?

Thanks,

Dan

[Ernest MarcinkoKeymaster]

Hi Dan,

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

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[danc1206Participant]

Yes using that. So is there no way to make it appear below the compact box icon?

Thanks,

Dan

[Ernest MarcinkoKeymaster]

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.

Best,
Ernest Marcinko
If you like my products, don't forget to rate them on codecanyon :)

[Author]

Posts