Credit Card Field Styling

Hello @brankokf

You can only change the font and styling of the fields area, as the new fields have inherent limitations compared to the old ones, due to the inclusion of out-of-the-box features such as automated field validation. Here’s a sample CSS snippet you might try:

#ppcp-credit-card-gateway-card-number { 
    color: green; 
    font-family: "Arial Black";
    padding: 50px;
}

The plugin gets the element?and then?filters out the properties that are not allowed. This should help guide you toward successful customization of the payment field.

Please let me know if you need further assistance.

Kind Regards,

Krystian

Thank you. I managed to change the font to a better one. As for the other styling for what i’m understanding due to new limitation you can’t change the padding and the border color for example, am i right?

View post on imgur.com

Hello @brankokf

According to the documentation from PayPal padding is supported. The list of supported CSS properties is listed here: https://developer.paypal.com/docs/checkout/advanced/customize/card-field-style/#link-supportedcssproperties

Test this example:

.payment_box.payment_method_ppcp-credit-card-gateway {
    border: 1px solid #6c6c6c; /* Adds a grey border */
    padding: 100px; /* Adds space inside the border */
    box-shadow: 0 0 0 1px #c0c0c0; /* Creates a subtle shadow outside the border */
    margin: 10px; /* Adds space around the outside of the box */
}

Let me know if you have further questions.

Kind regards,
Krystian

Apparently it was the Funnelkit checkout that wouldn’t let me edit it because the styling works in the normal woocommerce checkout. I’ll play around and see what i can do

Thank you

Hello @brankokf

You’re welcome.

If you have any more questions, please let us know, or you can mark this thread as resolved.

Kind regards,
Krystian

Is there a way to change the height of the “pay now” button loaded from paypal?

Hello @brankokf

Sorry for the late reply; I missed your message. Please tag my username next time so I receive a notification. We have dedicated code available on our GitHub, which can be used for limited customization of size and positioning. You can access the code here:?Customize PayPal Smart Buttons.

However, I should note that this code needs to be implemented by you, as it’s a custom theme. We officially support only default themes, and any customization beyond that would need to be handled on your end.

We appreciate your understanding, and we are here to help if you have any further questions or concerns.

Kind Regards,
Krystian