Styling to WooCommerce Checkout fields

Hello,

Could you share a link to your checkout page?
If you’d like to learn about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

Thank you for your quick response.

Here’s the link to the checkout page https://tanekawalker.com/checkout/

I think I’m good at CSS ?? but sometimes it gets difficult in some plugins or themes to point the correct element. On the woocommerce checkout page, I want to change the text color of all the label texts in customer details form like ‘First name’, ‘Last Name’ etc including selectors and their input field text color. How can I do this?

Hi @faizan1122

You can try the CSS code below to see if it helps:

.woocommerce-checkout label {color:#119900;}

.woocommerce-checkout form input[type="text"] {
 color: #119900 !important;
}

Thank you so much. It works perfectly for label and input fields.

I also want to change the color of the country drop-down options text on the checkout page. Can you please tell me the CSS code for this?

Kind Regards
Faizan

Hi @faizan1122!

It looks like you’re already using something customized for that. You can try to check your Custom CSS area for something similar of:

.select2-container--open .select2-dropdown--below {
  color: black !important;
} 

Chances are that this has been added to your: Appearece > Customize > CSS.

You can try to find it and then change the color value from black to one that fits your needs!

Let us know how it goes! Thank you!

Yes. I had added that CSS code.

Thank you for your help!

Kind Regards
Faizan

Awesome! ??

I’m going to mark this as resolved – we’ll be here if you have any other questions regarding this!

All the best,