Commit 32b175f11c9 for woocommerce
commit 32b175f11c9217dc3eee97486b5b42774e5ec4b2
Author: Alefe Souza <contact@alefesouza.com>
Date: Thu Sep 10 00:19:22 2026 -0300
Cart & Checkout: fix the order summary width and collapse to one column sooner (#68363)
diff --git a/plugins/woocommerce/changelog/65764-checkout-order-summary-breakpoint b/plugins/woocommerce/changelog/65764-checkout-order-summary-breakpoint
new file mode 100644
index 00000000000..ae91b2fac7a
--- /dev/null
+++ b/plugins/woocommerce/changelog/65764-checkout-order-summary-breakpoint
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Cart and Checkout blocks: give the order summary a fixed 360px column and hold the single-column layout until there is room for both columns, so mid-range viewports are no longer cramped.
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
index 4e25a60c9c2..0238c2b4e19 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_mixins.scss
@@ -308,25 +308,25 @@ $fontSizes: (
// we're measuring the width of the container, not the viewport
// because in the editor, the block can be viewed as on mobile, desktop and tablet in the same viewport
// .wp-block-woocommerce-checkout and .wp-block-woocommerce-cart are the containers
-// Large: > 700px
+// Large: > 920px
// Medium: > 520px
// Small: > 400px
// Mobile: <= 400px
@mixin cart-checkout-large-container {
- @container (min-width: 700px) {
+ @container (min-width: 920px) {
@content;
}
}
@mixin cart-checkout-below-large-container {
- @container (max-width: 699px) {
+ @container (max-width: 919px) {
@content;
}
}
@mixin cart-checkout-medium-container {
- @container (min-width: 520px) and (max-width: 699px) {
+ @container (min-width: 520px) and (max-width: 919px) {
@content;
}
}
diff --git a/plugins/woocommerce/client/blocks/assets/css/abstracts/_variables.scss b/plugins/woocommerce/client/blocks/assets/css/abstracts/_variables.scss
index f11324d9ea4..c43c7735f83 100644
--- a/plugins/woocommerce/client/blocks/assets/css/abstracts/_variables.scss
+++ b/plugins/woocommerce/client/blocks/assets/css/abstracts/_variables.scss
@@ -10,6 +10,9 @@ $gap-small: 1.5 * $grid-unit; // 12px
$gap-smaller: 1 * $grid-unit; // 8px
$gap-smallest: 0.5 * $grid-unit; // 4px
+// Width of the cart and checkout order summary column.
+$cart-checkout-sidebar-width: 360px;
+
// Standard border radius for forms.
$universal-border-radius: 4px;
$universal-translucent-border-color: color-mix(in srgb, currentColor 30%, transparent);
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/sidebar-layout/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/sidebar-layout/style.scss
index 4e76035bb64..dd173927cf6 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/sidebar-layout/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/sidebar-layout/style.scss
@@ -1,6 +1,7 @@
.wc-block-components-sidebar-layout {
display: flex;
flex-wrap: wrap;
+ column-gap: $gap-largest;
margin: 0 auto $gap;
position: relative;
@@ -14,17 +15,17 @@
.wc-block-components-main {
box-sizing: border-box;
+ flex: 1 1 0%;
margin: 0;
- // ~1060px is the default width of the content area in Storefront.
- padding-right: math.percentage(math.div($gap-largest, 1060px));
- width: 65%;
+ // Lets the column shrink past its content, so the sidebar stays beside it.
+ min-width: 0;
}
}
.wc-block-components-sidebar {
box-sizing: border-box;
- padding-left: math.percentage(math.div($gap-large, 1060px));
- width: 35%;
+ flex: 0 0 $cart-checkout-sidebar-width;
+ width: $cart-checkout-sidebar-width;
.wc-block-components-panel > h2 {
@include font-size(regular);
@@ -37,12 +38,10 @@
flex-direction: column;
margin: 0 auto $gap;
- .wc-block-components-main {
- padding: 0;
- width: 100%;
- }
+ // flex-basis sizes along the main axis, which is vertical here, so reset it.
+ .wc-block-components-main,
.wc-block-components-sidebar {
- padding: 0;
+ flex: none;
width: 100%;
}
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/hooks/use-container-queries.ts b/plugins/woocommerce/client/blocks/assets/js/base/hooks/use-container-queries.ts
index f9e953746ed..0f65c9ccc9c 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/hooks/use-container-queries.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/base/hooks/use-container-queries.ts
@@ -9,6 +9,8 @@ import { useResizeObserver } from '@wordpress/compose';
* https://github.com/WordPress/gutenberg/tree/master/packages/viewport#usage
* Values are also based on those breakpoints minus ~80px which is approximately
* the left + right margin in Storefront with a font-size of 16px.
+ * Keep in sync with the `cart-checkout-*-container` mixins in
+ * assets/css/abstracts/_mixins.scss.
* _Note: `useContainerQueries` will return an empty class name `` until after
* first render_
*
@@ -33,7 +35,7 @@ export const useContainerQueries = (): [ React.ReactElement, string ] => {
const [ resizeListener, { width } ] = useResizeObserver();
let className = '';
- if ( width > 700 ) {
+ if ( width > 920 ) {
className = 'is-large';
} else if ( width > 520 ) {
className = 'is-medium';
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 fcf49c239f1..40f91880408 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/style.scss
@@ -151,16 +151,17 @@
.wp-block-woocommerce-filled-cart-block {
display: flex;
flex-wrap: wrap;
+ column-gap: $gap-largest;
margin: 0 auto $gap;
position: relative;
}
+ // Mirrors the loaded layout in sidebar-layout/style.scss.
.wp-block-woocommerce-cart-items-block {
box-sizing: border-box;
+ flex: 1 1 0%;
margin: 0;
- // ~1060px is the default width of the content area in Storefront.
- padding-right: math.percentage(math.div($gap-largest, 1060px));
- width: 65%;
+ min-width: 0;
min-height: 10em;
}
@@ -173,9 +174,9 @@
.wp-block-woocommerce-cart-totals-block {
box-sizing: border-box;
+ flex: 0 0 $cart-checkout-sidebar-width;
margin: 0;
- padding-left: math.percentage(math.div($gap-large, 1060px));
- width: 35%;
+ width: $cart-checkout-sidebar-width;
min-height: 12em;
}
@@ -206,12 +207,10 @@
margin: 0 auto $gap;
}
- .wp-block-woocommerce-cart-items-block {
- padding: 0;
- width: 100%;
- }
-
+ // flex-basis sizes along the main axis, which is vertical here, so reset it.
+ .wp-block-woocommerce-cart-items-block,
.wp-block-woocommerce-cart-totals-block {
+ flex: none;
padding: 0;
width: 100%;
}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
index f7938c63867..f41a5ee0635 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/checkout/styles/style.scss
@@ -46,6 +46,7 @@
.wp-block-woocommerce-checkout.is-loading {
display: flex;
flex-wrap: wrap;
+ column-gap: $gap-largest;
margin: 0 auto $gap;
position: relative;
@@ -53,14 +54,14 @@
flex-direction: row-reverse;
}
+ // Mirrors the loaded layout in sidebar-layout/style.scss.
.wp-block-woocommerce-checkout-totals-block {
- width: 35%;
- padding-left: math.percentage(math.div($gap-large, 1060px));
+ flex: 0 0 $cart-checkout-sidebar-width;
+ width: $cart-checkout-sidebar-width;
}
.wp-block-woocommerce-checkout-fields-block {
- width: 65%;
- // ~1060px is the default width of the content area in Storefront.
- padding-right: math.percentage(math.div($gap-largest, 1060px));
+ flex: 1 1 0%;
+ min-width: 0;
}
.wp-block-woocommerce-checkout-fields-block {
@@ -151,17 +152,20 @@
}
}
-// Skeleton is shown before mobile classes are appended.
-@media only screen and (max-width: 700px) {
+// Skeleton is shown before mobile classes are appended, so it goes by viewport
+// width: ~1000px of viewport is the ~920px of container the two columns need.
+@media only screen and (max-width: 999px) {
.wp-block-woocommerce-checkout.is-loading {
flex-direction: column;
margin: 0 auto $gap;
.wp-block-woocommerce-checkout-fields-block {
+ flex: none;
padding: 0;
width: 100%;
}
.wp-block-woocommerce-checkout-totals-block {
+ flex: none;
padding: 0;
width: 100%;
.wc-block-components-totals-item,