WooCommerce cart not showing on mobile: the icon

A theme usually draws one header for the desktop and rebuilds it for a phone. The rebuilt header is where the cart icon goes missing: it is hidden at a set width, moved into a menu that does not list it, or drawn under a bar that covers it. The panel that opens from the icon can slide out past the screen edge, so the count changes and nothing visible happens. On the cart page, a table with price and quantity columns is wider than a phone, and the checkout button can sit off to the right. Each case looks like a missing cart, but the cart works.

• Open the store on a phone and look at the header. Is there a cart icon with a count next to it?
• Tap the icon. Does a cart panel open on screen, or does nothing happen at all?
• Open the menu. Does it list the cart, and does that link go to the cart page?
• On the cart page, scroll sideways. Is the table wider than the screen?
• Find the checkout button. Is it covered by a bar fixed to the bottom of the screen?

On a laptop the cart icon sits at the top right, next to the search and account links. On a phone, the theme rebuilds the header, and each link has to earn its place again. A common result is that the icon disappears below a set width, while the menu still opens and shows shop, collections and contact. The count may still change, so the store seems to work.

Check the header first, because it is the fastest test. Open the store at phone width, and find the icon without scrolling. If the icon is missing from the header and from the menu, the shopper has no route to the cart from the top of the page. Add a cart link in both places before you touch the cart page, since a working cart page does not help a shopper who cannot find it.

Many themes open a small cart panel from the icon rather than sending the shopper to the cart page. That panel is positioned to slide in from the right edge. On a phone, if the panel is sized for a wider screen, its close button and its checkout button can sit past the edge, and the shopper sees a dark overlay with no way out. The tap looks dead, but the panel opened and got stuck off screen.

The right version is a panel that fits the phone width and has a visible close button and a checkout button inside the screen. The wrong version is a panel with a fixed width in pixels, which works on the owner's own large phone and fails on a smaller one. Test the panel on a phone whose width is smaller than yours, because the layout you approve on a laptop is not the one a shopper sees.

Give Mimiq the product address and one task a phone shopper would have: add a phone case from your phone, then find the cart and open it. Simulated visitors use phone browsers, so each run shows the header as a phone draws it. The report gives you the screenshot of each step, whether the count changed, whether a cart panel or cart page opened, and whether the checkout button was reachable without sideways scrolling.

The test shows what one phone size and one browser draw, and the screenshots are the proof. It does not replace a check on your own phone with a finger, because a bar that covers a button depends on the device and the browser. Use both: the test to catch the layout fault quickly, and your own phone to confirm the button is tappable where you expect it.

Rerun the same phone task after every theme update, menu change or header plugin change. A rebuilt mobile menu can quietly lose the cart link when someone adds a page, and the cart icon can move behind a new bar with no warning. The same task each time shows whether the path to the cart still exists, before a campaign sends phone traffic to the product page.