Block themes: minicart doesn't allow users to checkout

[Robertght]

Quick summary

If you use a Block theme like Blockase/Attar/etc and add the Mini cart block to the nav menu the footer of that mini cart won't show up on mobile, being covered by the browser bar

Steps to reproduce

1. Activate Blockbase
2. Add the Minicart block to the header
3. Add a product to your cart and click on the cart icon
4. You should see the cart section, but you won't be able to click on the bottom checkout option.

What you expected to happen

To see the entire section

What actually happened

The section was cut:

Context

5719527-zen

5697160-zen

Platform (Simple, Atomic, or both?)

Atomic

Theme-specific issue?

Block themes

Browser, operating system and other notes

No response

Reproducibility

Consistent

Severity

Some (< 50%)

Available workarounds?

No but the platform is still usable

Workaround details

Change the theme or find a CSS workaround.

[github-actions]

Support References

This comment is automatically generated. Please do not edit it.

• 5719527-zen
• 5697160-zen
• 5800852-zen

[kavyagokul]

📌 SCRUBBING : RESULT

• Tested on P2 - Uncertain
• Tested on Simple - Uncertain
• Tested on AT - Uncertain
• Tested on Self-hosted - Uncertain
• Replicable on Core - Yes/No

📌 FINDINGS/SCREENSHOTS/VIDEO

• The footer seems to be there, just hidden below the fold. It needs one to scroll to show.
  Screencast from 2022-11-22 21-15-11.webm

📌 ACTIONS

• Await author feedback

📌 Message to Author
@Robertght I see that you started adding a screenshot, but it didn't work. I was not able to replicate this as shown in my findings. Can you add your screenshot/screencast so we have more info to be able to replicate this?

[Robertght]

Sure! Here it is:

Please check the above on a mobile device.

[zachspears]

Testing the above issues on mobile I had a related issue, leaving this open for further testing. In both Firefox and Safari the Mini Cart did not not display the item in my cart, and was formatted incorrectly:

VQBsu9.mp4

Mgo8SO.mp4

[cuemarie]

Thanks @zachspears for including your test results! This issue (with the blank cart) looks like a separate bug than the issue originally reported - perhaps one of these?

• Mini Cart block: Cart showing blank with WooCommerce Subscriptions plugin active #66683
• Mini Cart Block pop-out is blank when running Page Optimize #65662
• Mini Cart does not display anything after adding products on AT sites woocommerce/woocommerce-blocks#6874

Update - I saw the same issue on my test site; deactivating Page Optimize restored the cart contents (though they ain't pretty), so I'm thinking that's the issue you were encountering as well

[cuemarie]

📌 SCRUBBING : RESULT

• Tested on AT: Replicated

📌 FINDINGS/SCREENSHOTS/VIDEO

• Thanks for the updates to your steps to replicate, @Robertght ! Here's what I was able to replicate:

1. Add Mini Cart block to header in Blockbase
2. Deactivate Page Optimize to avoid issue Mini Cart Block pop-out is blank when running Page Optimize #65662
3. Open site on mobile browser - I tested with iOS Safari & Chrome
4. Add multiple items to the cart
5. Tap the Cart from the header and scroll down

Results - With only one item in my cart, I have to scroll down in the cart section to view and select "Go to Checkout". With multiple products in the cart, when I first scroll down to see the "go to checkout" button, only the contents of the cart scroll, and not the entire sidebar. This results in me not being able to view the button. When I scroll down a second time, the button appears. There seems to be a

iOS Chrome (single product vs multiple products):

RPReplay_Final1669742849.mov

iOS Safari (multiple products):

RPReplay_Final1669742955.MP4

📌 ACTIONS

• Marked as Triaged for Quality Squad review

[Gustavo-Hilario]

Another report:

• 5800852-zen

I could reproduce this issue on the Tsubaki demo site: https://tsubakidemo.wpcomstaging.com/

I've helped the user above with a CSS code workaround for now:

/* Fix the issue with the Checkout button missing on the mini-cart on mobile | XXXXXX-hc/zen GH */
@media (max-width: 600px) {
.wc-block-mini-cart__title {
    flex-basis: 10%;
}
.wc-block-mini-cart__items {
    flex-basis: 65%;
}
.wc-block-mini-cart__footer {
    flex-basis: 25%;
}
}
 
/* End  | XXXXXX-hc/zen */

I'm not sure if the code will work for all sites, and a different media query might be necessary. Please test the code before sharing.

[kavyagokul]

Context from closed duplicate

• #38844553-hc

[kuropixel]

Another report (Theme: Tsubaki):
39928718-hc

Sharing CSS workaround resolved the issue.

[Aljullu]

Howdy folks, have you received new reports of this bug? I think it was fixed in woocommerce/woocommerce-blocks#8351, so I guess we can close this issue?

[cuemarie]

Retesting today, Mini-Cart block on a Blockbase theme works as expected in both desktop and mobile responsive views:

Desktop

Mobile Responsive View

6ZOU7e.mp4

📌 ACTIONS

• Closing as resolved