Support » Plugin: Themify - WooCommerce Product Filter » Placeholder for Search field

  • Hi, how would I put a placeholder text inside the product title search field. I would also like to put a magnifying glass icon as well. How do I do that with this plugin?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author themifyme

    (@themifyme)

    Hi,

    Unfortunately we don’t have such options, but please send us a link to your website, to the page where you added the product filter, so we can check if we can add the search icon and placeholder with CSS ( the placeholder may be possible to show until you hover on the field, not like an actual placeholder that shows until you type into the field ).

    Thread Starter geloreyes

    (@geloreyes)

    Thanks for the reply: Here is the link: http://toytimecollectibles.com.au/. It’s the upper right search field.

    Plugin Author themifyme

    (@themifyme)

    Hi,

    The placeholder text can be added, but since your Theme doesn’t have FontAwesome integrated the icon is not possible to add, to add the placeholder text / hide it on hover, please add this CSS to wp-admin > Appearance => Customize > Additional CSS:

    .wpf_autocomplete:before {
        content: 'Placeholder';
        position: absolute;
        left: 10px;
        top: 6px;
    }
    
    .wpf_autocomplete:hover:before {
        display:none;
    }

    PS. As explained earlier, the placeholder is not a real placeholder by any term, it is just a text added via CSS, so it can only be hidden if the field is hovered, can not be removed when user types into the field.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.