Replace search icon with Search Box - by foxnick

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

  • Avatar: foxnick
    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.
    17 Answers
    Avatar: Rose Tyler
    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

    Avatar: foxnick
    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.
    Avatar: Rose Tyler
    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

    Avatar: foxnick
    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/

    Avatar: Olga Barlow
    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

    Avatar: foxnick
    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.

    Avatar: Olga Barlow
    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

    Avatar: foxnick
    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.

    Avatar: Olga Barlow
    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

    Avatar: foxnick
    foxnick
    Participant
    April 23, 2020 at 16:05

    See link. Search box top left

    Please contact administrator
    for this information.
    Avatar: Olga Barlow
    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

    Avatar: foxnick
    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!

    Avatar: Rose Tyler
    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

    Avatar: foxnick
    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

    Avatar: Rose Tyler
    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

    Avatar: foxnick
    foxnick
    Participant
    May 15, 2020 at 23:53

    that worked. thx!

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    May 18, 2020 at 15:17

    Hello,

    You are welcome.

    Regards

  • Viewing 18 results - 1 through 18 (of 18 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.