๐Ÿ’ก Free copying runs on a monthly allowance. Snapelement Pro makes it unlimited and unlocks all 20,500+ components, including the full V4 Atomic library. See plans โ†’

This is a V3 Adaptive component, part of the free catalog: free to copy on the free plan, within a monthly allowance, and no account is needed to start. What you copy stays licensed to you permanently, on unlimited sites, including client sites. See what each plan includes.

Styled by YOUR site. This preview uses our demo colors and fonts. The component itself contains no hardcoded styles: paste it into Elementor and it automatically adopts your site's Global Styles, so every element matches your brand.

Structure

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

7 elements, single-column layout. Fully responsive: columns stack on mobile, and colors and typography resolve from your Global Styles.

Works with: Elementor Pro + WooCommerce ยท Elementor 3.16 or newer (Flexbox Containers)

About This Component

Cart Drawer Off-Canvas Dark Slate 004, indexed as off-canvas-cart-drawer-004, places 7 elements compactly at single-column spacing. Across its 7 elements, off-canvas-cart-drawer-004 styles the button and heading widgets from Global Styles. off-canvas-cart-drawer-004 asks just for an active WooCommerce store with Elementor Pro.

How to use

  1. 1.Download and import the template. Click Download JSON on the component page, then import via Templates, then Saved Templates, then Import Templates.
  2. 2.Place the panel and its trigger. Drag the imported template into your page or header from the library's Saved tab. The template contains two parts: the trigger button and the Off-Canvas widget holding the panel.
  3. 3.Wire the trigger. Select the trigger button, open its Link settings, click the dynamic tag icon, and choose Actions, then Off-Canvas, pointing at the panel's widget. Any other button or menu item can open the same panel the same way.
  4. 4.Edit the panel content. The panel is a normal container: swap links, connect the contact form's action, or leave the Woo Mini Cart to render your store's cart. Cart drawers require WooCommerce to be active.

Full guide with troubleshooting: How to Import Elementor Off-Canvas Panels

This component includes widgets from the Elementor Pro plugin (e.g., forms, sliders). You'll need an active Elementor Pro license on your WordPress site to use them. Learn about Elementor Pro โ†’

Related Off-Canvas Panels

Quick View Off-Canvas Soft Gray 020 - Elementor component
Elementor ProV3 Adaptive

Quick View Off-Canvas Soft Gray 020

Slide-in product quick-view panel with image, summary, price, and action.

buttonheadingimageoff-canvas+1
Cart Drawer Off-Canvas Soft Gray 001 - Elementor component
Elementor ProV3 Adaptive

Cart Drawer Off-Canvas Soft Gray 001

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

buttonheadingoff-canvaswoocommerce-menu-cart
Cart Drawer Off-Canvas Soft Gray 002 - Elementor component
Elementor ProV3 Adaptive

Cart Drawer Off-Canvas Soft Gray 002

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

buttonheadingoff-canvaswoocommerce-menu-cart
Cart Drawer Off-Canvas Clean White 003 - Elementor component
Elementor ProV3 Adaptive

Cart Drawer Off-Canvas Clean White 003

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

buttonheadingoff-canvaswoocommerce-menu-cart
Cart Drawer Off-Canvas Soft Gray 005 - Elementor component
Elementor ProV3 Adaptive

Cart Drawer Off-Canvas Soft Gray 005

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

buttonheadingoff-canvaswoocommerce-menu-cart
Cart Drawer Off-Canvas Dark Slate 006 - Elementor component
Elementor ProV3 Adaptive

Cart Drawer Off-Canvas Dark Slate 006

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

buttonheadingoff-canvaswoocommerce-menu-cart
Cart Drawer Off-Canvas Clean White 007 - Elementor component
Elementor ProV3 Adaptive

Cart Drawer Off-Canvas Clean White 007

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

buttonheadingoff-canvaswoocommerce-menu-cart
Cart Drawer Off-Canvas Clean White 008 - Elementor component
Elementor ProV3 Adaptive

Cart Drawer Off-Canvas Clean White 008

Slide-in cart with the Woo Mini Cart inside and a checkout action; requires WooCommerce.

buttonheadingoff-canvaswoocommerce-menu-cart