Changing WooCommerce Checkout form input text CSS style

Question

I was working on my wordpress site when I noticed that the input text for WooCommerce's checkout page came out as italic.

How could I go about changing the style, font, etc? The theme I am running is called VAN by ThemeStudio. They've got a Typography option in their custom menu, however whatever changes I make there aren't reflected on the checkout page.

The webpage is: http://honestabe.ca/ininkk/shopink/ (add a product to cart and go to checkout…).

Any help would be greatly appreciated.

Thanks in advance.

Hey! Super sorry for being so late to reply! I was on vacation. Thank you for your answer; I'm testing it out right now so I hope it works! — AbrahamLN
It worked! I'm using the same method for future problems; thank you so much, Loic! — AbrahamLN

LoicTheAztec LoicTheAztec · Accepted Answer · 2016-07-05T23:45:28

Your problem is located in the woocommerce folder inside your "Van" active theme, within woocommerce.css file. Open this file with a code editor or directly with the wordpress editor (Appearance > Editor, then in woocommerce folder > woocommerce.css file).
Go to line 990 and you will find this:

.woocommerce form .form-row input.input-text, 
.woocommerce form .form-row textarea, 
.woocommerce-page form .form-row input.input-text, 
.woocommerce-page form .form-row text area {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #dcdcdc;
    padding: 14px 10px;
    font-family: 'Playfair Display';
    font-size: 12px;
    color: #7a7a7a;
    font-style: italic;
    letter-spacing: 1px;
    width: 100%;
    outline: none;
}

Change font-style: italic; by font-style: normal;

You are done…

You will certainly have to make other changes in that file. Now you know where you can do it.

Changing WooCommerce Checkout form input text CSS style

1 Answers