Your theme has a set of CSS (Style sheets), sometimes your selected theme / WooCommerce CSS can override the CSS in the Product filter. Here is an example on how to fix the CSS (Theme: Hello / Elementor) when the Product filer is used to build the shop page. The CSS code:
.wbc-filter-input-search{
width: calc(100% - 7px) !important;
}
.wbc-filter-cat-ul, .wbc-filter-cat-ul-hidden {
margin-top: 15px !important;
margin-left: -30px !important;
}
.wbc-filter-button-icon{
background-color:#dde6eb !important;
color:black !important;
}
.wbc-filter-button-icon:hover{
background-color:#2e336a !important;
color:white !important;
}
.wbc-filter-div-header-toggle{
margin-top: -1px !important;
}
Use this in your theme extra CSS (WP Admin > Appearance > Customize ) add this and change hex (web colors i.e #dde6eb or named colours like black, red, orange, tomato…) colours. Tip when you do this have the shop page visible.
