Custom css select filter quantity and variable product filter

Hi there,

WooCommerce doesn’t apply any visual treatment to select elements on the frontend. So you have total freedom to do with them what you wish.

Generally, for comprehensive changes to the look and behaviour of these elements you’ll need to apply some javascript to replace them with alternative markup. This isn’t really recommended though since WooCommerce will conditionally load/reload selects in certain situations, variable products for example. You risk breakage by introducing additional javascript during these AJAX processes.

To be 100% safe you’re really limited to CSS. Styling selects with CSS is somewhat quirky as different browsers will treat styles differently. Most methods also have drawbacks. To cut a long story short it’s rarely worth customising how form elements look as you risk confusing visitors with unfamiliar designs. Is it worth changing how a checkbox looks if it has a negative effect on conversion rates?

If you decide to go ahead, I found this comprehensive answer on StackOverflow which outlines some methods and their positives/negatives.

James
Designer @ Automattic

We haven’t heard back from you in a while, so I’m going to mark this as resolved – if you have any further questions, you can start a new thread.