Off-Canvas Cart Drawer for WooCommerce

The cart drawer is my favorite conversion pattern that nobody thinks about: a shopper adds an item, a panel slides in with the cart, and they continue browsing without a page load. Elementor's off-canvas widget builds this natively, no extra plugin. I built and tested one hundred sixty off-canvas panels for the library, and cart drawers were the family that taught me the most.

Anatomy of a cart drawer

An off-canvas panel is a container that lives off screen until summoned. A cart drawer fills it with three things: the mini cart widget reading live store state, a checkout button that goes straight to checkout, and a close affordance visitors can find. Width matters more than it seems; my drawers settled around a third of the desktop viewport and full width on phones after side-by-side comparisons.

Drawer design is subtraction. The moment a cart drawer needs a scroll map, it should have been a cart page.

Wiring the open trigger

The panel opens when something calls it: usually the cart icon in your header. Set the icon's link action to open the off-canvas element and they connect. This binding lives on your site, not in the template, because the template cannot know which header icon is yours. After import, the wiring step takes under a minute and the off-canvas import guide shows exactly where the setting sits.

Live cart behavior, again

Like the cart page, the drawer renders the visitor's actual cart. Empty cart, empty drawer, correct behavior. When I capture drawer sections, the fixture store fills a cart first so the screenshots show line items; on your site the drawer earns its keep the moment a real product lands in it. Test the add-to-cart flow end to end: add an item, watch the drawer contents update, adjust a quantity inside the drawer, and confirm totals follow. That loop touches WooCommerce fragments, and when a caching plugin breaks the loop, the drawer shows stale contents; excluding cart fragments from your page cache is the standard cure.

Where drawers beat pages, and where they do not

Drawers shine for quick add-and-continue shopping. They are the wrong container for complex carts with coupons, shipping calculators, and gift options; that workload belongs on the full cart page. Most stores I have built for want both: drawer for momentum, page for reconsideration. The off-canvas collection also includes mobile menus and filter panels if the pattern earns a second job on your site, and the mini cart sections drop into headers that need the icon-with-count pattern.

The details that separate smooth from janky

Drawer quality lives in transitions and edge cases. The slide animation should finish under a third of a second; slower reads as sluggish and faster reads as a glitch. The overlay behind the drawer needs to close it on click, because that is where every user instinctively taps first, and the escape key should do the same for keyboard users. While the drawer is open, the page behind it should not scroll; a background that scrolls under an open drawer is the single most common jank I found reviewing our early panels, and locking body scroll while open is the fix.

Long carts need a plan too. Fifteen line items will overflow any drawer, so the line item list should scroll inside the panel while the totals and checkout button stay pinned at the bottom. Pinning the action area is what keeps the drawer useful at every cart size; a checkout button that scrolled away with the list is a checkout that does not happen.

Counting what the drawer earns

The point of the drawer is preserved momentum, and you can watch for it directly. After shipping one, compare two behaviors: how often an add-to-cart is followed by more browsing, and how often the cart page gets visited at all. On builds where the drawer works, the cart page becomes a place visitors go to reconsider rather than a mandatory stop, and continued browsing after the first add rises. If neither number moves, check whether the drawer is actually opening on add, whether it renders fast on phones, and whether the checkout button inside it is doing its job.

FAQ

Does the drawer need Elementor Pro and WooCommerce?

Yes to both. The off-canvas widget is Pro, and the mini cart inside it needs an active WooCommerce.

Why is my drawer empty when I open it?

Because the cart is. Add a product and reopen. If items exist but the drawer lags behind, your page cache is serving stale cart fragments.

Can the drawer open automatically after add to cart?

Yes, bind the open action to the add-to-cart event in the widget's settings, though I default to opening on icon click and let stores opt into the automatic version.

Slide from left or right?

Right, in nearly every store I have tested, because cart icons live top right and the motion reads as connected. Left-slide belongs to navigation drawers.

What belongs inside the drawer besides the cart rows?

Less than the temptation suggests, but a few additions carry their weight. A free-shipping progress line is the best of them: spend another amount for free delivery, updating as quantities change, gives the drawer a reason to exist beyond confirmation and measurably nudges order values on the stores where I have shipped it. A single quiet upsell row can work when it is genuinely related to the cart contents; a generic bestseller carousel cannot, and it doubles the drawer's render weight for nothing. Trust signals belong at the bottom in one compact line, payment marks and the returns promise, because the drawer is often where a first-time buyer decides whether the store feels legitimate. What I refuse to put in drawers after trying them: coupon fields, which invite the visitor to leave and hunt codes at the exact moment of momentum; newsletter asks, wrong context entirely; and shipping calculators, which need more space than a panel has and belong on the cart page. The test for every candidate element is the same question: does this help the visitor finish, or does it help some other goal hitchhike on the checkout path? The drawer earns its keep by being the shortest distance between wanting and buying, and every addition either shortens that distance or lengthens it.