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.

Thank you for your suggestion. I’ve tried implementing the code both with the Code Snippets plugin and directly in my theme’s functions.php file, but unfortunately, it’s still not working. Do you have any additional suggestions or insights that might help resolve this issue?

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.

I’m using the code that Mahfuzur provided, and after one day, it somehow started working. Thank you, Mahfuzur and Moses, for your help. ??