Commit 3862c746418 for woocommerce
commit 3862c74641872437b19819f93a7245c480068cfd
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Tue Apr 7 09:38:09 2026 +0200
Add to Cart + Options: Ensure attributes with spaces and special characters work well in dropdown mode (#64031)
* Add to Cart + Options: Ensure attributes with spaces and special characters work well in dropdown mode
* Add changelog
* Add tests
diff --git a/plugins/woocommerce/changelog/fix-WOOPLUG-6403-ii b/plugins/woocommerce/changelog/fix-WOOPLUG-6403-ii
new file mode 100644
index 00000000000..b778b167475
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-WOOPLUG-6403-ii
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Add to Cart + Options: Ensure attributes with spaces and special characters work well in dropdown mode
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 594d13693fd..80716f09bb6 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
@@ -453,23 +453,60 @@ test.describe( 'Add to Cart + Options Block', () => {
isOnlyCurrentEntityDirty: true,
} );
- await page.goto( '/product/custom-slug-variable/' );
+ await test.step( 'when in pills mode', async () => {
+ await page.goto( '/product/custom-slug-variable/' );
- // Verify the pills show term names (not slugs).
- const petitOption = page.locator( 'label:has-text("Petit")' );
- const grandOption = page.locator( 'label:has-text("Grand")' );
- const addToCartButton = page.getByRole( 'button', {
- name: 'Add to cart',
- exact: true,
+ // Verify the pills show term names (not slugs).
+ const petitOption = page.locator( 'label:has-text("Petit")' );
+ const grandOption = page.locator( 'label:has-text("Grand")' );
+ const addToCartButton = page.getByRole( 'button', {
+ name: 'Add to cart',
+ exact: true,
+ } );
+
+ await expect( petitOption ).not.toBeDisabled();
+ await expect( grandOption ).not.toBeDisabled();
+
+ await petitOption.click();
+ await expect( addToCartButton ).not.toBeDisabled();
+ await addToCartButton.click();
+ await expect( page.getByText( '1 in cart' ) ).toBeVisible();
} );
- await expect( petitOption ).not.toBeDisabled();
- await expect( grandOption ).not.toBeDisabled();
+ await test.step( 'when in dropdown mode', async () => {
+ await pageObject.updateSingleProductTemplate();
- await petitOption.click();
- await expect( addToCartButton ).not.toBeDisabled();
- await addToCartButton.click();
- await expect( page.getByText( '1 in cart' ) ).toBeVisible();
+ await pageObject.switchToDropdownMode();
+
+ await editor.saveSiteEditorEntities();
+
+ await page.goto( '/product/custom-slug-variable/' );
+
+ const select = page.getByRole( 'combobox', {
+ name: 'Taille',
+ exact: true,
+ } );
+ const petitOption = page.getByRole( 'option', {
+ name: 'Petit',
+ exact: true,
+ } );
+ const grandOption = page.getByRole( 'option', {
+ name: 'Grand',
+ exact: true,
+ } );
+ const addToCartButton = page.getByRole( 'button', {
+ name: '1 in cart',
+ exact: true,
+ } );
+
+ await expect( petitOption ).not.toBeDisabled();
+ await expect( grandOption ).not.toBeDisabled();
+ await select.selectOption( { label: 'Petit' } );
+
+ await expect( addToCartButton ).not.toBeDisabled();
+ await addToCartButton.click();
+ await expect( page.getByText( '2 in cart' ) ).toBeVisible();
+ } );
} );
test( 'allows adding grouped products to cart', async ( {
@@ -769,25 +806,7 @@ test.describe( 'Add to Cart + Options Block', () => {
} ) => {
await pageObject.updateSingleProductTemplate();
- await pageObject.switchProductType( 'Variable product' );
-
- await page.getByRole( 'tab', { name: 'Block' } ).click();
-
- // Verify inner blocks have loaded.
- await expect(
- editor.canvas
- .getByLabel(
- 'Block: Variation Selector: Attribute Options (Beta)'
- )
- .first()
- ).toBeVisible();
-
- const attributeOptionsBlock = await editor.getBlockByName(
- 'woocommerce/add-to-cart-with-options-variation-selector-attribute-options'
- );
- await editor.selectBlocks( attributeOptionsBlock.first() );
-
- await page.getByRole( 'radio', { name: 'Dropdown' } ).click();
+ await pageObject.switchToDropdownMode();
await editor.saveSiteEditorEntities();
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.page.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.page.ts
index a193e036e97..0a3b19b60ac 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.page.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/add-to-cart-with-options/add-to-cart-with-options.page.ts
@@ -109,6 +109,28 @@ class AddToCartWithOptionsPage {
await this.updateAddToCartWithOptionsBlock();
}
+ async switchToDropdownMode() {
+ await this.switchProductType( 'Variable product' );
+
+ await this.page.getByRole( 'tab', { name: 'Block' } ).click();
+
+ // Verify inner blocks have loaded.
+ await expect(
+ this.editor.canvas
+ .getByLabel(
+ 'Block: Variation Selector: Attribute Options (Beta)'
+ )
+ .first()
+ ).toBeVisible();
+
+ const attributeOptionsBlock = await this.editor.getBlockByName(
+ 'woocommerce/add-to-cart-with-options-variation-selector-attribute-options'
+ );
+ await this.editor.selectBlocks( attributeOptionsBlock.first() );
+
+ await this.page.getByRole( 'radio', { name: 'Dropdown' } ).click();
+ }
+
async createPostWithProductBlock( product: string, variation?: string ) {
await this.admin.createNewPost();
await this.editor.insertBlock( { name: 'woocommerce/single-product' } );
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/VariationSelectorAttributeOptions.php b/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/VariationSelectorAttributeOptions.php
index 83b1bb31fb9..ba1122f3976 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/VariationSelectorAttributeOptions.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/AddToCartWithOptions/VariationSelectorAttributeOptions.php
@@ -238,9 +238,7 @@ class VariationSelectorAttributeOptions extends AbstractBlock {
'data-wp-bind--disabled' => 'state.isOptionDisabled',
'data-wp-bind--hidden' => 'hide' === $disabled_attributes_action ? 'state.isOptionDisabled' : null,
'data-wp-context' => array(
- 'option' => $attribute_term,
- 'name' => $attribute_slug,
- 'options' => $attribute_terms,
+ 'option' => $attribute_term,
),
);