• Resolved nicowebmaster

    (@nicowebmaster)


    Hello,
    I am looking for a way to customize the select quantity dropdown filters on the product sheets and filter option variable. I modify the select and option tags but nothing changes, I feel that it is the CSS of the browser that takes over.
    How to do ?
    thank you

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor James Koster

    (@jameskoster)

    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

    Kenin

    (@kbassart)

    Automattic Happiness Engineer

    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.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom css select filter quantity and variable product filter’ is closed to new replies.