Add text to the Search button in the header

Hi all,
I have a question. I want to add text to search icon in header. I tried several codes but it didn’t work. Can you help with this?

Hello,

After several manipulations with the code, I have prepared custom CSS that shows the text before the icon (the structure of HTML cannot allow to show it after the icon, unfortunately). Paste this code to the “Global Custom CSS” field in Theme Settings -> Custom CSS.

.whb-row  .searchform .searchsubmit span {
    font-size: 13px;
    margin-right: 5px;
}

.whb-row  .searchform .searchsubmit {
    width: 95px;
}

.whb-row .searchform .wd-search-cat {
    margin-right: 43px;
}

.whb-row .searchform.wd-with-cat input[type="text"] {
    padding-right: 275px;
}

.whb-row .searchform .searchsubmit:before {
    left: 80%;
}

https://gyazo.com/3cdf4e7a8822425eaf74fa670b5c1cec

If you use the search without product categories dropdown, then you should add the below custom code.

.whb-row  .searchform .searchsubmit span {
    font-size: 13px;
    margin-right: 5px;
}

.whb-row  .searchform.wd-style-with-bg .searchsubmit {
    width: 95px;
}

.whb-row .searchform .searchsubmit:before {
    left: 80%;
}

https://gyazo.com/8337e39c70daf3e96c027284eb62dc80

Choose one of these custom codes for your header search.

Kind Regards

Thank you for reply,
This code only works in Form and Dropdown option. It doesn’t work in Full Screen option. I want to do it while using icon in Full Screen option.
Can you help with this as well?

Hello,

Unfortunately, we can’t display the “Search” text for the “Fullscreen” search icon because the HTML structure for this search is different. We appreciate you taking the time to let us know what you’re looking for.

If there’s anything else we can do, please get in touch.

Cheers,
Kind Regards

[Author]

Posts