Return to previous page

How to change search appearing in header

This topic has 4 replies, 2 voices, and was last updated 5 years, 9 months ago ago by Rose Tyler

  • Avatar: margerretta
    margerretta
    Participant
    July 6, 2018 at 14:52

    Hello!
    I’d like to edit this search button. I would like it is on the right together with shopping cart and appears like simple search icon without place for typing. Where can I edit header?
    http://prntscr.com/k3brrv
    Thank you!

    #196252 Copied
    3 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 6, 2018 at 16:01

    Hello,

    You can edit header structure file depending on header type that you use, in your case, it is xstore/headers/center.php. Do all the changes in child theme files.
    If you need help with customization you may contact WPKraken team.

    Regards

    #196259 Copied
    Avatar: margerretta
    margerretta
    Participant
    July 7, 2018 at 12:43

    Thank you! Then how can I just change this view of search button https://prnt.sc/k3mkju
    to this view https://prnt.sc/k3mkzl from another header type

    #196282 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    July 9, 2018 at 07:31

    In this case, you can use css code (add own code in Theme Options > Styling > Custom css or in style.css of child theme).
    For example:

    .header-search.act-default [role="searchform"] .btn {
    background-color:  transparent;
    margin-right: 3px;
}
.header-search .fa:before {
    color: #b1b1b1;
}
.header-search.act-default input[type="text"] {
    border-color: #c1c1c1;
}
.header-search.act-default [role=searchform] .btn:hover {
    background-color:  transparent;
}

    Regards

    #196304 Copied
  • Viewing 4 results - 1 through 4 (of 4 total)

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

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Transport – WooCommerce Theme
lazy-placeholder
Mobile Store – WordPress WooCommerce Theme
lazy-placeholder
Car Parts Store – WordPress WooCommerce Theme
lazy-placeholder
Landing Watch – WordPress WooCommerce Theme
lazy-placeholder
Agricultural Store – WordPress WooCommerce Theme
lazy-placeholder
Wedding – WordPress Theme
lazy-placeholder
Coffee Store – WordPress WooCommerce Theme
lazy-placeholder
Business Card – WordPress Theme
lazy-placeholder
Babyland 01 – WordPress WooCommerce Theme
lazy-placeholder
Beaty & Cosmetics – WordPress WooCommerce Theme

See All Templates

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