Credit card box

[Aleksandar]

Hi Armin!

In the checkout with WooCommerce Payments, the credit card option has a box that uses a different font size on desktop. Also, the padding isn’t quite right in the fill out fields. I tried adjusting it via custom CSS, but I simply can’t access it. I assume this is connected to WooCommerce Payments, no? LayTheme Text Formats don't effect the font size.

And on the phone it's just the system font. :-/

I’m clueless. Donno how to fix this.

All best
Aleks

[arminunruh]

hey aleks!

yea i looked at this issue one time already.
the problem is the card html is inside an iframe so its not stylable from the outside (from lay theme's side).
seems like a stripe iframe

i found this:

https://github.com/Automattic/woocommerce-payments/issues/3604
https://github.com/Automattic/woocommerce-payments/pull/8236
https://woocommerce.com/document/woopayments/customization-and-translation/customize-payments-appearance/

let me work on this and think about this yea because this really doesnt look good

[alasdair17]

hey, I saw Woo are beginning the process of some major changes, you might have seen their new branding etc and it looks like they are updating the functionality of WooCommerce too. More info here: https://woocommerce.com/posts/introducing-the-new-woo-brand/

Anyway I found this other blog post which might be relevant to this topic and hopefully this means they will make the card checkout more customisable: https://developer.woocommerce.com/2024/12/16/modernizing-the-woocommerce-payments-experience-technical-changes-ahead/

[arminunruh]

i will release an update now and if you update lay theme, it will look like it does above!

[arminunruh]

ah interesting @alasdair17 !

it sounds like they want to integrate more functionality into woocommerce.
i think an issue with woocommerce is it has to be backwards compatible. so the standard HTML and style for their cart and checkout is i think kinda old and ugly :DD

it was so much work to change the styling of the cart and checkout to make it look better.
because you need to use the standard styling and then modify it or override it. and you need to use their templating system to change some HTML to make it easier to style it in the way you want to.

but well woocommerce is free and of course companies like shopify did a better job because they earn much more and can spend more on development

however, i think its really amazing that not everything in this world is a subscription or littered with ads. and that there is still free software like wordpress or woocommerce

[alasdair17]

amazing work as always @arminunruh :)

and yeah I totally agree with you there on how great that there is still some free software out there, and yeah there are far too many subscriptions now!

[arminunruh]

thx thx! :)

[Aleksandar]

Haha, well I didn't expect that upgrade! :-P
I'm so glad this is solved.
Thank you!!!

[arminunruh]

sure! im glad it worked too, because i looked at this issue a while ago and it seemed super hard to fix it back then. but now the woocommerce docs got better maybe and there i could find an easy solution.