Can I customize the appearance of the payment fields?

The payment fields generated by WooPayments on the checkout page are hosted on a separate PCI-compliant server. As a result, trying to 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:

• WooPayments version 7.3.0 or later, and…
• Some custom PHP code, added via either:
  • Your theme’s functions.php file, or…
  • A plugin like Code Snippets.

The following example snippet changes the rounding applied to the form fields.

add_filter( 'wcpay_upe_appearance', function ( $appearance ) {
	$appearance->variables->{'borderRadius'} = '20px';
	return $appearance;
} );

Here’s a before and after image of the result:

The table below shows the most commonly used variables.

There are a number of other, less common variables listed in Stripe’s documentation.

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