Paypal Debit & Credit Option Not Themed

Hi there, hoping to get some help.

The PayPal debit & credit option at checkout is not respecting the theme layout. Please let me know if there is anything you need.

Could I please get some assistance? Thank you!

Attachments:

You must be logged in to view attached files.

I read here that the plugin has changed the CSS for the styled fields and unable to pull directly from the theme: https://wordpress.org/support/topic/issue-with-card-fields-since-2-5/

However, the new fields can still be styled as here: https://developer.paypal.com/docs/checkout/advanced/customize/card-field-style/

Is it possible using these styles to get it looking right?

Hello,

Is there any chance that you could give me access to the dashboard area so I can have a look at the settings on your website, please?

Kind Regards

No problem mate, as below in the private content! Thanks.

Hello,

Yep, the syles issue in this case is related to the plugin. Did you try to disable the new card fields feature as the plugin support described https://gyazo.com/ae6b7abd14014def70ec0906415e2e9e ?

Kind Regards

I tried installing the plugin but it removed the feature completely… I’m not too sure how to use the code for add_filter there. Do you know where I could put that?

Hello,

Try to define that filter in the functions.php file in your child theme.

Clear the cache and recheck the issue.

Kind Regards

Thanks Luke. Unfortunately, nothing has changed when putting it in the functions.php file. Not too sure what else to try at this stage.

Hello,

Add the code below to the “Global custom CSS” area in Theme Settings -> Custom CSS. That’s all we can do as the form from the plugin is situated in the iframe which we do not have access to.

#wc-ppcp-credit-card-gateway-cc-form input {
	line-height: 1;
	padding-block: calc((var(--wd-form-height) - 14px) / 2);
}

#ppcp-hosted-fields .ppcp-dcc-order-button {
	float: none;
	width: 100%;
	padding: 5px 28px;
	min-height: 48px;
	font-size: 14px;
	border-radius: var(--btn-accented-brd-radius);
	color: var(--btn-accented-color);
	box-shadow: var(--btn-accented-box-shadow);
	background-color: var(--btn-accented-bgcolor);
	text-transform: var(--btn-accented-transform, var(--btn-transform));
	font-weight: var(--btn-accented-font-weight, var(--btn-font-weight));
	font-family: var(--btn-accented-font-family, var(--btn-font-family));
	font-style: var(--btn-accented-font-style, var(--btn-font-style))
}

#ppcp-hosted-fields .ppcp-dcc-order-button:hover {
	color: var(--btn-accented-color-hover);
	box-shadow: var(--btn-accented-box-shadow-hover);
	background-color: var(--btn-accented-bgcolor-hover)
}

#ppcp-hosted-fields .ppcp-dcc-order-button:active {
	box-shadow: var(--btn-accented-box-shadow-active);
	bottom: var(--btn-accented-bottom-active, 0)
}

Kind Regards

Hi Luke, that is brilliant. Very happy with how the CSS has worked. Thank you for taking your time to help with this issue!

Hello,

Happy to assist! If you have any other questions, please don’t hesitate to ask.

Have a fantastic day!

Kind Regards

[Author]

Posts