Commit 5aa261c3f37 for woocommerce
commit 5aa261c3f3772110a3b6c4da1a124458129bbdcb
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Mon May 11 08:44:44 2026 +0200
Fix Add to Cart + Options button being disabled when a grouped product child quantity changes to 0 (#64667)
* Fix Add to Cart + Options button being disabled when a grouped product child quantity changed to 0
* Add changelog
* Linting
diff --git a/plugins/woocommerce/changelog/fix-add-to-cart-with-options-grouped-button-disabled b/plugins/woocommerce/changelog/fix-add-to-cart-with-options-grouped-button-disabled
new file mode 100644
index 00000000000..2883e1bf0b7
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-add-to-cart-with-options-grouped-button-disabled
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fix
+Comment: Fix Add to Cart + Options button being disabled when a grouped product child quantity changed to 0
+
+
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts
index a4ca903eb5f..9503e424545 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/add-to-cart-with-options/frontend.ts
@@ -202,7 +202,11 @@ const { actions } = store< MergedAddToCartWithOptionsStores >(
};
}
- if ( productsState.mainProductInContext?.type === 'grouped' ) {
+ const parentProduct = productsState.findProduct( {
+ id: productsState.productId,
+ selectedAttributes: context.selectedAttributes,
+ } );
+ if ( parentProduct?.type === 'grouped' ) {
actions.validateGroupedProductQuantity();
} else {
actions.validateQuantity( productId, value );
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
index fcf0bc52b33..9ed37b34eee 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.block_theme.spec.ts
@@ -551,16 +551,21 @@ test.describe( 'Add to Cart + Options Block', () => {
} );
await test.step( 'successfully adds to cart when child products are selected', async () => {
- const increaseQuantityButton = page
+ const increaseBeanieQuantityButton = page
.locator(
'[data-block-name="woocommerce/add-to-cart-with-options"]'
)
.getByLabel( 'Increase quantity of Beanie' );
- await increaseQuantityButton.click();
+ await increaseBeanieQuantityButton.click();
await expect( addToCartButton ).not.toHaveClass( /\bdisabled\b/ );
- await increaseQuantityButton.click();
+ const increaseTShirtQuantityButton = page
+ .locator(
+ '[data-block-name="woocommerce/add-to-cart-with-options"]'
+ )
+ .getByLabel( 'Increase quantity of T-Shirt' );
+ await increaseTShirtQuantityButton.click();
await addToCartButton.click();
@@ -581,28 +586,39 @@ test.describe( 'Add to Cart + Options Block', () => {
} );
await test.step( 'child simple product quantities can be decreased down to 0', async () => {
- const reduceQuantityButton = page
+ const reduceBeanieQuantityButton = page
.locator(
'[data-block-name="woocommerce/add-to-cart-with-options-grouped-product-item-selector"]'
)
.getByLabel( 'Reduce quantity of Beanie' );
- await reduceQuantityButton.click();
- await reduceQuantityButton.click();
+ await reduceBeanieQuantityButton.click();
- const quantityInput = page.getByRole( 'spinbutton', {
- name: 'Beanie',
+ const addedToCartButton = page.getByRole( 'button', {
+ name: 'Added to cart',
+ exact: true,
} );
- await expect( quantityInput ).toHaveValue( '0' );
+ await expect( addedToCartButton ).not.toHaveClass( /\bdisabled\b/ );
- await expect( reduceQuantityButton ).toBeDisabled();
+ const reduceTShirtQuantityButton = page
+ .locator(
+ '[data-block-name="woocommerce/add-to-cart-with-options-grouped-product-item-selector"]'
+ )
+ .getByLabel( 'Reduce quantity of T-Shirt' );
+ await reduceTShirtQuantityButton.click();
- await expect(
- page.getByRole( 'button', {
- name: 'Added to cart',
- exact: true,
- } )
- ).toHaveClass( /\bdisabled\b/ );
+ const beanieQuantityInput = page.getByRole( 'spinbutton', {
+ name: 'Beanie',
+ } );
+ const tShirtQuantityInput = page.getByRole( 'spinbutton', {
+ name: 'T-Shirt',
+ } );
+
+ await expect( beanieQuantityInput ).toHaveValue( '0' );
+ await expect( tShirtQuantityInput ).toHaveValue( '0' );
+ await expect( reduceBeanieQuantityButton ).toBeDisabled();
+ await expect( reduceTShirtQuantityButton ).toBeDisabled();
+ await expect( addedToCartButton ).toHaveClass( /\bdisabled\b/ );
} );
await test.step( 'products sold individually can be added to cart', async () => {