Structure

3-column product cards

21 elements, laid out across 3 columns. Built from Elementor V4 atomic elements; spacing and type come from your design system variables.

Works with: Elementor Free · Requires Elementor V4 (atomic editor)

About This Component

Product with 3-column Product Cards, shipping as product-sections-001-3-column-product-cards-atomic, gives 21 elements 3-column product shape. Nothing in product-sections-001-3-column-product-cards-atomic is hardcoded: the div-block and flexbox widgets follow V4 variables. product-sections-001-3-column-product-cards-atomic imports anywhere running the free Elementor plugin.

How to use

1. 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. 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. 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.

Full guide with troubleshooting: How to Import WooCommerce Sections