How to Change Sublabels for the Credit Card Field

Overview

Would you like to change sublabels on your form Credit Card fields? You can change the sublabels that appear below the fields on your form. In this tutorial, we’ll show you the basics of how you can change the sublabels using a PHP code snippet.

In WPForms, the Credit Card field displays two different fields:

  • Card Number
  • Name on Card

Implementation Options

It’s important to note that the below code snippet will only change the sublabels on the Credit Card field if using Stripe Credit Card Field (Recommended) for the Payment Collection Type.

Payment Collection Type

Copy this code to your site and remember to change the text to what you would like to display.

1) Single Language

/**
 * Customize Stripe credit card field properties.
 *
 * @link https://wpforms.com/developers/how-to-change-sublabels-for-the-credit-card-field
 * 
 */
function wpf_dev_creditcard_field_properties( $properties, $field, $form_data ) {
	
	// Change sublabel values
	$properties['inputs']['number']['sublabel']['value'] = 'CC #';
	$properties['inputs']['name']['sublabel']['value'] = 'Name on the Card';
	
	return $properties;
}
add_filter( 'wpforms_field_properties_stripe-credit-card' , 'wpf_dev_creditcard_field_properties', 10, 3 );

2) Multi-Lingual

/**
 * Customize Stripe credit card field properties.
 *
 * @link https://wpforms.com/developers/how-to-change-sublabels-for-the-credit-card-field
 * 
 */
function wpf_dev_creditcard_field_properties( $properties, $field, $form_data ) {
	
	// Change sublabel values
	$properties['inputs']['number']['sublabel']['value'] = __( 'CC #' );
	$properties['inputs']['name']['sublabel']['value'] = __( 'Name on the Card' );
	
	return $properties;
}
add_filter( 'wpforms_field_properties_stripe-credit-card' , 'wpf_dev_creditcard_field_properties', 10, 3 );

and now you've changed the sublabels on the credit card field

And that’s it! You’ve now successfully changed the sublabels. Would you like to change the sublabels of the Name field? Take a look at our article on How to Change Sublabels for the Name Field.

Filter Reference: wpforms_field_properties

FAQ

Q: How can I use this on the old legacy credit card?

A: If you are using the WPForms Credit Card Field (Legacy), then you would use this code snippet.

Single Language

function wpf_dev_field_properties_credit_card( $properties, $field, $form_data ) {
	
	// Change sublabel values
	$properties['inputs']['number']['sublabel']['value'] = 'Credit Card Number';
	$properties['inputs']['cvc']['sublabel']['value'] = 'Security Code';
	$properties['inputs']['name']['sublabel']['value'] = 'Name on Card';
	$properties['inputs']['month']['sublabel']['value'] = 'Expiration Date';
	
	return $properties;
}
add_filter( 'wpforms_field_properties_credit-card' , 'wpf_dev_field_properties_credit_card', 10, 3 );

Multi-Lingual

function wpf_dev_field_properties_credit_card( $properties, $field, $form_data ) {
	
	// Change sublabel values
	$properties['inputs']['number']['sublabel']['value'] = __( 'Credit Card Number' );
	$properties['inputs']['cvc']['sublabel']['value'] = __( 'Security Code' );
	$properties['inputs']['name']['sublabel']['value'] = __( 'Name on Card' );
	$properties['inputs']['month']['sublabel']['value'] = __( 'Expiration Date' );
	
	return $properties;
}
add_filter( 'wpforms_field_properties_credit-card' , 'wpf_dev_field_properties_credit_card', 10, 3 );