[Resolved] Split: Customizing the search bar

[Author]

Posts

[haychP]

Thank you so much for the help!

another concern how can i make a search bar like this?

hidden link

the one with the search by condition field? and magnifying glass icon?

hidden link

and how can i change the name of the search bar?

instead of Conditions it should be

"search by homeopathic remedy" ? thanks!

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

There is no built-in feature available to include a search icon in the view's text search field, so it will require some custom code:

1. In the view's "Custom JS" section, you can include the following script to insert the search icon in the field:

jQuery( document ).ready(function() {
	jQuery('<button type="button" class="et_pb_menu__icon et_pb_menu__search-button"></button>').insertAfter('.wpv-filter-form input[name="wpv_post_search"]');
});

2. And to style the search icons show inside the text field, you can include some CSS code in the view's "Custom CSS" field:

.wpv-filter-form .et_pb_menu__icon.et_pb_menu__search-button {
float: right;
position: relative;
margin-top: -58px;
margin-right: -2px;	
}

.wpv-filter-form input[name="wpv_post_search"] {
float: left;
width: 100%;
padding-right: 35px	
}

Screenshot of the Custom CSS and JS fields in the view: hidden link

As for the text "Search by condition" it can be changed through the "Placeholder" field in the search block's settings.
( screenshot: hidden link )

Note: The custom code examples from our forum are shared to get you started in the right direction. You're welcome to adjust them as needed and for more personalized customization assistance, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar