Show mini cart also on checkout page

[strarsis]

Describe the bug

Showing a mini cart on the checkout page isn't necessarily a bad idea, often it is used as a go-back button, for users to make amends to their shopping carts.
Currently the behavior cannot be changed by an option or filter, on the checkout page the mini cart will be hidden.

Luckily it is only hidden using inline CSS, so it can be still displayed by using checkout-page-specific CSS.

To reproduce

1. Place a mini cart onto a site so it also appears on the checkout page.
2. Visit the check out page, note that the min cart is missing there.
   If you want to make changes to the cart, you can't do this by using the mini cart as a go-back link,
   rather you have to use the browser back button (which should be avoided and would be avoidable here).

Expected behavior

Mini cart either is also shown on the check out page, or an option and/or filter is also provided by it, that allows toggling this behavior for specific pages.

Environment

WordPress (please complete the following information):

• WordPress version: 6.1.1
• Gutenberg version (if installed): 14.6.1
• WooCommerce version: 7.1.0
• WooCommerce Blocks version: 9.0.0
• Site language: de_DE_formal/de_DE (but not applicable to this issue)
• Any other plugins installed: (yes, but not applicable to this issue)

[katiebethbrown]

Adding a +1 as we've run into this issue on a Team51 site.

The mini cart block is added to our nav in the header template, so when the cart and checkout pages are visited it's leaving an empty space when it gets hidden which creates a visual discrepancy.

I agree with the expectation that the block would remain on all pages.

[Aljullu]

@pmcpinto what are your thoughts on this one? Currently we are hiding the Mini Cart block in the Cart & Checkout pages. The reason was to 'hide distractions' from the purchase flow:

Shop page	Checkout page

(notice how the Mini Cart is visible in the Shop page but not visible in the Checkout)

However, I acknowledge that some stores might want to make them visible in all pages (see reasons in comments above). @pmcpinto do you think we should add a toggle to the block to allow making it visible in the Cart & Checkout pages?

[strarsis]

Even just leaving the mini cart visible and usable on all pages would be better IMHO, as one can still hide it using CSS,
than restoring its functionality afterwards.

[pmcpinto]

Hey Albert, thanks for the ping. I understand that removing the mini-cart icon from the cart and checkout creates some visual imbalance, but displaying it on the cart page is redundant.

There's some value in displaying it on the checkout page. One thing to keep in mind is that we'd need to update the mini-cart logic to hide the "checkout" button when the mini-cart is displayed on the checkout page. I don't know if the estimate covers this change.

@elizaan36 what do you think?

[Aljullu]

Even just leaving the mini cart visible and usable on all pages would be better IMHO, as one can still hide it using CSS,
than restoring its functionality afterwards.

Thanks for your feedback, @strarsis! I don't think we can revert the existing behavior as that would impact existing stores. However, we can definitely look into adding an option to display the Mini Cart in Cart and Checkout pages.

One thing to keep in mind is that we'd need to update the mini-cart logic to hide the "checkout" button when the mini-cart is displayed on the checkout page. I don't know if the estimate covers this change.

Good point! I increased the estimate a bit.

While thinking a bit more about this, I see three possible behaviors:

