Archived topic
styling 'woo mini cart' block
4 replies · Started by Stephen on July 31, 2022
Hi, Ive put the little Gutenberg "woo mini cart" block after navigation in my header and it works OK.
I've given it a class in additional CSS classes - mini-cart-hook
Ive tried styling it as below but my CSS styling does not work ?
Am I getting something wrong ?
.mini-cart-hook {
background-color: grey;
font-size: 35px;
}
or
.mini-cart-hook a {
background-color: grey;
font-size: 35px;
}
Thank you
Hi Stephen,
It seems like there’s an issue with that Block in terms of adding CSS classes. The additional CSS isn’t being added. This is a WooCommerce Block though.
What we can do is add the Mini Cart Block within a Container Block, and add the CSS class to the Container Block instead.
Hi - I'll try that instead.
Thank you
For anyone who wants to style the woocommerce mini basket block you can use class - wc-block-mini-cart
/* style header mini basket */
.wc-block-mini-cart {
font-size: 19px;
background: #e8e8e8;
}
.wc-block-mini-cart :focus {
background: #dbdbdb;
color: black;
}
Glad you resolved the issue!
