Commit 1c8472d14a for woocommerce
commit 1c8472d14a22b805ecaa79636c922cc16e9ec9a8
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Thu Jan 29 23:57:06 2026 +0000
Position the remove button to the right of the quantity picker and use trash icon instead of text (#62965)
* Use trash icon instead of text for remove item link
* Remove margin from quantity selector
* Change flex to row and display trash icon vertically in center
* Add changelog
* Fix tests following change
* Update remove link to use an icon in mini cart
diff --git a/plugins/woocommerce/changelog/wooprd-1449-position-the-remove-buttonlink-to-the-right-of-the-quantity b/plugins/woocommerce/changelog/wooprd-1449-position-the-remove-buttonlink-to-the-right-of-the-quantity
new file mode 100644
index 0000000000..2474f35d89
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooprd-1449-position-the-remove-buttonlink-to-the-right-of-the-quantity
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Position the remove button to the right of the quantity picker and use trash icon instead of text in Cart block
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
index b6ec1da2a8..d7acc27190 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/cart-line-item-row.tsx
@@ -22,6 +22,7 @@ import { forwardRef, useMemo } from '@wordpress/element';
import type { CartItem } from '@woocommerce/types';
import { objectHasProp, Currency } from '@woocommerce/types';
import { getSetting } from '@woocommerce/settings';
+import { Icon, trash } from '@wordpress/icons';
/**
* Internal dependencies
@@ -341,7 +342,7 @@ const CartLineItemRow: React.ForwardRefExoticComponent<
} }
disabled={ isPendingDelete }
>
- { __( 'Remove item', 'woocommerce' ) }
+ <Icon icon={ trash } size={ 24 } />
</button>
) }
</div>
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
index b2079c3228..d95c773fd9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/cart-line-items-table/style.scss
@@ -31,8 +31,7 @@ table.wc-block-cart-items {
}
}
.wc-block-cart-items__row {
- .wc-block-cart-item__wrap > *,
- .wc-block-components-quantity-selector {
+ .wc-block-cart-item__wrap > * {
margin-bottom: $gap-smaller * 1.25;
}
@@ -50,14 +49,16 @@ table.wc-block-cart-items {
.wc-block-cart-item__quantity {
display: flex;
- flex-direction: column;
- align-items: start;
+ flex-direction: row;
+ gap: $gap-small;
+ align-items: center;
.wc-block-cart-item__remove-link {
@include link-button();
@include hover-effect();
- @include font-x-small-locked;
+ height: 24px;
+ width: 24px;
text-transform: none;
white-space: nowrap;
&[hidden] {
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
index bb545e06b9..40868d5e90 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/quantity-selector/style.scss
@@ -16,7 +16,6 @@
border-radius: $universal-border-radius;
box-sizing: border-box;
display: flex;
- margin: 0 0 0.25em 0;
position: relative;
width: 107px;
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
index daa77b280a..9f0290c431 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/cart/test/block.js
@@ -275,7 +275,11 @@ describe( 'Testing cart', () => {
render( <CartBlock /> );
await waitFor( () => {
- expect( screen.queryAllByText( /Remove item/i ).length ).toBe( 1 );
+ expect(
+ screen.queryAllByRole( 'button', {
+ name: /Remove .* from cart/i,
+ } ).length
+ ).toBe( 1 );
} );
} );
} );
diff --git a/plugins/woocommerce/client/blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.spec.ts b/plugins/woocommerce/client/blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.spec.ts
index 6f8613b1aa..1133d7264c 100644
--- a/plugins/woocommerce/client/blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.spec.ts
+++ b/plugins/woocommerce/client/blocks/tests/e2e/tests/cart/cart-checkout-block-translations.shopper.block_theme.spec.ts
@@ -42,7 +42,7 @@ test.describe( 'Shopper → Translations', () => {
await expect( totalsHeader ).toBeVisible();
await expect(
- page.getByText( getTestTranslation( 'Remove item' ) )
+ page.getByRole( 'button', { name: /Remove .* from cart/i } )
).toBeVisible();
await expect(
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartProductsTableBlock.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartProductsTableBlock.php
index a2f20ec290..52607b5924 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartProductsTableBlock.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartProductsTableBlock.php
@@ -233,7 +233,9 @@ class MiniCartProductsTableBlock extends AbstractInnerBlock {
data-wp-bind--aria-label="state.removeFromCartLabel"
class="wc-block-cart-item__remove-link"
>
- <?php echo esc_html( $remove_item_label ); ?>
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.5A2.25 2.25 0 0 0 9.878 7h4.244A2.251 2.251 0 0 0 12 5.5ZM12 4a3.751 3.751 0 0 0-3.675 3H5v1.5h1.27l.818 8.997a2.75 2.75 0 0 0 2.739 2.501h4.347a2.75 2.75 0 0 0 2.738-2.5L17.73 8.5H19V7h-3.325A3.751 3.751 0 0 0 12 4Zm4.224 4.5H7.776l.806 8.861a1.25 1.25 0 0 0 1.245 1.137h4.347a1.25 1.25 0 0 0 1.245-1.137l.805-8.861Z"/>
+ </svg>
</button>
</div>
</div>