Commit c856fb4ce12 for woocommerce
commit c856fb4ce12ba18721c54d37a5c77057dbf8009d
Author: Tom Cafferkey <tjcafferkey@gmail.com>
Date: Thu Oct 15 13:34:40 2026 +0100
Show Mini Cart buttons side by side on mobile (#69760)
* Show Mini Cart buttons side by side on mobile
* Add changelog entries for Mini Cart buttons
* Update Mini Cart button locators in E2E tests
* Wrap Mini Cart buttons instead of breaking words mid-way
Narrow screens and long labels broke words like "Checkout" across lines.
Let the buttons wrap onto their own rows when the words don't fit side by side.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Mike Jolley <mike.jolley@me.com>
Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/wooplug-1392-mini-cart-buttons b/plugins/woocommerce/changelog/wooplug-1392-mini-cart-buttons
new file mode 100644
index 00000000000..e4bcc20cf28
--- /dev/null
+++ b/plugins/woocommerce/changelog/wooplug-1392-mini-cart-buttons
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Show Cart and Checkout buttons side by side in the Mini Cart on mobile, leaving more room for cart items.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx
index dc9ebc456e0..db3543bf0f9 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-cart-button-block/constants.tsx
@@ -3,4 +3,4 @@
*/
import { __ } from '@wordpress/i18n';
-export const defaultCartButtonLabel = __( 'View cart', 'woocommerce' );
+export const defaultCartButtonLabel = __( 'Cart', 'woocommerce' );
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx
index 8e812b2768c..9548f5f0e0e 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-checkout-button-block/constants.tsx
@@ -3,4 +3,4 @@
*/
import { __ } from '@wordpress/i18n';
-export const defaultCheckoutButtonLabel = __( 'Go to checkout', 'woocommerce' );
+export const defaultCheckoutButtonLabel = __( 'Checkout', 'woocommerce' );
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss
index e0cb654c66e..492f00d0e91 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/inner-blocks/mini-cart-footer-block/editor.scss
@@ -1,3 +1,10 @@
.editor-styles-wrapper .wc-block-mini-cart__footer .block-editor-inner-blocks {
width: 100%;
}
+
+.editor-styles-wrapper .wc-block-mini-cart__footer-actions .wp-block-woocommerce-mini-cart-cart-button-block,
+.editor-styles-wrapper .wc-block-mini-cart__footer-actions .wp-block-woocommerce-mini-cart-checkout-button-block {
+ .wc-block-components-button {
+ width: 100%;
+ }
+}
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
index c6168cbe9a1..ae5623d21c7 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/mini-cart/mini-cart-contents/style.scss
@@ -142,25 +142,17 @@ h2.wc-block-mini-cart__title {
.wc-block-mini-cart__footer-actions,
.wc-block-mini-cart__footer-actions > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
+ flex-wrap: wrap;
gap: $gap;
.wc-block-components-button,
.wp-block-button,
.wp-block-woocommerce-mini-cart-cart-button-block,
.wp-block-woocommerce-mini-cart-checkout-button-block {
- flex-grow: 1;
+ flex: 1 1 0;
+ min-width: min-content;
display: inline-flex;
}
-
- .wp-block-woocommerce-mini-cart-cart-button-block {
- @media only screen and (min-width: 480px) {
- display: inline-flex;
- }
- }
-
- @media only screen and (max-width: 480px) {
- flex-direction: column;
- }
}
.wc-block-components-payment-method-icons {
diff --git a/plugins/woocommerce/client/blocks/changelog/wooplug-1392-mini-cart-buttons b/plugins/woocommerce/client/blocks/changelog/wooplug-1392-mini-cart-buttons
new file mode 100644
index 00000000000..e4bcc20cf28
--- /dev/null
+++ b/plugins/woocommerce/client/blocks/changelog/wooplug-1392-mini-cart-buttons
@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Show Cart and Checkout buttons side by side in the Mini Cart on mobile, leaving more room for cart items.
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCartButtonBlock.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCartButtonBlock.php
index ec369c46353..eeda6f58a71 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCartButtonBlock.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCartButtonBlock.php
@@ -21,11 +21,11 @@ class MiniCartCartButtonBlock extends AbstractInnerBlock {
* @return string Rendered block type output.
*/
protected function render( $attributes, $content, $block ) {
- $default_view_cart_text = __( 'View cart', 'woocommerce' );
- $view_cart_text = $attributes['cartButtonLabel'] ? $attributes['cartButtonLabel'] : $default_view_cart_text;
- $cart_page_id = wc_get_page_id( 'cart' );
- $cart_page_url = get_permalink( $cart_page_id );
- $classes = implode(
+ $default_cart_text = __( 'Cart', 'woocommerce' );
+ $cart_text = $attributes['cartButtonLabel'] ? $attributes['cartButtonLabel'] : $default_cart_text;
+ $cart_page_id = wc_get_page_id( 'cart' );
+ $cart_page_url = get_permalink( $cart_page_id );
+ $classes = implode(
' ',
array_filter(
array(
@@ -36,7 +36,7 @@ class MiniCartCartButtonBlock extends AbstractInnerBlock {
)
)
);
- $wrapper_attributes = get_block_wrapper_attributes(
+ $wrapper_attributes = get_block_wrapper_attributes(
array(
'href' => esc_url( $cart_page_url ),
'class' => $classes,
@@ -48,7 +48,7 @@ class MiniCartCartButtonBlock extends AbstractInnerBlock {
?>
<a <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<div class="wc-block-components-button__text">
- <?php echo esc_html( $view_cart_text ); ?>
+ <?php echo esc_html( $cart_text ); ?>
</div>
</a>
<?php
diff --git a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCheckoutButtonBlock.php b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCheckoutButtonBlock.php
index f64d3fa7950..b07457b2a2c 100644
--- a/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCheckoutButtonBlock.php
+++ b/plugins/woocommerce/src/Blocks/BlockTypes/MiniCartCheckoutButtonBlock.php
@@ -21,11 +21,11 @@ class MiniCartCheckoutButtonBlock extends AbstractInnerBlock {
* @return string Rendered block type output.
*/
protected function render( $attributes, $content, $block ) {
- $default_go_to_checkout_text = __( 'Go to checkout', 'woocommerce' );
- $go_to_checkout_text = $attributes['checkoutButtonLabel'] ? $attributes['checkoutButtonLabel'] : $default_go_to_checkout_text;
- $checkout_page_id = wc_get_page_id( 'checkout' );
- $checkout_page_url = get_permalink( $checkout_page_id );
- $wrapper_attributes = get_block_wrapper_attributes(
+ $default_checkout_text = __( 'Checkout', 'woocommerce' );
+ $checkout_text = $attributes['checkoutButtonLabel'] ? $attributes['checkoutButtonLabel'] : $default_checkout_text;
+ $checkout_page_id = wc_get_page_id( 'checkout' );
+ $checkout_page_url = get_permalink( $checkout_page_id );
+ $wrapper_attributes = get_block_wrapper_attributes(
array(
'href' => esc_url( $checkout_page_url ),
'class' => 'wc-block-components-button wp-element-button wc-block-mini-cart__footer-checkout',
@@ -36,7 +36,7 @@ class MiniCartCheckoutButtonBlock extends AbstractInnerBlock {
?>
<a <?php echo $wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
<div class="wc-block-components-button__text">
- <?php echo esc_html( $go_to_checkout_text ); ?>
+ <?php echo esc_html( $checkout_text ); ?>
</div>
</a>
<?php
diff --git a/plugins/woocommerce/tests/e2e/tests/blocks/mini-cart/mini-cart.block_theme.spec.ts b/plugins/woocommerce/tests/e2e/tests/blocks/mini-cart/mini-cart.block_theme.spec.ts
index d8ce3319243..6178f4fb0ff 100644
--- a/plugins/woocommerce/tests/e2e/tests/blocks/mini-cart/mini-cart.block_theme.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/blocks/mini-cart/mini-cart.block_theme.spec.ts
@@ -249,12 +249,12 @@ test.describe( `${ blockData.name } Block`, () => {
await expect( page.getByText( 'Subtotal' ) ).toBeVisible();
await expect(
- miniCartDialog.getByRole( 'link', { name: 'View cart' } )
+ miniCartDialog.getByRole( 'link', { name: 'Cart' } )
).toBeVisible();
await expect(
miniCartDialog.getByRole( 'link', {
- name: 'Go to checkout',
+ name: 'Checkout',
} )
).toBeVisible();
} );
@@ -330,7 +330,7 @@ test.describe( `${ blockData.name } Block`, () => {
await miniCartUtils.openMiniCart();
await page
.getByRole( 'dialog' )
- .getByRole( 'link', { name: 'View cart' } )
+ .getByRole( 'link', { name: 'Cart' } )
.click();
await expect( page ).toHaveURL( /\/cart\/?$/ );
} );
@@ -345,7 +345,7 @@ test.describe( `${ blockData.name } Block`, () => {
await miniCartUtils.openMiniCart();
await page
.getByRole( 'dialog' )
- .getByRole( 'link', { name: 'Go to checkout' } )
+ .getByRole( 'link', { name: 'Checkout' } )
.click();
await expect( page ).toHaveURL( /\/checkout\/?$/ );
} );