Commit f47d963218 for woocommerce

commit f47d9632180ea2add96c54bad7df9fe5ef200176
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date:   Mon Nov 3 09:41:36 2025 +0100

    Add to Cart + Options: stretch Product Quantity to the same height as the Add to Cart Button (#61713)

    * Add to Cart + Options: stretch Product Quantity to the same height as the Add to Cart Button

    * Add changelog file

    * Minor CSS fixes

diff --git a/plugins/woocommerce/changelog/fix-add-to-cart-with-options-stretch-quantity b/plugins/woocommerce/changelog/fix-add-to-cart-with-options-stretch-quantity
new file mode 100644
index 0000000000..1fb5ce5c03
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-add-to-cart-with-options-stretch-quantity
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Add to Cart + Options: stretch Product Quantity to the same height as the Add to Cart Button
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss
index 1c7a5ed134..b48382629d 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/editor.scss
@@ -29,3 +29,9 @@
 		color: inherit;
 	}
 }
+
+// It allows the `.wc-block-components-quantity-selector` height: 100% to work
+// when the block contents are wrapped in a <Disabled> component.
+:where(.wc-block-add-to-cart-with-options__quantity-selector .components-disabled) {
+	display: contents;
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
index c9e1bf8d8d..459825193c 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/style.scss
@@ -15,6 +15,13 @@
 	}
 }

+// Set the height to 100% so when the quantity selector is inside a flex
+// container with `verticalAlignment: stretch` (that's the default in WC core
+// templates), the quantity selector will stretch to the height of the container.
+:where(.wc-block-add-to-cart-with-options__quantity-selector .wc-block-components-quantity-selector) {
+	height: 100%;
+}
+
 :where(.wc-block-add-to-cart-with-options__quantity-selector),
 :where(.wc-block-add-to-cart-with-options-grouped-product-item-selector) {
 	// This resets some WC component styles, so we need it to have specificity
diff --git a/plugins/woocommerce/templates/parts/simple-product-add-to-cart-with-options.html b/plugins/woocommerce/templates/parts/simple-product-add-to-cart-with-options.html
index fbf9c321da..0a6d6b24f3 100644
--- a/plugins/woocommerce/templates/parts/simple-product-add-to-cart-with-options.html
+++ b/plugins/woocommerce/templates/parts/simple-product-add-to-cart-with-options.html
@@ -1,5 +1,5 @@
 <!-- wp:woocommerce/product-stock-indicator {"style":{"spacing":{"margin":{"top":"1rem","bottom":"1rem"}}}} /-->
-<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"stretch"}} -->
 <div class="wp-block-group"><!-- wp:woocommerce/add-to-cart-with-options-quantity-selector {"quantitySelectorStyle":"stepper"} /-->
 <!-- wp:woocommerce/product-button {"textAlign":"left"} /--></div>
 <!-- /wp:group -->
diff --git a/plugins/woocommerce/templates/parts/variable-product-add-to-cart-with-options.html b/plugins/woocommerce/templates/parts/variable-product-add-to-cart-with-options.html
index 459309a6ff..df818a2d28 100644
--- a/plugins/woocommerce/templates/parts/variable-product-add-to-cart-with-options.html
+++ b/plugins/woocommerce/templates/parts/variable-product-add-to-cart-with-options.html
@@ -27,7 +27,7 @@

 <!-- wp:woocommerce/product-stock-indicator {"style":{"spacing":{"margin":{"top":"1rem","bottom":"1rem"}}}} /-->

-<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap"}} -->
+<!-- wp:group {"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"stretch"}} -->
 <div class="wp-block-group">
 	<!-- wp:woocommerce/add-to-cart-with-options-quantity-selector {"quantitySelectorStyle":"stepper"} /-->