How to hide the product search bar in WooCommerce on mobile

Hi @decli ,

Just add the following CSS snippet to Additional CSS tab in the Customizer (Appearance ?? Customize):

/* Hide WC Product Search title, bar and button  */
body.search-results .onMobileOnly {
  display: none;
}

I entered the snippet – no change. Still visible. ??

• This reply was modified 1 year, 3 months ago by decli.

It works, I just checked. ??

If you don’t see the result on your side, try clearing your browser’s cache, or open a private navigation tab, or try with another device or go to https://howtohardrefresh.com to learn how to force a page refresh.

Please check mobile. It’s still there. Mobile is the concern.

I’m using chrome on mobile. Have closed all open pages and cleared the cache.

Please go to Appearance->Customize->Additional CSS option then add that code

@media(max-width:400px){
.onMobileOnly{
    display: none;
}
}

If not work then put that code please

@media(max-width:400px){
.onMobileOnly{
    display: none !important;
}
}

• This reply was modified 1 year, 3 months ago by Muhammad Jawad Abbasi.
• This reply was modified 1 year, 3 months ago by Yui.

@decli Yes, the CSS snippet I shared works perfectly on mobile devices. Your browser cache has not been cleared. 100% sure. Use another device or browser if you can’t clear the cache. You can also see what your web page looks like on mobile devices using a third-party service such as https://www.screenshotmachine.com.

@jawad1234 There’s no need to target mobile devices specifically in this case since, by default, the element is displayed for all devices and hidden only for desktops using CSS. A rule that hides it globally is therefore sufficient. Moreover, the element is displayed by default for devices with a minimum width of 980px, so the media query rule should be at least @media(max-width: 979px), not 400px. Finally, the onMobileOnly class seems way too imprecise imo, and risks hiding other important elements of the website. This is why it’s important to limit the scope of the rule to the search results page with body.search-results.

Thanks everyone for your help. @jawad1234’s first suggestion worked perfectly.