Hello @li-an
That would actually be correct, as this is the legacy cart widget which is not supported anymore. It wouldn’t be recommended to use it as it can be dropped by WooCommerce at any point in time.
You can bring its CSS back with a snippet, but it is still in the unsupported state. CSS goes as follows –
.woocommerce-mini-cart {
position: relative;
}.woocommerce-mini-cart li {
position: relative;
z-index: 1;
}
.woocommerce-mini-cart .remove {
position: absolute;
z-index: 2;
inset-inline-end: 0;
width: 11px;
height: 11px;
line-height: 11px;
--theme-icon-size: 11px;
--theme-icon-color: currentColor;
--theme-link-initial-color: var(--theme-text-color);
}
.woocommerce-mini-cart ~ .buttons .button:hover {
color: var(--theme-button-text-hover-color);
}
.woocommerce-mini-cart__total {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
padding-top: var(--mini-cart-items-spacing, 20px);
margin-bottom: var(--mini-cart-items-spacing, 20px);
border-top: 1px dashed var(--mini-cart-divider-color, rgba(0, 0, 0, 0.07));
}
.woocommerce-mini-cart__buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 15px;
margin: 0;
padding-top: var(--mini-cart-items-spacing, 20px);
border-top: 1px dashed var(--mini-cart-divider-color, rgba(0, 0, 0, 0.07));
}
.woocommerce-mini-cart__buttons > * {
grid-column: var(--gridColumn, 1/-1);
}
.woocommerce-mini-cart__buttons .button.wc-forward {
--gridColumn: span 1;
}
.woocommerce-mini-cart li,
.woocommerce-mini-cart__total,
.woocommerce-mini-cart__empty-message {
color: var(--theme-text-color);
}
Hope this clears things up!
Thanks.