Search Dropdown

This topic contains 7 replies, has 2 voices, and was last updated by Ernest Marcinko Ernest Marcinko 3 years, 2 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #23642
    danc1206
    danc1206
    Participant

    Hi,

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

    thanks,

    Dan

    #23646
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #23647
    danc1206
    danc1206
    Participant

    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

    #23669
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #23677
    danc1206
    danc1206
    Participant

    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

    #23681
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


    #23682
    danc1206
    danc1206
    Participant

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

    Thanks,

    Dan

    #23685
    Ernest Marcinko
    Ernest Marcinko
    Keymaster

    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 :)


Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.