How to change color text of label

Hi @trungdavid,

To adjust the label color and make it more visible, please try adding the following code to your theme’s functions.php file:

add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    $stripe_params['blocksAppearance'] = (object) [
        'rules' => (object) [
            '.Label' => (object) [
                'fontWeight' => 'bold',
                'color' => 'blue' // You can use any color here
            ]
        ],
    ];
    return $stripe_params;
} );

// Clear transients
delete_transient( 'wc_stripe_appearance' );
delete_transient( 'wc_stripe_blocks_appearance' );

For further guidance on customizing your payment form’s appearance, you can also refer to this Stripe Customization guide.

I hope this helps, let us know if you have any more questions.

Hi @trungdavid,

I tested this on my test site and found that it works intermittently, depending on the theme and how your site is set up. Try using just CSS like this:

.p-FieldLabel.Label.Label--empty {
  color: black !important;
}

Add this to your additional CSS. It seems to work better when the label box loads quickly. If that doesn’t solve it, you can test the following code by adding it to your functions.php:

// Ensure that Stripe's appearance is properly configured
add_filter( 'wc_stripe_upe_params', function ( $stripe_params ) {
    // Modify the appearance of the Stripe elements
    $stripe_params['appearance'] = [
        'theme' => 'flat', // Optional, you can specify the theme here
        'variables' => [
            'colorText' => '#000000', // Set the text color to black
            'colorBackground' => '#ffffff', // Set the background color to white
            'colorPrimary' => '#0000FF', // Set the primary color to blue (for highlights)
        ],
        'rules' => [
            // Style the input fields (card number, expiration, etc.)
            '.Input' => [
                'fontSize' => '16px',
                'fontWeight' => 'bold',
                'color' => '#333333', // Dark color for input text
            ],
            // Style the labels (for the card fields like "Card Number")
            '.p-FieldLabel.Label' => [
                'color' => '#333333', // Dark gray color for the label
                'fontWeight' => '600', // Semi-bold labels
            ],
        ],
    ];

    return $stripe_params;
} );

If this still doesn’t work, it might be worth considering hiring an expert from Codeable.io to analyze your site setup and the classes in more detail.