[Support request] How do I style the woocommerce variations menu?

Home Forums Support How do I style the woocommerce variations menu?

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1520138
    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.

    #1520369
    David
    Staff
    Customer Support

    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.

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.