Cart Page Styling

[meltdown]

I can’t seem to find how to style a few different items, especially on the /cart/ checkout pages – Please see attached image.

#1: The “Feel free to call us” text in the breadcrumb

#2: Shopping Cart > Checkout details > Order Complete

#3: “Update cart” and “Apply coupon”

Thank you

Attachments:

You must be logged in to view attached files.

[Kieran]

Hi @meltdown,

To answer your question in more detail you’d have to be clearer on what it is you wanted to achieve with points 2 and 3. However if you’re comfortable with CSS please see below.

1. Go to Theme Options > Title / Breadcrumb Section > Scroll down to “Title/Breadcrumb Section”. You’ll see that you’re using an em wrap for the piece of text. To make the text appear like the rest of the text on your site you can remove the following class="muted".

2. You can alter the appearance of the checkout steps by adding the following with your own custom CSS to your child theme style.css

COPY CODE

.woocommerce .checkout-steps {
    background-color: darkmagenta;
    color: #ffffff;
}

3. As before you can edit the following css and add to your child theme style.css
Apply Coupon

COPY CODE

.coupon input.button:nth-of-type(2) {
    background-color: darkmagenta;
    color: white;
}

Update Cart

COPY CODE

.totals-wrap input.button:nth-of-type(1) {
    background-color: darkmagenta;
    color: #ffffff;
}

If you need more specific CSS let me know what you’re after and I’ll update it for you.

[meltdown]

Perfect – Thank you. I’ve marked this as Resolved 🙂

[Kieran]

You’re welcome @meltdown, glad I could help 🙂

[Author]

Posts