Style WC-Mini Cart buttons & Item Count BG

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;
}

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.

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;
}

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.

No problem. Glad to be of any help. :D