[Resolved] Style WC-Mini Cart buttons & Item Count BG

[psychederik]

I’m a n00b and still trying to figure out how to style the “WooCommerce drop-down cart” and the “item count background color.” Left an below img as reference.

I’ve tried different bits of code I wrote after Inspecting and peeping it’s class name? Sorry, still not well adjusted to CSS terminology.

[Elvin]

Hi there,

If you want to change the background of the container and the total/subtotal, try this CSS:

div#wc-mini-cart {
    background-color: red;
    color: white;
}

For the RED THAI – 500G font color, try this:

#wc-mini-cart a:not(.button), #wc-mini-cart a.remove {
    color: white;
}

If it’s the color of the basket icon and the item counter on it, try this CSS:

.menu-bar-items a.shopping-bag.has-svg-icon {
    color: green;
}

[psychederik]

My apologies, I butchered my explanation as to what I needed.

1) I want to target each specific button in the dropdown cart (“View Cart” and “Checkout”). I want to give the ViewCart button a white-bg with blue text without effecting the Checkout button.

2) I also want to target the number indicated next to the basket and its background. In the image I posted, the “1” is pink and the circular background is “light grey” to the right of the cart/basket.

[Elvin]

For #1:

If it’s for both the buttons, try this CSS:

div#wc-mini-cart p.woocommerce-mini-cart__buttons.buttons a.button.wc-forward {
    background-color: green;
    color: pink;
}

If you want to style them individually, try this:

/* Minicart viewcart button */
div#wc-mini-cart p.woocommerce-mini-cart__buttons.buttons a[href*="/cart"] {
    background-color: green;
    color: pink;
}

/* Minicart checkout button */
div#wc-mini-cart p.woocommerce-mini-cart__buttons.buttons a[href*="/checkout"] {
    background-color: aqua;
    color:white;
}

For #2:

This CSS I’ve provided works:

.menu-bar-items a.shopping-bag.has-svg-icon {
    color: green;
}

But if just the counter and rounded background, try this instead:

.cart-contents > span.number-of-items {
    color: white;
    background-color: red;
}

[psychederik]

Beautiful. Yes, all of the CSS you’ve sent me works as intended. I was looking to only target the number of items in the basket and not the basket itself and the last bit of code you sent achieves perfectly. Thank you for your help.

[Elvin]

No problem. Glad to be of any help. 😀

[Author]

Posts