Examples/documentation needed of Custom CSS

Hi,

Thanks For Your Message

The CSS Editor accepts standard CSS just like your theme’s Custom CSS, but it is loaded only when that specific filter is displayed, so the styles apply to the filter only.

You can find detailed instructions and more ready-to-use examples in our documentation:
https://woobewoo.com/documentation/product-filter-design-modification-guide-css/ How to use it

1. Go to Filter → Edit → Design tab → CSS Editor
2. Add your custom CSS using the plugin classes
3. Save and refresh the page

Common examples

Change filter title style

.wpfFilterTitle {
color: #2ecc71;
font-weight: 600;
text-transform: uppercase;
}

Add spacing between filter blocks

.wpfFilterWrapper {
margin-bottom: 20px;
}

Style the Clear button

.wpfClearButton {
background: #ff4757;
color: #fff;
border-radius: 4px;
}

Your theme’s Custom CSS is still best for global styling, while the CSS Editor is ideal when you want to style a specific filter or keep the styles portable with the filter export.

Regards