Checkout Page

Hi @eraybel,

Without being able to see the HTML output of your site I’m provindg you this CSS that worked on my test site:

/* Uppercase text for city billing field in Checkout*/
.woocommerce-checkout .woocommerce-billing-fields #billing_city {
text-transform: uppercase;
}
/* Uppercase text for city shipping field in Checkout*/
.woocommerce-checkout .woocommerce-shipping-fields #shipping_city {
text-transform: uppercase;
}

To add custom CSS code navigate to WordPress Dashboard > Appearance > Customize > Additional CSS and add your CSS to the editor.

If it doesn’t work you would need to share a link to your site in order for us to generate the correct CSS code.

I hope this information is helpful to you.

Hello @rainfallnixfig
, thank you for your answer, but the css code you provided did not work, I wonder if it is because I am using my city list as a dropdown or because I am using a different plugin, it is blocking these CSS codes. Since I am working on my local computer, I cannot send you the URL of my website.

• This reply was modified 3 years, 4 months ago by eraybel.
• This reply was modified 3 years, 4 months ago by eraybel.

Hi @eraybel,

It is possible that you have a theme that has other/different CSS classes.

That said, you will want to use your browser’s inspect element tool on the citybilling/shipping fields to find the respective CSS classes. From there, you can target them with the CSS rule to transform text to uppercase:
text-transform: uppercase;

* Here are some ways to use the inspect element feature on different browsers: https://blog.devmountain.com/how-to-use-inspect-element-jump-into-what-makes-a-web-page-tick/

Thank you for your help. @abwaita
I don’t need to edit any CSS code. Friends who want to write cities in capital letters by going to the extension (your website/wp-content/plugins/woocommerce/i18n/states) can benefit from here

Thank you for your input, @eraybel!

Great! If you have any further questions, you can start a new thread.

Cheers.