Commit 847115774fe for woocommerce
commit 847115774fe9c0a48ad02c4081a733da8d08ae37
Author: Mike Jolley <mike.jolley@me.com>
Date: Thu Feb 26 13:15:55 2026 +0000
Update cart, checkout, and mini-cart block item spacing to improve clarity (#63241)
* Standardise spacing between cart item data
* Other gaps on checkout
* Add changefile(s) from automation for the following project(s): woocommerce
* Adjust checkout item name size
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/63241-wooprd-1445-rework-spacings-between-information-elements b/plugins/woocommerce/changelog/63241-wooprd-1445-rework-spacings-between-information-elements
new file mode 100644
index 00000000000..a4bd519139f
--- /dev/null
+++ b/plugins/woocommerce/changelog/63241-wooprd-1445-rework-spacings-between-information-elements
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Update cart, checkout, and mini-cart block item spacing to improve clarity.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
index b759f53b80c..a125901d08a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
@@ -31,14 +31,12 @@ table.wc-block-cart-items {
}
}
.wc-block-cart-items__row {
- .wc-block-cart-item__wrap > * {
- margin-bottom: $gap-smaller * 1.25;
- }
-
- .wc-block-cart-item__wrap > *:last-child {
- margin-bottom: 0;
+ .wc-block-cart-item__wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: $gap-smallest;
}
-
.wc-block-cart-item__image img {
width: 100%;
margin: 0;
@@ -55,9 +53,19 @@ table.wc-block-cart-items {
flex-wrap: wrap;
}
+ > :empty {
+ display: none;
+ }
+
.price {
display: flex;
align-items: center;
+ flex-wrap: wrap;
+ gap: $gap-smallest;
+
+ > * {
+ margin: 0;
+ }
&[hidden] {
display: none;
@@ -93,7 +101,7 @@ table.wc-block-cart-items {
display: block;
max-width: max-content;
line-height: 1.4;
- margin-bottom: 5px;
+ font-weight: 500;
&[hidden] {
display: none;
@@ -102,7 +110,7 @@ table.wc-block-cart-items {
.wc-block-cart-item__total {
@include font-small-locked;
text-align: right;
- line-height: 1.8;
+ line-height: 1.4;
}
&.is-disabled {
@@ -152,7 +160,6 @@ table.wc-block-cart-items {
grid-row-start: 2;
vertical-align: bottom;
padding-right: $gap;
- align-self: end;
padding-top: 0;
}
.wc-block-cart-item__total {
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 d3bd823257c..f9c8c4fb930 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
@@ -46,8 +46,10 @@
.wc-block-components-order-summary-item__image,
.wc-block-components-order-summary-item__description {
- display: table-cell;
- vertical-align: top;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: $gap-smallest;
}
.wc-block-components-order-summary-item__image {
@@ -93,8 +95,7 @@
p,
.wc-block-components-product-metadata {
- line-height: 1.375;
- margin-top: $gap-smallest;
+ line-height: 1.4;
}
}
@@ -104,6 +105,10 @@
flex-wrap: wrap;
gap: $gap-smaller;
align-items: center;
+
+ > :empty {
+ display: none;
+ }
}
.wc-block-components-order-summary-item__individual-prices {
@@ -121,10 +126,7 @@
display: flex;
flex-direction: column;
align-items: flex-end;
-
- .wc-block-components-sale-badge {
- margin-top: $gap-smallest;
- }
+ gap: $gap-smallest;
}
.wc-block-components-order-summary-item__total-price {
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss
index 600944e6e7b..437e2fa2026 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-details/style.scss
@@ -1,11 +1,6 @@
// Extra class added for specificity so styles are applied in the editor.
.wc-block-components-product-details.wc-block-components-product-details {
@include font-x-small-locked;
- margin: 0.5em 0;
-
- &:last-of-type {
- margin-bottom: 0;
- }
}
.wc-block-components-product-details__name,
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss
index 1d34098aff9..706409c731d 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/product-metadata/style.scss
@@ -1,5 +1,8 @@
.wc-block-components-product-metadata {
@include font-small-locked;
+ display: flex;
+ flex-direction: column;
+ gap: $gap-smallest;
.wc-block-components-product-metadata__description > p,
.wc-block-components-product-metadata__variation-data {
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
index 1f8be750361..abe7c2b70d9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/shipping-rates-control-package/style.scss
@@ -51,6 +51,7 @@
flex: 1;
display: flex;
flex-direction: column;
+ gap: $gap-smallest;
.wc-block-components-shipping-rates-control__package-header:last-child {
margin-bottom: 0;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/style.scss
index 74c1d6d404f..4e2e2e5c31b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/product-price/style.scss
@@ -20,6 +20,10 @@
display: none;
}
+ > :empty {
+ display: none;
+ }
+
.wc-block-all-products .wc-block-components-product-price {
margin-bottom: $gap-small;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/skeleton/patterns/cart-line-items/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/skeleton/patterns/cart-line-items/style.scss
index 114502d1cba..dba8a0697cc 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/skeleton/patterns/cart-line-items/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/skeleton/patterns/cart-line-items/style.scss
@@ -10,6 +10,9 @@
.wc-block-components-order-summary {
.wc-block-components-skeleton--cart-line-items-checkout {
+ .wc-block-components-order-summary-item__image {
+ margin-top: $gap-smallest;
+ }
.wc-block-components-order-summary-item__description {
flex-grow: 1;
.wc-block-components-skeleton__element {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
index 65e0522f563..fcf49c239f1 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
@@ -94,10 +94,7 @@
display: flex;
flex-direction: column;
align-items: flex-end;
-
- .wc-block-components-sale-badge {
- margin-top: $gap-smallest;
- }
+ gap: $gap-smallest;
}
.wc-block-components-sidebar-layout.wc-block-cart {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
index 40ee7a55a5b..a693ae25a8a 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/inner-blocks/checkout-order-summary-block/style.scss
@@ -57,6 +57,9 @@
}
.wc-block-components-product-name {
+ @include font-small-locked;
+ display: block;
+ max-width: max-content;
margin: 0;
font-weight: 500;
}
diff --git a/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss b/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss
index a40f778b08c..0794913c155 100644
--- a/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/components/totals/item/style.scss
@@ -4,6 +4,7 @@
width: 100%;
box-sizing: border-box;
align-items: center;
+ gap: $gap-smallest;
}
.wc-block-components-totals-item__label {