Changing color of Add Payment Method box

Hey there, @alkemy007! Thanks for contacting us. I’m happy to help you.

To make sure we share the correct information, I wanted to confirm exactly which elements you want to change the color of. I checked the screenshot you mentioned, but I’m not sure if the circled elements are the ones you want to keep as they are or change.

Also, the two arrows at the bottom, do they mean you want to change the background color and the color of the button?

Once we know exactly what you want to change, we will be able to assist you further.

Looking forward to your reply.

Have a wonderful day!

Hi Carol, yeah, anything circled, I want to change, and the arrows are for the background colour I want to change. I should have mentioned, my website colours are predominantly dark with gold and grey.

Thanks.

Hello alkemy007

Thank you for your reply and for clarification.

To assist you further I would like to check how your website is set up.
Could you please send me a copy of your site’s System Status Report?
You can find it via WooCommerce > Status.
Select Get system report and then Copy for support.

Once you’ve done that, you can paste the text in https://gist.github.com
After that, you can paste the Gist link here in your reply.

This report will provide me with details about your theme, plugins, and other important website configurations.

Looking forward to your response. ??

Hi Zubair, I have no idea how paste my text into that link, but, I can paste the info in here if that helps?

Hi @alkemy007,

You can go to that link and find a box to paste your text into! ?? Like this: https://prnt.sc/8_az5VNYWzia. Once you do that, you click on “Create secret gist,” and it’ll redirect to a new link that you can share with us: https://prnt.sc/0uZCt8CFP08d.

However, considering your request, a System Status Report is not necessary at this moment. Your site URL (as long as it’s public) will do. Before we move further, I have to inform you that customization is outside of our support scope (https://woo.com/support-policy/#customization).

If you share your site with us, we can look into it and help you figure out the correct CSS selectors you need to use as a courtesy, but for anything bigger than that, you should check with your theme support or find a developer to help you.

Cheers!
-OP

Okay, thanks Omar. My site is: https://djalkemy.co.uk/

?? hey @alkemy007

Thank you for reaching back, with the site’s URL.

After going ahead with inspecting its code, I’ll go ahead with recommending the following, as a next step:

• Take a look at the document linked here (“How can I change the style of the payment form?”). Customizing the payment forms used in the Stripe WooCommerce Extension is a bit different than styling other elements of your site.
• Feel free to reach out to the currently active theme’s support channel (sonaar), as they would be in a better position to assist you with any theme-related settings. Linked here is a screenshot, for reference.
• It appears there is the Elementor plugin active on the site. Linked here is another screenshot, for reference. I’d also recommend reaching out to Elementor plugin’s support, which can be accessed via this page: https://elementor.com/support/

I trust that points you in the right direction, but if you have more questions, let us know.

We’re happy to help.

We haven’t heard back from you in a while, so I’m going to mark this as resolved – we’ll be here if and/or when you are ready to continue.

Hi Pepe. I was away on holiday, and just got back. So, I tried to see if the above method works for me, but I’ve ran into an issue. When I click “add new payment method” this box now appears: https://ibb.co/p4rtshS

I’m not sure what has happened, but as you can see, there is now no name/card number field etc. It seems to have only happened since i switched back from test mode (to test payments on checkout).

I’m not sure what to do next. I’ve tried purging the cache of the site etc, but I still have this issue.

Hi @alkemy007!

Thank you for reaching back.

I checked the screenshot you sent, and I understand that this black color shape displays after selecting the Add new payment method option, correct?

If correct, have you made any CSS customization that could be interfering? If you do, please try deactivating it and check how it performs.

If you don’t have any custom CSS code, I think this could be related to your theme. To probe this, kindly create a staging site (a replica of your site to perform tests) using the?WP Staging?plugin, change your theme to a default one like?Storefront?or?TwentyTwentyFour, and check again if the issue persists.?

Let us know how it goes for you!

It’s not the colour I have the issue with now, I can change that back, it’s just that when I click add new payment, there is literally nothing for me to fill out. No name, card details etc.

Hi @alkemy007!

Thank you for providing further details.

I understand no information is displaying when selecting a payment method; is my understanding correct?

If it is, I think this could be related to your theme.

To narrow the issue down, let’s discard first a theme conflict. 

To do this, please try changing your theme to a default one, like Storefront or TwentyTwentyFour, and check if the issue persists. You can create a staging site (a replica of your site to perform tests) using the WP Staging if you don’t want to do this in your live site.

More information about changing your theme here: https://woo.com/document/choose-change-theme/#section-2

Let us know how it goes for you!

I changed the theme to TwentyTwentFour, and it is still the same: https://ibb.co/g9PmhPN

Hello @alkemy007,

This sounds more like the issue described?in this thread, where possible solutions have also been shared.

Please take a look at this thread and let us know if the solutions shared there solve the issues you are facing.

Cheers.