Styling of Advanced Card Processing input fields not right in 2.5.3

Hello @getnoticedlocally

The new card fields can still be styled with CSS, just not as extensively as the old hosted fields. Here are the Supported CSS properties for:

• old hosted fields: https://developer.paypal.com/docs/checkout/advanced/customize/card-fields/v1/style/
• new card fields: https://developer.paypal.com/docs/checkout/advanced/customize/card-field-style/

The old hosted fields were flexible enough for us to copy the theme styles and apply them to the fields. But with the new card fields, PayPal has more control over properties like borders, so certain properties can no longer be adjusted using CSS.

For extensive customizations, the old fields remain available as a fallback option. To disable the new card fields and use the hosted fields instead, you can install a plugin through the following link:?https://drive.google.com/uc?export=download&id=1Tk1GqnTUb1aP1QlmjfcnP55YTHXN-fF6.

Alternatively, you can use the following filter:

add_filter('woocommerce.feature-flags.woocommerce_paypal_payments.card_fields_enabled', '__return_false');

This will disable the new card fields feature.

Kind regards,
Krystian

Hi Krystian,

Many thanks for your reply, it’s much appreciated.

So what has actually changed in the plugin then as you mention the old “hosted fields” and “new fields”? Would reverting to the old hosted fields have any effect on the functionality of the plugin, or is it just the styling on frontend that is different?

Many thanks,

John

Hello?@getnoticedlocally

The new hosted card fields offer a range of benefits over the previous version:

• The most important factor is Vaulting, the old hosted fields only work with Vault v2 while the new card fields support Vault v3 which offers more features (e.g. buyers can save a card from the my-account section without a purchase).
• Fixes the issue where the “Hosted Fields payment is already in progress” message might appear during payments with classic Hosted Fields, especially when the fields were re-rendered following an AJAX reload.
• Provides a modern appearance right away, without mirroring the default theme style.
• Maintains card field data even through AJAX reloads.
• Automatically checks fields for validation and highlights any invalid data.

In summary, this does not affect the plugin’s functionality itself, but the old fields will also no longer be updated, and won’t receive any of the quality-of-life enhancements.

Kind regards,
Krystian

Hi Krystian,

Thanks for your reply – all sounds good. It’s a shame it doesn’t work better out the box with Avada which is obviously quite a popular WordPress theme. Here is image of how it looks out the box currently: https://i.ibb.co/5j1PQTD/Screenshot-2024-02-27-124352.png

The only fix at the moment seems to be me writing some Custom CSS and adding that to the theme to style the fields better.

Is this not something you or Avada would do so that things look better out the box and therefore users don’t have to write Custom CSS to manually fix the issue on every site?

Thanks again for your help ??

John

Hello?@getnoticedlocally

We’re considering adding a default minimum height to the fields to prevent them from appearing too flat in certain themes (like Avada).

You might want to try the following CSS styling to see if it helps. I haven’t tested it myself since I don’t have a theme that disrupts the styling as shown in your screenshot:

.ppcp-credit-card-gateway-card-number, .ppcp-credit-card-gateway-card-expiry, .ppcp-credit-card-gateway-card-cvc { 
	padding: 1rem;
}

Please give it a shot and share your feedback with us.

Kind regards,
Krystian

Hi Krystian,

That CSS code didn’t work and from checking the Inspect it seems like it’s not targeting the correct classes? See image: https://i.ibb.co/vZL3wLs/pp.png should it be targeting .card-field-number ?

When I manually add padding: 1rem; to the field in inspect though it does look a lot better. Although I think the CVV field in 2.4.3 (with text next to a short field) looks better (see screenshot for 2.4.3 in first post of this thread).

Thanks Krystian,

John

Hi,

We have exactly the same issue and would like to keep the field design on the new version as showed by @getnoticedlocally here : https://i.ibb.co/jkgkTtG/2-4-3.png

what css should we use now instead of the ones below ?

#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; }

Thanks in advance for help