Cart widget content showing strangely

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

Or as an alternative, this PHP snippet.

add_action('wp_enqueue_scripts', function() {
	$theme = blocksy_get_wp_parent_theme();

	wp_enqueue_style(
		'ct-legacy-mini-cart-styles',
		blocksy_cdn_url(
			get_template_directory_uri() . '/static/bundle/cart-header-element-lazy.min.css'
		),
		[],
		$theme->get('Version')
	);
});

Please do not implement both. Just one is sufficient.

Hope this clears things up!

Thanks.

OK, thanks for your answer. If it may not work in the future, I will try to find and alternative.

You’re welcome, @li-an! ???♂?