Can I customize the appearance of the payment fields?

The payment fields generated by WooPayments on your site’s checkout page are hosted on a separate PCI-compliant server. As a result, trying style these elements via custom CSS will not work as expected.

If you would like to modify the styling of the payment fields generated by WooPayments, you will need:

1. WooPayments version 7.3.0 or later.
2. Custom PHP, detailed here, which can be added via either:
   • Your theme’s functions.php file.
   • A plugin like Code Snippets.

Available variables to customize colors

↑ Back to top

You can set color properties for some dynamically rendered aspects of the payment elements through the use of variables.

Below is a table of the most commonly used variables.

Variable	Description
colorDanger	The color that outlines a payment field with invalid data.
colorPrimary	The color that outlines the active payment field.
colorText	The color of the placeholder text.

Since the layout of the payment fields is consistent, these variables apply to all rendered elements.

There are a number of other, less common variables available here.

Using a filter to customize variable colors

↑ Back to top

Once you have determined which variables you’d like to style, you can use the following filter to modify the appearance of the payment fields by replacing [VARIABLE] and [VALUE] with your desired modifications:

add_filter( 'wcpay_upe_appearance', function ( $appearance ) {
	$appearance->variables->{'[VARIABLE]'} = '[VALUE]';
	return $appearance;
} );

For example, if you wanted to change the outline color of a payment field with invalid data to cyan, you could us the following filter:

add_filter( 'wcpay_upe_appearance', function ( $appearance ) {
	$appearance->variables->{'colorDanger'} = '#00FFFF';
	return $appearance;
} );

Available rules to customize colors

↑ Back to top

You can change the text color associated with each of the payment fields by using rules to target specific classes. With WooPayments, there are three classes that can be customized:

• .Label targets the label for the payment fields.
• .Input targets information customers add to the fields.
• .Error targets error messages that may result from incorrect or incomplete information.

Since the layout of the payment fields is consistent, these classes apply to all rendered elements.

Class Name	States	Pseudo-Classes
.Label	--empty, --invalid
.Input	--empty, --invalid	:hover, :focus, :disabled, :autofill
.Error

Using a filter to customize rule colors

↑ Back to top

Once you have determined which classes to modify, you can use the following filter to modify the color of the payment fields by replacing [CLASS] and [VALUE] with your desired modifications:

add_filter( 'wcpay_upe_appearance', function ( $appearance ) {
	unset( $appearance->rules->{'[CLASS]'} );
	$appearance->rules->{'[CLASS]'} = [
		'color' => '[VALUE]',
	];

	return $appearance;
} );

For example, if you want to change the text users input to purple, you can use the following snippet:

add_filter( 'wcpay_upe_appearance', function ( $appearance ) {
	unset( $appearance->rules->{'.Input'} );
	$appearance->rules->{'.Input'} = [
		'color' => 'purple',
	];
	
	return $appearance;
} );

You can expand on this a bit using the states, pseudo-classes, and pseudo-elements. For example, if you’d like the text color to change from purple to blue if the value is invalid, you can include an additional rule:

add_filter( 'wcpay_upe_appearance', function ( $appearance ) {
	unset( $appearance->rules->{'.Input'} );
	$appearance->rules->{'.Input'} = [
		'color' => 'purple',
	];
	$appearance->rules->{'.Input--invalid'} = [
		'color' => 'blue',
	];
	
	return $appearance;
} );

Clearing transients

↑ Back to top

In order for these appearance filters to display, you may need to clear the wcpay_upe_appearance and wcpay_wc_blocks_upe_appearance transients. While there is an option in Status > Tools to clear the WooCommerce transients, this tool will not clear these specific WooPayments transients.

The wcpay_upe_appearance and wcpay_wc_blocks_upe_appearance transients are automatically cleared after 24 hours. However, you can force them to be cleared using three different methods:

1. Changing the site’s theme.
2. Updating the WooPayments plugin.
3. Executing the following PHP snippet once:

delete_transient( 'wcpay_upe_appearance' );
delete_transient( 'wcpay_wc_blocks_upe_appearance' );