Support » Plugin: WooCommerce PayPal Checkout Payment Gateway » Change text color credit card options – dark theme

  • Resolved connde

    (@connde)


    Hi, I’m setting up PayPal Checkout and I cant find how to change text color to white when the user select to pay with Debit or Credit card as I have a dark background so text is almost unreadable.

    Can someone help me?

    Screenshot

    • This topic was modified 3 months, 2 weeks ago by connde.
Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Hannah S.

    (@fernashes)

    Automattic Happiness Engineer

    Hey there,

    Thanks for including that screenshot!

    You can change the PayPal button colors through WooCommerce > Settings > Payments > PayPal Checkout:

    Change button color
    Link to image: https://d.pr/i/G8MFcm

    It looks like those settings are likely being overridden by CSS on your site.

    I checked the checkout on my own site to see if I could find more settings, but I only see the “PayPal” button – I don’t see anything that looks like the button in your screenshot:

    lPayPal at checkout
    Link to image: https://d.pr/i/2CbJAu

    Could that button be added by a different plugin? Also, can you confirm what it should say, for example by pasting the text of the button here in your response? Alternatively, could you share a link to a product on your site so that we can take a look directly?

    I’d like to know more about your site. Could you please share a copy of your site’s System Status? You can find it via WooCommerce > Status.
    Select “Get system report” and then “Copy for support”.  Once you’ve done that, paste it here in your response.

    Thanks!

    Hi Hanna, thanks for replying.

    My issue is not related to PayPal button, if you look at my screenshot you will see it is visible as intended, my issue is with Debit or Credit card form that opens after I click it, the text is dark and with a dark background is almost impossible to see it and is quite important part as is the combo-box to select the card country.

    You might have Debit or credit card selected in “Hide Funding Method(s)” section, I assume that’s why you’re not seeing that second button on your page.

    My page is https://trysmartlock.com

    Plugin Support Jess L

    (@jlundie)

    Hi @connde,

    Thanks so much for clarifying! I took a look at your page and can see the Billing Address text you describe within the PayPal iFrame. It looks like those colors are being rendered inline.

    I believe you should be able to change that with some custom CSS:

    .billingAddress p {
     color: yourcolorhere!important; 
    }

    Could you give that a shot and let us know if that does the trick?

    Cheers,

    Jess

    Hello.

    I tried that but it don’t work, I think maybe is because some JS is being loaded after the click.

    Plugin Support Joey Ricketts

    (@jricketts4)

    Hi @connde – I agree, this seems to not be possible with CSS. I’ve filed an issue to get a second opinion from our developers, as none of the typography color settings seem to affect this one string: https://github.com/woocommerce/woocommerce-gateway-paypal-express-checkout/issues/827

    – Joey

    Hi Joey, thank.
    I will be following the issue in GitHub as well.

    Plugin Support Joey Ricketts

    (@jricketts4)

    Hi @connde – if you didn’t already see, there was a duplicate of this issue here: https://github.com/woocommerce/woocommerce-gateway-paypal-express-checkout/issues/813
    You can follow along there now. I’m going to set this to resolved, as any further information will be provided within that issue.

    – Joey

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