Building a WooCommerce Store with Elementor: Product Pages, Shop, and Cart

Elementor and WooCommerce together form one of the most flexible combinations for building custom online stores on WordPress. While WooCommerce Documentation handles the e-commerce functionality (products, cart, checkout, payments), Elementor gives you visual control over how those store pages look and function. In this guide, we walk through building key WooCommerce pages with Elementor, including product pages, shop archives, and the cart experience.

This tutorial assumes you have WordPress, WooCommerce, and Elementor Pro installed. Elementor Pro is required for WooCommerce widgets—the free version of Elementor does not include them.

What You Need Before Starting

Understanding Elementor's WooCommerce Builder

Elementor Pro includes a dedicated WooCommerce Builder within its Theme Builder system. This allows you to create custom templates for:

• Single Product Page: Control the layout of individual product pages
• Product Archive: Customize the shop page and category pages
• Cart Page: Design a custom cart layout
• Checkout Page: Customize the checkout form layout
• My Account Page: Redesign the customer account dashboard

Each template uses WooCommerce-specific widgets that pull dynamic data from your products. This means you design the layout once, and it applies to all products (or specific categories) automatically.

Building a Custom Product Page

Step 1: Create the Template

1. Navigate to Templates → Theme Builder in your WordPress admin
2. Click "Add New" and select "Single Product" as the template type
3. Choose a pre-built product page template or start from a blank canvas
4. The Elementor editor will open with WooCommerce widgets available in the panel

Step 2: Add WooCommerce Widgets

Key WooCommerce widgets for product pages:

Step 3: Layout Best Practices

A high-converting product page follows a tested layout pattern:

1. Above the fold: Product images (left, 50-60% width) + title, price, rating, short description, and add-to-cart button (right, 40-50% width)
2. Below the fold: Product data tabs (full description, specifications, reviews)
3. Bottom section: Related products and upsells in a grid (3-4 columns)
4. Trust elements: Shipping info, return policy, security badges near the add-to-cart button

Keep the add-to-cart button visible without scrolling on both desktop and mobile. Use contrasting colors for the button to draw attention.

Customizing the Shop Page (Product Archive)

Step 1: Create an Archive Template

1. Go to Templates → Theme Builder → Product Archive
2. Add a new template and select "Product Archive" as the type
3. Assign display conditions (all archives, specific categories, or tag pages)

Step 2: Configure the Products Grid

The Archive Products widget displays your product listing with these options:

• Columns: 2-6 columns (3-4 works well for most stores)
• Products per page: 12-24 is standard for user experience
• Pagination: Numbered pages, "load more" button, or infinite scroll
• Sorting dropdown: Allow customers to sort by price, popularity, or rating
• Sale badge: Customize the sale badge position, color, and text

For stores with many products, add category filtering above the grid. You can use Elementor's Menu widget or a product filter plugin like JetWooBuilder for advanced filtering options.

Designing the Cart Page

Elementor Pro lets you customize the cart page layout. A good cart page should:

• Display product images, names, prices, and quantities in a clean table
• Show the running total prominently
• Include a "Continue Shopping" button that returns to the shop page
• Display a shipping calculator so customers can estimate delivery costs
• Show cross-sell products below the cart table

The Elementor Cart widget replaces the default WooCommerce cart layout with a visual editor where you can style every element—table borders, button colors, typography, and spacing.

Customizing the Checkout Page

The checkout page directly impacts your conversion rate. Elementor Pro's Checkout widget provides control over:

• Form layout: One-column or two-column billing/shipping form
• Order summary position: Side-by-side with form or above/below
• Button styling: Place order button color, size, and text
• Payment section: Radio button or tab layout for payment methods
• Trust badges: Add security icons and guarantee text near the payment form

For checkout conversion optimization tips, see our WooCommerce checkout optimization guide.

Performance Considerations

Elementor adds CSS and JavaScript to your pages. For a WooCommerce store, performance is directly tied to conversions. Keep these tips in mind:

• Use Flexbox containers instead of sections/columns for fewer DOM elements
• Optimize product images: Use WebP format, proper dimensions, and lazy loading. See our Elementor Help Center for more information.
• Limit widget count: Each widget adds markup; use only what you need
• Enable Elementor's performance features: Improved Asset Loading, Improved CSS Loading
• Use a caching plugin: WP Rocket works well with Elementor WooCommerce setups

Essential Addons for Elementor WooCommerce

These Elementor addons extend WooCommerce building capabilities:

Frequently Asked Questions

Do I need Elementor Pro for WooCommerce, or does the free version work?

Elementor Pro is required for WooCommerce-specific widgets (Product Images, Add to Cart, Product Data Tabs, Cart, Checkout, etc.). The free version of Elementor does not include these widgets. You can use the free version to design regular pages, but custom WooCommerce templates require Elementor Pro.

Can I use Elementor for the checkout page?

Yes. Elementor Pro includes a Checkout widget that replaces the default WooCommerce checkout layout. You can customize the form fields, order summary, payment section, and overall layout. However, be careful with heavy customizations that might break payment gateway integrations—always test the full purchase flow after making changes.

How do I create different product page layouts for different categories?

In Elementor's Theme Builder, you can assign display conditions to each template. Create one product page template for clothing (with size/color selectors), another for digital products (without shipping info), and so on. Each template applies only to products in the specified categories.

Does Elementor slow down WooCommerce?

Elementor adds CSS and JavaScript overhead to any page. On product pages with many widgets, this can increase load times by 0.5-1.5 seconds compared to the default WooCommerce templates. Using Elementor's built-in performance features, optimizing images, and using a caching plugin helps mitigate this impact. For performance-critical stores, consider a lighter theme like GeneratePress.

Can I use Elementor WooCommerce templates with any theme?

Most Elementor WooCommerce templates work with any theme that supports WooCommerce. However, some themes may have their own product page styling that conflicts with Elementor templates. Themes like Astra, GeneratePress, and OceanWP are designed to work seamlessly with Elementor and provide the cleanest canvas for custom templates.