A slide-out cart is easy to build and easy to get subtly wrong. The usual failure is not that it breaks, but that it drifts: the panel shows three items while the header badge shows two, because two different pieces of code decided separately what the cart contains.
One source of truth, rendered once
WooCommerce already has a mechanism for this. Its fragments system lets a plugin declare that a given selector on the page should be replaced with freshly rendered HTML whenever the cart changes. We registered the drawer’s body as one such fragment, so the panel’s contents are produced by exactly one function.
Adding something to the cart from a product grid, changing a quantity inside the drawer, removing the last item — all three end at the same render. There is no second template to keep in step, which is the actual reason drawers drift out of sync.
Quantity changes without leaving the page
Changing quantity posts to a small endpoint that verifies a nonce, confirms the cart line exists, applies the change and recalculates totals. A quantity of zero removes the line rather than erroring, because that is what a customer who clicks the minus button one more time means.
The response carries the rendered fragments and the new item count together, so the drawer and the header badge update from a single reply instead of racing each other.
The checks that are not optional
The endpoint is reachable by logged-out visitors, since most shoppers are guests. That makes the nonce check and the validation of the cart key the only things standing between a stranger and someone else’s session state. Both run before anything is modified, and the endpoint answers a failed check with a flat error rather than a helpful explanation.
Key takeaways
- Render cart markup in one place and let the fragments system deliver it everywhere.
- A drawer that disagrees with the header badge is two renderers, not one bug.
- Treat quantity zero as removal — it is what the customer meant.
- Guest-accessible endpoints still need nonce and ownership checks before they change anything.
Related reading: auto-selecting free shipping at a cart threshold, and changing a product variant after an order is placed.
Running into a similar limitation in your own WooCommerce or WordPress store? Let’s Talk — ArtinTech Solution builds exactly this kind of custom store tooling.