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.

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.

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.

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

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.

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

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' );