Return to previous page

Replace search icon with Search Box - by foxnick

This topic has 18 replies, 3 voices, and was last updated 4 years, 7 months ago ago by Olga Barlow

foxnick

Participant

April 1, 2020 at 23:38

How do I replace the search icon with a search box and button instead?

Lot of our customers complain about extra steps to hover over search icon and open the search box and then type

thx.

nick

Please, contact administrator
for this information.

#232386 Copied Theme version: 5.0.1 WooCommerce version: 5.3

17 Answers

Rose Tyler

Support staff

April 2, 2020 at 08:30

Hello,

There is no such possibility by default. It requests additional customization in files, which is outside the scope of our support.
If you want to edit header type 15 you can customize the wp-content/themes/royal/headers/header-structure-1.php file. Make changes using child-theme https://developer.wordpress.org/themes/advanced-topics/child-themes/ to prevent losing it after theme update.

Regards

#232405 Copied
foxnick

Participant

April 17, 2020 at 20:49
I’m using header type 18 now and want to drop in the Product search box form code into the Header custom HTML (for 6, 7, 13, 14, 18 headers) section. What is the correct block of code to display product search box here?? I found some code but the styling doesn’t align up properly or produce any search results
```
-----------------------------------------------------------------------------------------
<form action="<?php echo home_url( '/' ); ?>" class="hide-input searchform" method="get">
	<div class="form-horizontal modal-form">
		<div class="form-group has-border">
			<div class="col-xs-10">
				<input type="text" name="s" class="form-control" placeholder="Search..." />
			    <input type="hidden" name="post_type" value="product" />
			</div>
		</div>
		<div class="form-group form-button">
			<button type="submit" class="btn btn-black"><i class="fa fa-search"></i></button>
		</div>
	</div>
</form>
--------------------------------------------------------------------------------------------------------------------------
```
Please contact administrator
for this information.
#233850 Copied
Rose Tyler

Support staff

April 18, 2020 at 09:13
Hello,

Try the next way –
go to Appearance > Widgets > create a custom widget area > add search widget – http://prntscr.com/s1o4n2 > http://prntscr.com/s1o5ki
[vc_widget_sidebar sidebar_id="test-area"]
add the next custom CSS code:
```
.header .et-search-result {
    position: absolute;
    z-index: 9;
    background-color: white;
    max-width: 350px;
    border: 1px solid #e1e1e1;
    padding: 0 15px;
}
```
you will get – http://prntscr.com/s1o6oj

Regards
#233875 Copied
foxnick

Participant

April 20, 2020 at 16:59

k. great. where in code or files can I add id=”search” to the input type within the search form?

we are testing out Klevu search and working to integrate per their instructions link below, changing search.php and searchform.php

https://support.klevu.com/knowledgebase/integration-steps-for-wordpress/

#234002 Copied

Olga Barlow

Support staff

April 21, 2020 at 10:19

Hello,

If you need to edit search files then copy royal/searchform.php and royal/woosearchform.php to child theme and make the necessary changes.

Regards

#234098 Copied

foxnick

Participant

April 21, 2020 at 17:32

Is this the same code for the Etheme Search widget? I need to add ID to this form.

#234167 Copied

Olga Barlow

Support staff

April 22, 2020 at 09:54

Hello,

Find etheme_search function if wp-content/plugins/royal-core/shortcodes/etheme_search.php, copy it to child theme functions.php and also add the necessary id.

Regards

#234253 Copied

foxnick

Participant

April 22, 2020 at 17:09

K. i found that and added the id, but how do I suppress the .et-search-restul window to stop displaying? Keep showing 3 products in drop down and I don’t want it to show at all.

thx.

#234306 Copied

Olga Barlow

Support staff

April 22, 2020 at 19:28

Hello,

There is no such option but I could provide you custom CSS to hide it. Could you provide me link to page where you use this widget?

Regards

#234321 Copied

foxnick

Participant

April 23, 2020 at 16:05

See link. Search box top left

Please contact administrator
for this information.

#234458 Copied
Olga Barlow

Support staff

April 23, 2020 at 20:01
Hello,

Add the following code to Theme Options > Custom CSS
```
.header .et-search-result {
    display: none;
}
```
Regards
#234507 Copied
foxnick

Participant

May 13, 2020 at 00:09

K. that worked great. is there css to also hide the search icon on “Desktop”. Now that I have search box top left, don’t really need the search icon showing on desktop.

thx!

#236980 Copied
Rose Tyler

Support staff

May 13, 2020 at 08:04
Hello,

Theme Options > Header settings > Enable search form in header > Off
or use the next custom CSS code
```
.navbar-right .header-search {
    display: none;
}
```
Regards
#237018 Copied
foxnick

Participant

May 14, 2020 at 22:44

This hides search icon on all devices. what css do i use to hide on just desktop?? I want the search icon to still show on Mobile/Tablet

#237310 Copied

Rose Tyler

Support staff

May 15, 2020 at 07:03

Hi,

Add the mentioned code in Theme Options > Custom CSS > Custom CSS for desktop

Regards

#237331 Copied

foxnick

Participant

May 15, 2020 at 23:53

that worked. thx!

#237440 Copied

Olga Barlow

Support staff

May 18, 2020 at 15:17

Hello,

You are welcome.

Regards

#237727 Copied
Viewing 18 results - 1 through 18 (of 18 total)