Commit 2ea551f1aa7 for woocommerce
commit 2ea551f1aa7d293389486efd90409bdd1de25398
Author: Mike Jolley <mike.jolley@me.com>
Date: Thu Nov 12 15:11:15 2026 +0000
Match Cart and Checkout button corners and coupon Apply height to fields (#70859)
* Use the shared radius and field height in Cart and Checkout
Buttons get the 4px radius that fields use, unless the theme sets one.
The coupon Apply button matches its field's 50px height. The order
summary, options and address suggestions use the shared radius variable
instead of literal 4px and 5px values.
* Add changelog entry for Cart and Checkout style tweaks
* Let the coupon Apply button grow with its label
diff --git a/plugins/woocommerce/changelog/fix-cart-checkout-style-tweaks b/plugins/woocommerce/changelog/fix-cart-checkout-style-tweaks
new file mode 100644
index 00000000000..300c277ceb8
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-cart-checkout-style-tweaks
@@ -0,0 +1,4 @@
+Significance: patch
+Type: tweak
+
+Match the corners of Cart and Checkout buttons to their fields, and the height of the coupon Apply button to its field.
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/button/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/button/style.scss
index a7edc128fcc..abd7b63ae02 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/button/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/button/style.scss
@@ -1,3 +1,9 @@
+// Cart and Checkout buttons use the same corners as their fields and panels. The rule has no specificity, so a button
+// radius from the theme (`styles.elements.button.border.radius`) still applies.
+:where(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) :where(.wc-block-components-button:not(.is-link)) {
+ border-radius: $universal-border-radius;
+}
+
.wc-block-components-button:not(.is-link) {
align-items: center;
display: inline-flex;
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/address-autocomplete/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/address-autocomplete/style.scss
index 84575621e9c..7be55df8296 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/address-autocomplete/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/address-autocomplete/style.scss
@@ -41,7 +41,7 @@ This file is part of the WooCommerce Blocks autocomplete. If editing shortcode,
margin-top: 4px;
background: #fff;
border: 1px solid #ddd;
- border-radius: 4px;
+ border-radius: $universal-border-radius;
box-sizing: border-box;
.suggestions-list {
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/coupon/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/coupon/style.scss
index 833f77b457f..e0efa874a4c 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/coupon/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/totals/coupon/style.scss
@@ -29,7 +29,10 @@
flex: 3 1 120px;
}
+ // The button is at least as tall as the text input next to it (50px), whatever padding the theme gives buttons.
.wc-block-components-totals-coupon__button {
+ min-block-size: 50px;
+ padding-block: 0;
padding-left: $gap;
padding-right: $gap;
white-space: nowrap;
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 16a2f35250a..260f65aca61 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
@@ -4,7 +4,7 @@
.wp-block-woocommerce-checkout-order-summary-block {
border: 1px solid $universal-border-light;
- border-radius: 5px;
+ border-radius: $universal-border-radius;
box-sizing: border-box;
@include font-small-locked;
@@ -45,7 +45,7 @@
.checkout-order-summary-block-fill {
border: 1px solid $universal-border-light;
- border-radius: 5px;
+ border-radius: $universal-border-radius;
.wc-block-components-totals-wrapper:first-of-type {
border-top: 0;
diff --git a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss
index d9a658616a8..c96d1706db8 100644
--- a/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss
+++ b/plugins/woocommerce/client/blocks/packages/public-api/blocks-components/radio-control/style.scss
@@ -43,7 +43,7 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
label.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
box-shadow: 0 0 0 1.5px currentColor inset;
- border-radius: 4px;
+ border-radius: $universal-border-radius;
}
// Defines a border around the radio control. Cannot be done with normal CSS borders or outlines because when
@@ -58,7 +58,7 @@ $content-padding-left: calc($gap + 24px + $gap-smaller);
pointer-events: none;
position: absolute;
border: 1px solid $universal-border-light;
- border-radius: 4px;
+ border-radius: $universal-border-radius;
width: 100%;
box-sizing: border-box;
}