MinicartDroid – Elementor WooCommerce Mini-Cart Drawer

A native-WooCommerce-compatible mini-cart drawer for Elementor (works great with the Hello Elementor theme). The drawer slides in from the right after a successful add-to-cart and always shows the real WooCommerce cart — WooCommerce remains the single source of truth; the plugin is only a view/controller over it.

Features

• Trigger toggles the drawer — clicking the header cart icon opens the drawer when it's closed and closes it when it's open.
• The drawer is always hidden on the page — it only exists off-screen until the trigger icon (or your custom trigger) opens it. In the Elementor editor the drawer widget shows a small labeled placeholder instead of a drawer mock.
• Auto-open after add-to-cart — the drawer opens only after WooCommerce confirms the product was added (never on failures, validation errors or incomplete variations).
• Full cart control — quantity steppers, item removal, line prices and subtotal all rendered by WooCommerce.
• Coupons — apply/remove coupon codes with chip UI and customer-safe error messages.
• Free-shipping progress — threshold read from your real WooCommerce free-shipping method settings (Shipping Zones), with configurable messages ({amount} placeholder) and progress bar. The bar stays hidden until an enabled Free Shipping method with a Minimum order amount exists, and while the cart is empty.
• "You may also like" recommendations — upsells/cross-sells of cart products (falls back to newest products), horizontally scrollable cards with add-to-cart. Variable products link to the product page so a variation is always chosen.
• Order summary — subtotal, discounts and total, formatted by WooCommerce (any currency, any tax display mode). The total covers the products after discounts only — shipping and fees are excluded, since delivery or self-pickup is chosen at checkout.
• One Elementor widget — the Mini-Cart widget renders the header icon + live count badge (kept in sync with the drawer) and the drawer shell with the same widget's settings; no second widget needed.
• Accessibility — dialog role, focus trap, Escape to close, focus restoration, aria-live notices.
• Race-condition safe — all cart mutations are serialized through one queue; stale responses are discarded; buttons are always restored after failed requests.
• Editor friendly — Elementor editor shows a skeleton preview; no live requests, no duplicate handlers, no auto-open in editor/preview.

Requirements

• WordPress 6.0+
• WooCommerce (any recent version, HPOS-compatible)
• Elementor 3.x
• PHP 7.4+

Installation

1. Copy the minicartdroid folder to wp-content/plugins/.
2. Activate MinicartDroid – Elementor WooCommerce Mini-Cart Drawer in the WordPress admin.
3. Edit your header template in Elementor and add the single Mini-Cart widget (header cart icon with badge — the drawer shell renders with the same widget's settings).
4. Optionally enable Override WooCommerce Cart Redirect in the widget's Behaviour section to turn single-product add-to-cart into AJAX + drawer open.

Upgrading from an earlier two-widget version? The old Mini-Cart Drawer widget is no longer registered. Delete that widget instance from your template — the Mini-Cart widget now renders both the trigger icon and the full drawer. Any drawer controls are available directly on the Mini-Cart widget's panel.

Custom triggers

The Mini-Cart widget has an Extra Trigger Selector field. Any element matching that CSS selector (e.g. .header-cart-trigger) opens the drawer when clicked. You can also call window.MCD_MiniCart.open() / .close() / .refresh() from your own code.

Architecture notes

• All cart data is rendered server-side from WC()->cart and shipped as fragments over WooCommerce's ?wc-ajax= endpoints (never hard-coded admin-ajax.php).
• Widget settings are mirrored into the WooCommerce customer session so AJAX fragments render with the exact same configuration as the page.
• The browser never sends prices, totals or trusts client-side cart state.
• Endpoints: mcd_get_cart, mcd_set_qty, mcd_remove_item, mcd_apply_coupon, mcd_remove_coupon, mcd_add_to_cart — all nonce-checked.
• HPOS compatibility is declared; no order tables are ever queried directly.

Files

minicartdroid/
├── minicartdroid.php                     Bootstrap + dependency checks + HPOS
├── uninstall.php                         Transient cleanup
├── includes/
│   ├── class-mcd-plugin.php              Controller: assets, widgets, config
│   ├── class-mcd-ajax.php                wc-ajax endpoints (nonce-verified)
│   ├── class-mcd-drawer.php              Server-side drawer/fragment renderer
│   ├── class-mcd-recommendations.php     Recommended products (cached)
│   ├── class-mcd-free-shipping.php       Threshold + progress calculator
│   ├── class-mcd-price-summary.php       Subtotal / discounts / total
│   ├── class-mcd-cart-icon.php           Icons + badge
│   ├── class-mcd-widget-drawer.php       Elementor: drawer base (controls + shell mapping)
│   └── class-mcd-widget-cart-button.php  Elementor: Mini-Cart (trigger + drawer in one)
└── assets/
    ├── css/mcd-frontend.css              Scoped .mcd-* styles
    ├── css/mcd-editor-preview.css        Editor skeleton preview
    ├── js/mcd-frontend.js                Drawer controller (MCD_MiniCart)
    └── js/mcd-editor-preview.js          Editor interaction guard