1. Hide the Mini Cart button in Cart and Checkout pages (current behavior).
2. Show the Mini Cart button in Cart and Checkout pages, keeping it interactive (what is suggested in this thread, if I'm not wrong).
3. Show the Mini Cart button in Cart and Checkout pages, but make it non-interactive. This would fix the visual imbalance and at the same time would not create duplicity between controls. Currently, everything that can be done in the Mini Cart can be done in the Cart block as well. In the Checkout block, it's not possible to make changes to the cart, but I think that's intentional and seems to be a common practice in ecommerce stores, so I'm not sure we want to change this with the Mini Cart block.

Thoughts? I'm leaning towards allowing option 1 and 3. The only issue I can find with option 3 is that having the button but it not being interactive might look like a broken experience. But maybe we could add some disabled styles? 🤔

---

Edit: to clarify what I mean, this would be what the three options would look like:

Option 1	Option 2	Option 3

[elizaan36]

👋 Thanks for the ping, @pmcpinto.

First thought is that the visual imbalance when the Mini Cart is hidden is theme specific. I think this example is showing Storefront.

Also, the Mini Cart can always be shown again (with inline CSS) if so desired. I don't think the Mini Cart should show by default on the Cart and Checkout.

• On the Cart it creates a redundant experience where there are potentially three references to the Cart on the same page.
• On Checkout the only value is using the Mini Cart as a back button, but I'm afraid we're creating a patch for a bigger problem to solve which is the lack of a guided checkout flow where navigation is hidden and a "Back to Cart" link is visible to help the shopper focus on the checkout task.

@Aljullu I'd lean towards Option 1 and work towards providing a clear back button to Cart from the Checkout block. I believe this becomes more of a possibility if the Checkout Block is built as a template. Here's a quick mockup to illustrate.

[pmcpinto]

+1 on keeping the current behavior for now

[Aljullu]

Thanks for your input @elizaan36 and @pmcpinto!

First thought is that the visual imbalance when the Mini Cart is hidden is theme specific. I think this example is showing Storefront.

The screenshots were done in TT3. Storefront, as a classic theme, doesn't allow modifying the header with blocks.

I don't think the visual imbalance is theme-specific, as it can be reproduced in any theme if you add the Mini Cart block to the header.

To provide one more example where the current experience might look broken. Imagine a header like this, where the Mini Cart block is aligned to the end of the header:

On Checkout, it looks a bit weird because there is white space at the end, and the Navigation appears in the middle of nothing, "floating":

Another option we could add is to make the Mini Cart not to occupy space at all (aka completely remove it). That would fix the alignment issue above. The reason this is not the default is that in some layouts (ie: Navigation + Logo + Mini Cart with space between), if we 'remove' the Mini Cart, then the layout gets misaligned:

Shop page:

(Navigation + Logo + Mini Cart with space between)

Checkout page:

(as we forced the Mini Cart block removal, now it is: Navigation + Logo with space between)

Unfortunately, I don't think there is one solution that will work in all cases, that's why I think it makes sense providing different options. Right now, users can circumvent this creating different header template parts for the Cart & Checkout pages, but this process is not straightforward and requires them to maintain two header template parts. IMO it would be easier if that behavior could be controlled from the block itself.

On Checkout the only value is using the Mini Cart as a back button, but I'm afraid we're creating a patch for a bigger problem to solve which is the lack of a guided checkout flow where navigation is hidden and a "Back to Cart" link is visible to help the shopper focus on the checkout task.

Heads-up that the Checkout block does include a Return to Cart link at the bottom by default:

I guess that covers your suggestion?

[pmcpinto]

Another option we could add is to make the Mini Cart not to occupy space at all (aka completely remove it). That would fix the alignment issue above. The reason this is not the default is that in some layouts (ie: Navigation + Logo + Mini Cart with space between), if we 'remove' the Mini Cart, then the layout gets misaligned

This can be the solution with the best trade-off. Showing the mini-cart button, even if it's non-interactive, can distract the user in the checkout without adding value to the experience.

[Aljullu]

Thanks, Pedro, sounds good!

It would be helpful to get some design guidance with the copy to make sure this option is easy to understand. In the meanwhile, what about something like this?

Ideally, this option should only be available when added to a template part.

cc @albarin in case you have some thoughts on this.

[albarin]

Ideally, this option should only be available when added to a template part.

cc @albarin in case you have some thoughts on this.

Agree, I think that would be a good trade-off. But I'm not sure if users would really understand the implication of those two options: Make invisible and Don't render could seem the same for lots of people, I guess. Maybe we could provide some more explanation depending on which one is selected to clarify it. 🤔

[webaxones]

On most e-commerce websites, the shopping cart menu remains accessible even on the shopping cart and checkout pages, for the sake of visual consistency. Visual inconsistency can also be distracting. Take a look at Amazon, Ikea, and others – the shopping cart menu remains visible and even clickable. Because, even if it's redundant, it's what users expect to find.
We do not remove the menu item of a product category when displaying that specific product category page, do we?

Another point: we're discussing an FSE parameter, so maybe you could let the website designers decide which behavior to adopt and provide them with the necessary parameters? :) (please)

Personally, as a developer, I want to display this button and maintain its functionality even on the shopping cart page because consistency is a priority for the UX.