how to replace the Search Box with the WooCommerce Product Search Box widget

Shapely
1

Hi

I’d like to remove the Search Box on the top-right hand corner of the theme and replace it with the WooCommerce Product Search Box widget. Is that possible?

Thanks

2

Hi @ethann,

I hope you are well today and thank you for your question.

You can try achieving this by using the attached custom child theme of Shapely theme that contains some custom code.

Best Regards,
Movin

3

thanks a lot it worked…

4

You are most welcome here :slight_smile:

5

hi @Movin the above child theme is working great on desktop but in mobile the search box is not working whenever someone clicks on search the search box is closed also the layout of search box is out of place in mobiles
please see the below attachment

6

Could you please share me your site URL where it’s happening so that i can troubleshoot it?

7

here is the site url : http://www.grinskart.com please check it in mobile browser

8

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other


@media (max-width: 350px){
  #page #site-navigation #woocommerce-product-search-field {
    margin: 10px 0 0;
}
#page #site-navigation .woocommerce-product-search input[type="submit"] {
    margin: 10px 0 0;
}
}
9

i tried the above solution but its not working please see the page at www.grinskart.com

please suggest

10

I can see on your site you have removed the search box on mobile devices by using following custom CSS code so please first of all remove that CSS code from your site so that it will be displayed fine on mobile as shown in the attached screenshot.


@media (max-width: 767px){
.hidden-xs {
    display: none!important;
}
}
11

i have not added that code inside custom css option of theme i cant find the code inside any file because i was using Autoptimize plugin for concatenating all inline css But i have managed to show the search field and button by following code

@media (max-width: 767px) {
.hidden-xs {
display:block!important
}

but problem is that the search field is not editable whenever i click on search field it disappears. Please help

12

You can resolve that issue by always displaying search box on mobile devices by using the following CSS code.

@media (max-width: 991px){
.nav-bar .search-widget-handle .function {
    display: block;
}
}
13

Thanks finally its working :slight_smile:

14

You are most welcome here :slight_smile: