Archived topic
How do I style the woocommerce variations menu?
1 reply · Started by Andrei on November 6, 2020
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.
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.
