Commit 2004ab8319b for woocommerce

commit 2004ab8319bb4236b2c33109ceb4272bfe2a7035
Author: Filipe Varela <keoshi@keoshi.com>
Date:   Thu Aug 20 17:53:26 2026 +0100

    Fix disabled buttons not looking disabled in cart and checkout (#67738)

    * Fade whole button when disabled in cart and checkout

    Disabled buttons only faded their label, so the fill stayed at full
    strength and the button read as available. Outlined buttons were worse:
    :disabled shared a rule with :hover, :focus and :active, so a disabled
    outlined button filled in dark and looked more prominent than at rest.

    Apply opacity and a not-allowed cursor to the button itself, covering
    both :disabled and aria-disabled since some buttons stay focusable, and
    scope the outlined interaction states so they cannot apply while
    disabled. This also supersedes the cart submit button's own copy of the
    label-only rule, which is removed.

    Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

    * Add changelog entry for disabled button state fix

    Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

    ---------

    Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>

diff --git a/plugins/woocommerce/changelog/fix-47008-disabled-button-state b/plugins/woocommerce/changelog/fix-47008-disabled-button-state
new file mode 100644
index 00000000000..e4ab5be0f20
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-47008-disabled-button-state
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fade the whole button rather than only its label when a cart or checkout button is disabled, and stop disabled outlined buttons from taking on the dark hover styling.
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 db78c04f4ce..a7edc128fcc 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
@@ -28,15 +28,18 @@
 	&.text {
 		color: $gray-900;

-		&:hover {
+		&:hover:not(:disabled):not([aria-disabled="true"]) {
 			opacity: 0.9;
 		}
 	}

-	&:disabled {
-		.wc-block-components-button__text {
-			opacity: 0.5;
-		}
+	// Fade the whole button, not just its label, so the fill and border read as
+	// unavailable too. Some buttons stay focusable and use aria-disabled rather
+	// than the disabled attribute, so both need covering.
+	&:disabled,
+	&[aria-disabled="true"] {
+		cursor: not-allowed;
+		opacity: 0.5;
 	}

 	&.outlined,
@@ -48,18 +51,15 @@
 			box-shadow: inset 0 0 0 1px currentColor;
 		}

-		&:disabled,
-		&:hover,
-		&:focus,
-		&:active {
-			background-color: $gray-900;
-			color: $white;
-		}
-
-		&:hover {
-			background-color: $gray-900;
-			color: $white;
-			opacity: 1;
+		// Interaction states must not apply while disabled, or the button
+		// would fill in dark and read as more prominent than at rest.
+		&:not(:disabled):not([aria-disabled="true"]) {
+			&:hover,
+			&:focus,
+			&:active {
+				background-color: $gray-900;
+				color: $white;
+			}
 		}
 	}
 }
@@ -77,7 +77,7 @@ body:not(.woocommerce-block-theme-has-button-styles)
 	&.text {
 		color: $gray-900;

-		&:hover {
+		&:hover:not(:disabled):not([aria-disabled="true"]) {
 			opacity: 0.9;
 		}
 	}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
index d23a923f76f..26f637afdce 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/inner-blocks/proceed-to-checkout-block/style.scss
@@ -18,12 +18,6 @@
 		}
 	}
 }
-.wc-block-cart__submit-button[aria-disabled="true"] {
-	.wc-block-components-button__text {
-		opacity: 0.5;
-	}
-}
-
 .wc-block-cart {
 	.wc-block-cart__submit-container {
 		padding: 0;