Commit f5c21ce1ce6 for woocommerce
commit f5c21ce1ce694a0dd643e99023dc65e79131b138
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Tue Mar 3 17:10:01 2026 +0000
Make checkout item quantity inherit theme colours and round if single-digit (#63007)
* Make checkout item quantity round and inherit theme colours
* Add changelog
diff --git a/plugins/woocommerce/changelog/wooprd-1447-update-item-count-in-checkout b/plugins/woocommerce/changelog/wooprd-1447-update-item-count-in-checkout
new file mode 100644
index 00000000000..099382c9fb6
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-1447-update-item-count-in-checkout
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Make checkout item quantity round and inherit theme colours
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
index f9c8c4fb930..9e46160bc79 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/style.scss
@@ -65,25 +65,27 @@
}
.wc-block-components-order-summary-item__quantity {
+ @include font-x-small-locked;
align-items: center;
- background: #fff;
- border: 2px solid;
- border-radius: 1em;
- box-shadow: 0 0 0 2px #fff;
- border-color: $universal-border-light;
- color: #000;
+ background: currentColor;
display: flex;
line-height: 1;
min-height: 20px;
- padding: 0 0.4em;
position: absolute;
justify-content: center;
min-width: 20px;
+ border-radius: 20px;
right: 0;
top: 0;
transform: translate(50%, -50%);
white-space: nowrap;
z-index: 1;
+
+ // The span containing the text should be padded, not the quantity container itself.
+ span {
+ padding: 0 0.4em;
+ color: var(--wp--preset--color--background, #fff);
+ }
}
.wc-block-components-order-summary-item__description {