How do I customise the checkboxes in Faster Woo Widgets?

There are various customisations you may wish to make to the checkboxes in Faster Woo Widgets. Normal HTML checkboxes are unsuitable for what the FWW checkboxes do, so we’ve implemented them using CSS.

Some themes may mess up these checkboxes by placing them too high or too low compared to the text of your checkbox attribute. Font sizes can also mess with the tick box inside the checkbox.

You may also wish to contain the checkbox inside a scrollbox.

Contain checkbox list inside scrollable area

This is standard CSS – to implement it, you just need to know the CSS selector to apply CSS to the checkbox list. The following CSS will make the checkbox list a scrollable box:

.checkboxlist .product-categories.attributes {
height:200px;
overflow-y:scroll;
}

You may adjust the height how you wish.

Move checkboxes up or down or adjust the tickbox position inside the checkbox

If your checkboxes are too high or too low compared to the text, use the following adjustment CSS to move them:

.widget.checkboxlist li::before {
top:4px;
}

.widget.checkboxlist li.activeff::after {
top:12px;
}

The ::before refers to the box and the ::after refers to the tick mark – by adjusting the top value you can move these 2 items up or down relative to the text they are placed next to.