Css styling for wordpress payment credit card input fields

[fxground]

Hello,

I saw this post:

Woocommerce payments css issue

Hello, We are using woocommerce payments and the input fields for credit card and date are too small compared to theme’s default fields. How can we fix that issue. Speaking to woocommerce support they said it’s a theme compatibility issue.

I’m having the same issue but it doesn’t look like it was resolved. Details in the secure note.

[ruenel]

Hello @fxground,

Thanks for writing in! Your custom CSS will not work because the credit card field styling is coming from iframe styles. Be advised that no custom CSS can override any element inside an iframe. You may need to check your Stripe account and check if it is possible to edit and style those fields.

Best Regards.

[fxground]

Hello, this answer made sense to me. I went on woocommerce chat before submitting this ticket and they told me that its a problem with the theme. They pointed me to lots of other sites and urls, case studies that are all using the exact same plugin (woopayments) and none of those sites had these small credit card input fields. When asking woocommerce why i’m the only one stuck with these ugly credit card fields running the same plugin, they told me it was a problem with my theme.

Why would these other sites not have issues?

[fxground]

Hello,

More information.

• I’ve disabled all plugins except for woocommerce. Issue still happens.
• I changed themes . Issue does NOT happen
• I changed theme from pro-child to just pro. Issue does happen.
• I went to my checkout page, i removed all custom css, all custom js for the global and page settings on this test server. Issue STILL happens.

So based on this, so far there must be something wrong with the theme. I’ll put login credentials and instructions into the secure note.

[marc_a]

Hey @fxground,

My colleague is right, we cannot style the credit card field because it is an iframe. Due to the security reason we cannot override nor write custom CSS for it. We still would love to check your backend settings but the given credentials are not working, please update them with the correct ones.

Thank you.

[fxground]

Josh has a different opinion and i’m hitting the same error this user has (but has corrected) …

Woocommerce credit card fields too small

Do you see why I am confused?

Can you tell me how he got it working? I tried creating a woocommerce page + assigning it via the woocommerce advance endpoint tab… .not working still Also, i’m not needing to edit the css, i just want it to appear correctly by default which its not (and woocommerce has confirmed)

[threeoten]

Hey @fxground, that’s my post. The solution for me is in that same post in my edit note.

Woocommerce credit card fields too small

That doesn’t change anything. Credit card fields are still tiny. I’m using the [woocommerce_checkout] shortcode in a raw content element to populate the fields on the page. EDIT: It was the use of WooPayments that was causing the issue when using the [woocommerce_checkout] shortcode on a CS page. I disabled WooPayments and switched to the Woocommerce Stripe plugin and it is solved.

Let me know if that works for you.

[fxground]

Hey, thanks for chiming in …

I’ve tried creating a normal page (outside of cornerstone) and putting in the [woocommerce_checkout] but my credit card fields still look messed up. This is without assigning it to the checkout page. Even once I do that int he woocommerce settings i still don’t see the credit card fields appear bigger. Kinda odd.

I’m guessing this is the only option? “I disabled WooPayments and switched to the Woocommerce Stripe plugin and it is solved.”

can you use woocommerce stripe with the express account that was created during the woopayments? or you have to setup its own account.

[fxground]

I installed payment Plugins version of stripe and it works great - formatted as it should be … for themeco, really think maybe someone should look into the popular plugin with the theme. the woocommerce plugin works fine with the default wordpress theme but clearly something wrong with it and x pro

[ruenel]

Hey @fxground,

Thanks for chiming in! We will have it looked at by our developers. I will be adding this thread to our issue tracker.

Best Regards.