Add checkout validation styles to a third party or custom theme

Posted on
5/5 - (298 votes)

You need to add this CSS to your child theme’s style.css file or to your customizers’ “Additional CSS” section. Please don’t add custom code directly to your parent theme’s style.css file as this will be wiped entirely when you update the theme.

.form-row.woocommerce-invalid .chzn-single,
.form-row.woocommerce-invalid .chzn-drop,
.form-row.woocommerce-invalid input.input-text,
.form-row.woocommerce-invalid select {
    border:1px solid red;
}
.form-row.woocommerce-validated .chzn-single,
.form-row.woocommerce-validated .chzn-drop,
.form-row.woocommerce-validated input.input-text,
.form-row.woocommerce-validated select {
    border:1px solid green;
}