Hello @rileysmithrsd
The card input fields are rendered using hosted fields, which are embedded via iframes. This means that they are isolated from your site’s main CSS and cannot be styled using standard CSS rules added through the theme customizer or external stylesheets.
There are, specific styling options available through the PayPal SDK, which allow limited customization of these hosted fields. You can find the list of supported style properties in PayPal’s documentation here:
https://developer.paypal.com/docs/checkout/advanced/customize/card-fields/v1/style/
We provide guidance on styling within the plugin documentation: https://woocommerce.com/document/woocommerce-paypal-payments/#customizing-hosted-fields
So while it is possible to apply some styling, it’s important to note that this must be done using the supported structure provided by PayPal, not with standard CSS targeting.
Kind regards,
Krystian
Hi @inpsydekrystian ,
Thank you for replying, but I stated in my initial comment that I followed the documentation exactly with the examples provided. I added the docs example css to the customizer and it doesn’t work as described. Again, I tried this on a fresh install with only storefront, woocommerce, and woocommerce paypal payments installed
When applying the CSS provided by the documentation to the customizer as the documentation describes, I see on the frontend that a set of hidden inputs are stylized according to the CSS, however, these hidden inputs are not the hosted fields the documentation says should be styled
Hello @rileysmithrsd
Please share the code you’re trying to use, and we’ll help determine if it is possible. That would be a good starting point.
Kind Regards,
Krystian
@inpsydekrystian
#ppcp-credit-card-gateway-card-number, #ppcp-credit-card-gateway-card-expiry, #ppcp-credit-card-gateway-card-cvc {
background-color: #ffffff !important;
border: 1px solid #bbbbbb !important;
border-radius: 5px !important;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
height: 40px !important;
padding: 0 10px !important;
}
This is the code provided by the documentation here: https://woocommerce.com/document/woocommerce-paypal-payments/#h-example-css
As advised in the documentation, I added this code provided by the documentation to my additional css through the customizer using storefront
Hello @rileysmithrsd
Please test if it works in this form. https://drive.google.com/uc?id=14zUtpGe05PfAuUio_4UthqEnN6CvC-hR
You can test it by placing the following code into your functions.php file or using a plugin like Code Snippets:
add_action('wp_head', 'custom_paypal_card_fields_styles');
function custom_paypal_card_fields_styles() {
?>
<style>
#ppcp-credit-card-gateway-card-number,
#ppcp-credit-card-gateway-card-expiry,
#ppcp-credit-card-gateway-card-cvc {
background-color: #ffffff !important;
border: 1px solid #bbbbbb !important;
border-radius: 5px !important;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
height: 40px !important;
padding: 0 10px !important;
}
</style>
<?php
}
Let us know the outcome.
Kind Regards,
Krystian
@inpsydekrystian
I created a basic child theme and added the code you provided to the functions.php file but still the fields are not stylized. To make it more obvious if it were successfull, I changed the background-color to #000, but again, still not working.
I cleared my server cache, there are no other caches on this install, used a completely fresh browser
Hello @rileysmithrsd
The reason your custom styles are not applying is likely because the new card fields (Hosted Fields v2) have quite styling capabilities compared to the older Hosted Fields setup. The official documentation is a bit outdated and still refers to the previous generation of fields, which allowed more customization. We’ll soon update it along with new UI.
The current version of the card fields is rendered inside an iframe controlled by PayPal, and most CSS styling from your theme, including the background color, won’t apply. This is by design, as PayPal now handles styling internally for improved consistency and security, including features like card type icons and input validation.
If having full control over the styling is a must, it’s technically possible to switch back to the older Hosted Fields implementation by disabling card fields entirely, but we generally do not recommend this, as it limits access to newer features like Vault v3 and enhanced compatibility.
That said, if you could share a link to your checkout page, we would be happy to take a closer look and see if there’s any limited customization possible within the current setup.
Kind Regards,
Krystian
