How to build a WooCommerce store with Elementor

Run the WooCommerce setup process, then check that your Shop, Cart, Checkout and My Account pages exist. WooCommerce normally creates these pages during setup, but you can recreate missing pages from WooCommerce > Status > Tools.

Assign the Cart, Checkout and My Account pages under WooCommerce > Settings > Advanced > Page setup. Keep these as separate pages. Using one page for several WooCommerce functions can cause redirects and payment problems.

Add your products under Products > Add New. Include a clear title, price, main image, gallery, description, stock status, shipping information and product categories before you style the layout.

Set your currency, tax, shipping and payment options in WooCommerce. Design is easier when the store already has real product content, because Elementor’s dynamic widgets need product data to show a useful preview.

You can build a working store without Elementor Pro. Use a WooCommerce-compatible theme and its Customizer or, with a block theme, the WordPress Site Editor to adjust product, archive, cart and checkout templates. WooCommerce also provides blocks for core store pages.

This route is fine for a small catalogue and avoids another page builder, but Elementor Free cannot create the full reusable WooCommerce product and archive templates in Theme Builder. You will usually be limited to styling normal pages and relying on the theme for the shop and product layouts.

With Elementor Pro active, open Elementor > Theme Builder and create the shared header and footer. Set your logo, navigation, cart link, account link, colours, fonts and mobile spacing as global design decisions rather than styling each page separately.

Keep the header short on mobile and make the cart easy to reach. Save the template and assign its display conditions so it applies to the whole site, unless you need a different header for a landing page.

Create a Product Archive template for the Shop page, product categories, product tags and search results. Add the Archive Products widget; without it, the template can look correct in the editor but show no product grid on the live archive. Publish it with conditions such as Include > Shop page and, where needed, product categories.

Create a Single Product template for individual products. Use dynamic WooCommerce widgets for the title, images, price, description, stock, tabs, related products and add-to-cart area. The WooCommerce Single Add To Cart widget is required for the Single Product template to load correctly.

Edit the Cart and Checkout pages with Elementor’s WooCommerce widgets where available, or keep WooCommerce’s Cart and Checkout blocks if they already work well with your payment and shipping extensions. Do not replace working checkout content with an empty Elementor page.

Test the store as a customer: open a category, search for a product, view a product, add it to the cart, change quantity, apply a coupon if used, complete checkout and check the order confirmation. Exclude Cart and Checkout from page caching. If a layout disappears, clear caches, update WordPress, WooCommerce, Elementor and the theme, then check for a plugin or theme conflict.

If you want the fast route, use Zota instead of starting with a blank theme. It is a WooCommerce theme built for Elementor, with importable shop layouts and theme controls for the header, footer, colours and typography.

Import one suitable demo, replace its products and branding, then check every template and display condition before launch. A ready-made design saves layout work, but you still need to verify checkout, payment, shipping, mobile spacing and plugin compatibility on your own site.