Increase font size in checkout

Support
#1

Hi there,

I’m using Pro on my site with the Checkout Manager extension. The font size in my checkout, where the user enters their details, is tiny. I’ve been through the support forums and searched the web and as yet I’ve not been able to find a solution to increasing the size. I’m sure it’s a simple CSS thing, but I’ve not been able to find the hooks for the form fields to increase the size.

Any help would be greatly appreciated. Thank you.

Sarah.

#2

Hi Sarah,

Is this your website: https://www.photooncake.co.uk/shop/?

It seems like under the construction mode.

Would you mind providing us with your admin account so we can take a closer look?

Thanks.

#3

Hi Thai,

Thanks for the message and the quick response. Oh yes, it’s in under construction mode, sorry. Here are the details you’ll need:

Thank you very much.

#4

Hello @ladybirdenterprises,

Can you please confirm the login details as I am unable to login using the share credentials? I the mean time please try adding following CSS and let us know how it goes:

.woocommerce-account form, .woocommerce-checkout form label {font-size: 18px;}

Thanks.

#5

Sorry about that, please try these instead:

I’m afraid that your initial suggestion hasn’t worked. But thank you for offering up a solution so quickly.

#6

Hello @ladybirdenterprises,

Thanks for confirming the login details. This one worked. :slight_smile:

Actually previous CSS code that I shared will increase the font size of labels. For ex https://www.screencast.com/t/caDqs5LN

Sorry that I misinterpreted the question. Please add following CSS to change the font size of text entered in text boxes which I believe that’s what you looking for:

.woocommerce-account form select, .woocommerce-account form textarea, .woocommerce-account form input[type="tel"], .woocommerce-account form input[type="text"], .woocommerce-account form input[type="email"], .woocommerce-account form input[type="password"], .woocommerce-checkout form select, .woocommerce-checkout form textarea, .woocommerce-checkout form input[type="tel"], .woocommerce-checkout form input[type="text"], .woocommerce-checkout form input[type="email"], .woocommerce-checkout form input[type="password"] {font-size: 20px;}

So the final output would look like https://www.screencast.com/t/WFYXwNCe

Let us know how it goes.

Thanks.

1 Like
#7

Good morning Prasant,

This has worked beautifully, just what I needed. Thank you very much. I only have one last query. Is it possible to do the same and increase the font size of the ‘Coupon Code’ box in the cart at all? This is smaller than the ones we’ve now increased in the checkout.

Thanks again.

Sarah.

#8

Hello @ladybirdenterprises,

Yes, of course. You can increase the size of coupon text box in cart page. To do that please use following CSS:

.woocommerce .cart .actions .coupon input[type="text"] {font-size: 20px;}

Let us know how it goes.

Thanks.

1 Like
#9

Perfect, thank you so much Prasant for your help, it all looks just how I need it now. Have a great day!

#10

You’re most welcome.