Change checkout font colour

Hi, I want to change the colour of font used for billing/shipping data populated by customer on checkout page.
Seems that it’s not affected by changes made to “text font” and there’s no mention of it in advanced typography.
The ideal outcome would be as follows – placeholder font keeps it’s colour and input text font colour is changed.
Thanks.

Hello,

You can use the below CSS code in Theme Settings >> Custom CSS >> Global Custom CSS for changing the font color using inside the checkout page:

.woocommerce-checkout .woocommerce label 
{
color:red;
}
.woocommerce-checkout  .woocommerce span
{
color:red;
}
.woocommerce-checkout .woocommerce th,td,h3
{
color:red;
}

I used the red color just to set an example for you. You can use any other color.

Best Regards.

WHen I use provided CSS a lot of other text on the page is affected. I want to be affected only text typed into address fields.

Hello,

Could you please share the screenshot by pointing out those specific sections in the checkout page. so I can provide you CSS code accordingly.

Do you only want to change the font color of the address field only?
Screenshot: https://jmp.sh/9himz4U

Best Regards.

I want to change font colour for text entered by the buyer into address fields. So you pointed it correctly on your screenshot. At the same time I want placeholder text font colour to stay as it is.

Hello,

To change the text font color which will entered by the buyer in the address field. You can use the below CSS code in Theme Settings>> Custom CSS >> Global Custom Css:

.woocommerce-checkout  .woocommerce #billing_address_1, #billing_address_2 
{
color:red;
}

I have test this code in your site and this is working fine.

Best Regards.

This way only text from “Street address” field is affected and I want to have the same font for all address input fields.

Hello,

There is only one address field in your checkout page and which is “Street Address” and for that I have provided you CSS code which works fine.

I did not see any other address field in the checkout page. Could you please share screenshot by pointing out those fields for which you need the same styling. So I can provide you custom code accordingly.

Best Regards.

I’ve meant all the information entered by buyer: country, city, zip code, street address, name, email, etc.
Maybe it is possible to change the appearance of this text via some selector in advanced typography?

Hello,

As you want to change the font size of all the input fields inside the check out page. It requires customization and this is beyond our limitations and support policy.

Because with the theme options there is no such option to specifically change the font styling of checkout fields only.

Best Regards.

[Author]

Posts