Styling the Woocommerce Cart and Checkout

[Tim845]

Hi there - We would like to alter the cart and checkout page on our site. https://www.mitegen.com/ Most of these changes relate to styling or wording.

For example, on our checkout we would like to change the capitalization for the label Email address *. In addition, we would like to eliminate the fuzzy dots that appear under the asterisk. See screenshot.

Searching through the forum I found a few posts such as https://theme.co/apex/forum/t/cart-and-checkout-styling/45833 and https://theme.co/apex/forum/t/changing-cart-and-check-out-elements/48110/2

That second post appears to be the one I want to pay attention to. What we’ll need to do is add custom CSS as described in the 2nd post, correct?

Our Woocommerce site using Theme X version 6.5.5 and Cornerstone 4.0.3. It also has a customized child theme. We are using renew stack.

Thanks
Tim

[ruenel]

Hello Tim,

Thank you for the very detailed information.

Do you want something like this?

If that is the case, simply add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

abbr[title] {
    text-decoration: none;
}

.woocommerce label {
    text-transform: capitalize
}

Please let us know if this works out for you.

[Tim845]

Hi @RueNel - I added that code to our development site. Unfortunately it did not change the styling. I have sent the link to the development site via a secure note.

Thanks
Tim

[christian]

Hey Tim,

Upon checking your checkout page, I see that the labels are now capitalized.

The first code block with the selector abbr[title] should work. However, there are lots of errors in your custom CSS preventing the code provided to work. Please fix the CSS errors and the code should work. You can use CSS validation sites like http://csslint.net/ to guide you in fixing the errors. The usual CSS mistake is missing a curly brace pair.

If you’re not familiar with CSS though, you need to hire a CSS developer as we do not fix custom code as part of our theme support.

Thanks.

[Tim845]

@christian_y - Thanks, I’ll contact our developer about those errors. Thanks Tim

[ruenel]

You are most welcome Tim!