Modify Variable Dropdown Menu CSS

  • kosmicbird

    (@kosmicbird)


    9 years, 9 months ago

    I need to change the css (mostly colors) of the dropdown menu for variable products. For instance, on my product page I have the attribute of “Color” and I need to change the colors of the selector for the attributes. I managed to change the main display targeted with

    .woocommerce div.product form.cart .variations select { }

    however this only targets the main display of the selector. It does not modify the options list, which is what I need to target. Would appreciate any help as I’ve been spending way too much time trying to figure this out.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Peter Lawrenson

    (@lorro)

    9 years, 9 months ago

    As you say, you can style the select, but in general you can’t style the options of a drop-down. This is because drop-downs are rendered by the operating system. Google “css style select option” and you’ll see lots of people have tried this and that but the fiddles seem hard work and are not cross-browser compatible.

    This plugin will allow you to setup product options as radio buttons with images:
    https://codecanyon.net/item/woocommerce-extra-product-options/7908619
    There are other similar plugins around. You can’t have stock control of the variations or separate skus with these though.

    Thread Starter kosmicbird

    (@kosmicbird)

    9 years, 9 months ago

    Thanks for the reply @lorro. I was hoping there would be a way as I’ve modified drop-down menus of other plugins (granted after a lot of effort to figure out what code to target). Just can’t seem to figure it out with woocommerce like I did with the other plugins. Ah well…

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Modify Variable Dropdown Menu CSS’ is closed to new replies.