How to Import WooCommerce Sections
These sections are built on WooCommerce's own widgets, so they render YOUR products, cart, and account data dynamically: nothing is hardcoded. Import them like any section; the only requirements are Elementor Pro and an active WooCommerce.
- 1
Download and import
Click Download JSON on the component page, then import via Templates, Saved Templates, Import Templates, or paste the copied JSON straight into the Elementor canvas.
- 2
Place it where it belongs
Product sections and grids go on any page. Single-product layouts belong in a product template (Theme Builder, Single Product) so the widgets have a product to render. Cart and checkout sections go on the pages WooCommerce has assigned as Cart and Checkout. My Account layouts go on the My Account page.
- 3
Verify with real data
Preview with products in the cart and, for account layouts, while logged in: the widgets render live store state, so an empty cart legitimately shows an empty-cart message.
Troubleshooting
The section renders an empty-cart or login message
That is the widget doing its job: cart widgets render the visitor's actual cart and account widgets render the login state. Add products to the cart or log in to see the full layout.
Single-product widgets show placeholder text on a normal page
Widgets like Product Title and Product Images need a product context. Place the section inside a Single Product template in the Theme Builder, or on a page only for layout drafting.
Checkout looks different from the screenshot
Checkout fields come from your WooCommerce settings (countries, payment methods, coupons). The layout is the template's; the fields are your store's.
Browse every template this guide covers:
Cart & Checkout →