Making Woocommerce product search same style as Virtue search box

  • Hi guys,

    Firstly – amazing theme. I’ve been blown away the amount of customisation included in this. I’ve switched over from Opencart recently to WordPress, and I am loving it so far.

    The default search box in the top bar looks great as part of the Virtue theme. However I want to use the woocommerce product search box there instead. I’ve done this, adding it as a widget, however it doesn’t look great in comparison to the Virtue styled default one. Ideally I’d like it to look identical to the way the default search box looks but I’m struggling to find the right styling to add to the custom section. It would be great if anyone could give me a few pointers…

    Thanks,
    Sam

Viewing 3 replies - 1 through 3 (of 3 total)
  • hannah

    (@hannahritner)

    Hey Sam,
    So glad to hear you’re happy with the theme!
    Try adding the follliwng css to your custom css box in Theme Options > Advanced Settings:

    input#woocommerce-product-search-field {
    background: transparent;
    border: .5px solid #eee;
    padding: 2px;
}
input[type="submit"] {
    display: none;
}

    Does that work how you would like?

    Hannah

    Thread Starter sambinding

    (@sambinding)

    Hi Hannah,

    Thanks for the quick reply – awesome.

    This was almost what I was after, but I’ve been fiddling about with it a bit, and I’ve found I’m achieving what I’m after with simply hiding some of the search page. I’ve hidden the date and other bits, so it’s more like a product search result now:

    .search-results .postmeta {display:none;}
.search-results .postcommentscount {display:none;}
.search-results .subhead {display:none;}

    I’m sure there’s a simpler way to do it than this, but this seems to work.

    Thanks again.

    Sam

    Just so you know you can add a woocommerce search widget into the topbar. Then the search results would be styled as the shop.

    In your theme options > topbar settings you can enabled a widget area to replace the wordpress search and then add a woocommerce search in the topbar widget area.

    Kadence Themes

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making Woocommerce product search same style as Virtue search box’ is closed to new replies.