Woocommerce variation selection is black on black, how to fix?

  • Resolved ashley

    (@ashleycox)


    1 month, 2 weeks ago

    I’m developping a site and have a maddening issue that I can’t seem to solve. When you visit a product page with variations, the variations are black text on a black background until clicked. ANy ideas? Site is running the latest Woocommerce as of today with the twenty twentyfFive theme. I do have the markup by attribute plugin installed but have tried deactivating it and the issue persists. I’m sure this is a simple fix in CSS or a theme conflict but can’t for the life of me figure it out.

    I’ve also had another issue reported where the prices are spaced across multiple lines split at the decimal point. I can’t seem to reproduce this, but if anyone knowswhat might be causing it I’d be greateful. Thank you!

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Saif

    (@babylon1999)

    Hello @ashleycox!

    Seems like the select options don’t respect the color set for text in the styles tab. Not sure if it’s considered a bug. ??

    For now, you can just add the following CSS to fix it: 

    .woocommerce div.product form.cart table.variations td >select {
      color: white;
    }

    Cheers!

    Thread Starter ashley

    (@ashleycox)

    Thank you @babylon1999, the options are now visible. HOwever when clicked to select an option the text is white on white so can’t be read. The spacing of the arrow after ‘options’ also looks a bit off. How would you resolve this? I can only assume it is a bug since everything else followed the theme colours. Thank you for your assistance, CSS is not my forte!

    Saif

    (@babylon1999)

    I can perfectly see them from my end, what browser are you using?

    Thread Starter ashley

    (@ashleycox)

    Using Chrome but have tried in Edge. Screenshot 1 is the black background on the drop down menu which needs changing to #ffffff and the ‘V’ chevron needs to have a space between that and the text. Screenshot 2 shows the drop down menu when its activated and both the background and text are white. The text needs to be #000000. Hopefully the screenshots work

    Plugin Support shahzeen(woo-hc)

    (@shahzeenfarooq)

    Hi there!

    I’m not able to see any screenshot you shared. However, I checked the issue on Chrome and noticed that the select dropdown background color is white, which makes the text invisible.

    To fix this issue, you can use the following CSS code:

    table.variations select option {
        background-color: #1b1b1b !important;
    }

    The final result will look like this: https://prnt.sc/YmA4V30WOe-q

    If that does not resolve the issue, please note that we do not provide support for customizations. Additionally, the site layout and color settings are controlled by your theme. In this case, I recommend contacting your theme provider for further assistance.

    Thank you!

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