Docs

[bambooinn]

dear Theme X,

could you help me with some CSS of woocommerce checkout page, the fonts in the input box is too small and not white (enough).

the site:

http://dev.bamboo-inn.nl/shop/catering/catering-menu-1/?add-to-cart=1358&quantity=20

You can then click on ‘checkout’, and when asked for filling in the details, the fonts are not good (I couldn’t guess what CSS I had to use… ).

(attachement: for instance the box with the address has examples what to fill in, those text (straat + huisnummer) are all to difficult to read).

Thanks!

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.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"] {
    color: #fff;
    font-size: 18px;
}
.woocommerce-invalid input {
    background-color: #d47979;
}
.woocommerce-validated input {
    background-color: #56af56;
}

Hope it helps 🙂

[bambooinn]

Hello,

thanks for the quick reply. I input the CSS. While I can now tweak the validated input, the ‘original’ input is still ‘small’ letters.

So,

1) validated input, it changes

2) the original input remain ‘small’.

Help?

[Christian]

Please add !important like

    color: #fff !important;
    font-size: 18px !important;

I don’t see the CSS being implemented though. It could be that you haven’t copied it completely or there’s a syntax error in your CSS. Please check.

Thanks.

[bambooinn]

Hi

Thanks, checked css, yes was an error in the CSS, I used the wrong commenting function. But I had to add the important to the validated output, before it take it. So for future references, the correct working one (for my site) is:

.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"] {
    color: #fff;
    font-size: 18px;
}
.woocommerce-invalid input {
    background-color: #d47979;
}
.woocommerce-validated input {
    background-color: #56af56 !important;
}

[Jade]

Thanks for sharing.

🙂

[Jade]

Thanks for sharing.

🙂

[Author]

Posts