Woocoommerce - Product Search Widget looks bad

[johankridih]

Hi

On this site: agrossist.no under the shop (Butikk) I have a standard Product search widget on the right side. And its been fine. But now suddenly you see the button is mashed up into the search bar, and the little “magnifiying glas” icon is gone. Its actually behind the button.

Yes, I have custom CSS on the site. But removing all of it, changes nothing about those issues. I am not actually sure where the problem is. If its a theme option or something else. I just updated the site and noticed that.

Do you have any idea of what might be wrong?

Thanks!

[thai]

Hi There,

Please try adding this custom CSS under X > Theme Options > CSS:

form.woocommerce-product-search {
    display: flex;
}

form.woocommerce-product-search .search-field {
    height: 50px;
}

form.woocommerce-product-search button {
    padding: 10px;
    height: 45px;
}

Hope it helps

[johankridih]

Thanks!
Yeah, that fixed it. But it feels more of a band-aid then a sollution to why it happened. I am affraid a future change of the theme might make that quick fix even worse. It seems like something that shouldnt need a quick fix, but just be fine by default.

[mldarshana]

Hi There,

Follow the guidelines below and test your site to see if you’re still encountering the issue.

• Switch to your Parent X theme from Appearance -> Themes.
• Remove all of your custom CSS & JS added to your site.
• Disable your 3rd party plugins.

Make sure to purge your server cache and clear your browser cache before testing.

Let us know how it goes.
Thanks!