How do I style the woocommerce variations menu?

[Andrei]

Hi,

I am using Generate Press theme and Woocommerce on ta-tienne.ro/magazin . In the product section (like, say here: https://ta-tienne.ro/produs/absolutely-me/ ), I use variations for products.
The variations dropdown looks raw and is not aligned with the visual identity of the rest of the website.
How can I style it?
I tried various things I found here and other forums, but nothing really worked.
What I am trying to achieve are the following effects:
1) I want the dropdown menu in itself to be styled in a similar fashion to the other input cells (border radius 4px, rgba(255,255,255,0.85);
2) I want to make it so the option background color is #893467 when I hover over the option in the dropdown, as well as when I leave the dropdown but it’s still open.
If you can help me target the right IDs classes to achieve these effects that would be awesome. I know how to write the code, but I just didn’t seem to target the right classes/IDs to get the job done.

[David]

Hi there,

elements such as the Select element are styled by the browser not by the Theme or the plugin ( ie Woocommerce ).
You have very limited styling control over them without adding a custom Javascript replacement, especially the drop down. The most we can help with is to remove the select styles ( not the dropdown ):

select {
    border:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -ms-appearance: none; /* get rid of default appearance for IE8, 9 and 10*/
}

You can then apply styles to the Select box such as adding a background image for a dropdown arrow. Or you can style the TD wrapper around the select box if you need to use CSS Pseudo elements for say adding a drop down icon.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts