woocommerce/plugins/woocommerce-blocks/docs/theming/cart-and-checkout.md

975 B

Cart and Checkout Blocks theming

Item quantity badge

The item quantity badge is the number that appears next to the image in the Order summary section of the Checkout block sidebar.

Order summary screenshot

By default, it uses a combination of black and white borders and shadows so it has enough contrast with themes with light and dark backgrounds. Themes can modify the colors with their own palette with a single CSS selector and four properties. For example:

.wc-block-components-order-summary-item__quantity {
	background: #f9f4ee;
	border-color: #4b3918;
	box-shadow: 0 0 0 2px #f9f4ee;
	color: #4b3918;
}
Order summary screenshot with custom styles for the item quantity badge