[Resolved] styling ‘woo mini cart’ block

[Stephen]

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

[Fernando]

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.

[Stephen]

Hi – I’ll try that instead.

Thank you

[Stephen]

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

[Fernando]

Glad you resolved the issue!

[Author]

Posts