Elementor enables visual design for WooCommerce stores. This guide covers setup, WooCommerce widgets, and best practices for store design.
integrates with
TOP PICK
Elementor Page Builder
Design Integration for WooCommerce
4.5 ★
7157 reviews
Price
Free
Active Users
10+ million
Last Updated
2025-12-21
Why Elementor for WooCommerce?
Related: Shopify PageFly Integration: Landing Page Builder Guide (2025), Internal Link Finder.
Visual store building:
| Feature | Benefit |
|---|---|
| Drag-and-drop | No coding needed |
| WooCommerce widgets | Product, cart, checkout |
| Theme builder | Custom templates |
| Responsive | Mobile-optimized |
| Popup builder | Promotions, email capture |
What you can design:
- Homepage
- Product pages
- Shop/category pages
- Cart page
- Checkout page
- Account pages
Elementor Pricing
| Plan | Sites | Price/Year |
|---|---|---|
| Free | Unlimited | $0 |
| Essential | 1 | $59 |
| Advanced | 3 | $99 |
| Expert | 25 | $199 |
| Agency | 1000 | $399 |
Pro features for WooCommerce:
- WooCommerce widgets (15+)
- Theme builder
- Popup builder
- Dynamic content
- Custom CSS
Getting Started
Step 1: Install Elementor
- Go to Plugins > Add New
- Search “Elementor”
- Install and activate
- Upgrade to Pro (recommended)
Step 2: Install Pro (Optional)
For WooCommerce features:
- Purchase Elementor Pro
- Download plugin
- Upload to WordPress
- Activate license
Data Flow
%%{init: {'theme': 'base', 'themeVariables': { 'primaryColor': '#e0f2fe', 'primaryTextColor': '#0369a1', 'primaryBorderColor': '#0369a1', 'lineColor': '#64748b', 'secondaryColor': '#f0fdf4', 'tertiaryColor': '#fef3c7'}}}%%
graph LR
A[WooCommerce Store] -->|Data Sync| B[WooCommerce]
B -->|Bi-directional| C[Elementor]
Real-time sync
Scheduled sync
Step 3: Configure Settings
Elementor settings:
- Color palette
- Typography
- Layout defaults
- Integrations
Step 4: Start Building
Create first page:
- Add New Page
- Click Edit with Elementor
- Start designing
WooCommerce Widgets (Pro)
Product Widgets
| Widget | Function |
|---|---|
| Products | Display products grid |
| Product Categories | Show categories |
| Add to Cart | Buy button |
| Product Price | Price display |
| Product Title | Product name |
| Product Images | Gallery |
| Product Stock | Availability |
| Product Meta | SKU, tags, category |
| Product Data Tabs | Description, reviews |
| Related Products | Recommendations |
| Upsells | Upgrade suggestions |
Cart Widgets
| Widget | Function |
|---|---|
| Cart | Full cart page |
| Menu Cart | Header cart icon |
| Cart Totals | Price summary |
Checkout Widgets
| Widget | Function |
|---|---|
| Checkout | Full checkout |
| My Account | Customer account |
| Purchase Summary | Order review |
Building Product Pages
Single Product Template
Create custom layout:
- Go to Templates > Theme Builder
- Add Single Product
- Design layout with widgets
- Set display conditions
Essential Elements
| Element | Purpose |
|---|---|
| Product Images | Gallery display |
| Product Title | Clear heading |
| Product Price | Prominent pricing |
| Add to Cart | Purchase action |
| Short Description | Quick overview |
| Data Tabs | Full details |
| Related Products | Cross-sell |
Example Layout
Layout structure:
├── Header (global)
├── Product Images (left/right)
├── Product Info (opposite side)
│ ├── Title
│ ├── Price
│ ├── Short description
│ └── Add to cart
├── Data Tabs (full width)
├── Related Products (full width)
└── Footer (global)
Building Shop Pages
Archive Template
Custom shop/category pages:
- Templates > Theme Builder
- Add Product Archive
- Design listing layout
- Set conditions
Product Grid Options
| Setting | Options |
|---|---|
| Columns | 2-6 |
| Products per page | Custom |
| Pagination | Standard, load more |
| Sorting | Show/hide |
| Filtering | Categories, attributes |
Category Page Example
Structure:
├── Category Header
│ ├── Category image
│ ├── Category title
│ └── Description
├── Filters (sidebar or top)
├── Product Grid
│ └── Pagination
└── Related Categories
Cart & Checkout Design
Custom Cart Page
Create cart template:
- Edit Cart page
- Remove default block
- Add Elementor Cart widget
- Customize styling
Custom Checkout
Design checkout:
- Edit Checkout page
- Add Checkout widget
- Customize fields
- Add trust elements
Checkout Optimization
| Element | Purpose |
|---|---|
| Trust badges | Build confidence |
| Security seals | Reduce anxiety |
| Express checkout | Faster completion |
| Progress indicator | Show steps |
Homepage Design
Ecommerce Homepage
Essential sections:
- Hero banner
- Featured products
- Categories
- Bestsellers
- Testimonials
- Newsletter signup
Product Showcase
Display options:
- Products widget (grid)
- Carousel slider
- Tabbed categories
- Featured collections
Dynamic Content
Pull from WooCommerce:
- On-sale products
- Best sellers
- New arrivals
- Category products
Theme Builder
Template Types
| Template | Purpose |
|---|---|
| Single Product | Product pages |
| Product Archive | Shop, categories |
| Header | Site-wide header |
| Footer | Site-wide footer |
| Single Post | Blog posts |
| 404 | Error page |
Display Conditions
Apply templates to:
- All products
- Specific categories
- Product tags
- Individual products
Example Conditions
| Template | Condition |
|---|---|
| Luxury product | Category: Premium |
| Sale product | On sale: Yes |
| Electronics | Category: Electronics |
Popup Builder
Ecommerce Popups
| Type | Trigger |
|---|---|
| Email capture | Timed delay |
| Exit intent | Mouse leave |
| Sale notification | Scroll |
| Cart popup | Add to cart |
Creating Popups
- Templates > Popups
- Add new popup
- Design content
- Set triggers and conditions
- Publish
Best Practices
| Practice | Implementation |
|---|---|
| Mobile-friendly | Responsive design |
| Easy close | Clear X button |
| Value offer | Incentive to signup |
| Timing | Not immediate |
Performance Optimization
Speed Tips
| Tip | Implementation |
|---|---|
| Optimize images | Compress before upload |
| Limit elements | Keep pages simple |
| Use Flexbox | Modern layout |
| Minimize CSS | Avoid unnecessary styles |
Critical Pages
Prioritize speed on:
- Product pages
- Checkout
- Cart
- Homepage
Caching
Use caching plugins:
- WP Super Cache
- W3 Total Cache
- WP Rocket
Responsive Design
Mobile Preview
Always check:
- Mobile preview mode
- Tablet preview
- Different screen sizes
Per-Device Settings
Customize for devices:
- Hide/show elements
- Different layouts
- Font sizes
- Spacing adjustments
Mobile-First Tips
| Element | Mobile Consideration |
|---|---|
| Buttons | Large, tappable |
| Text | Readable size |
| Images | Optimized size |
| Navigation | Simple, clear |
Integrations
Marketing
| Plugin | Integration |
|---|---|
| Mailchimp | Form widget |
| Klaviyo | Embed forms |
| HubSpot | Form integration |
WooCommerce Plugins
| Plugin | Compatibility |
|---|---|
| Subscriptions | Works |
| Memberships | Works |
| Bookings | Works |
| Product Add-ons | Works |
Best Practices
Design Principles
| Principle | Application |
|---|---|
| Hierarchy | Clear visual order |
| Whitespace | Don’t overcrowd |
| Consistency | Same styles throughout |
| Focus | Clear CTAs |
Conversion Optimization
| Element | Placement |
|---|---|
| Add to cart | Above fold |
| Trust badges | Near CTA |
| Reviews | Product page |
| Related products | Below main content |
SEO
| Practice | Implementation |
|---|---|
| Heading structure | Proper H1-H6 |
| Image alt text | Descriptive |
| Page speed | Optimize |
| Mobile-friendly | Responsive design |
Troubleshooting
Layout Issues
Causes:
- Theme conflict
- CSS conflicts
- Widget settings
Solutions:
- Check theme compatibility
- Clear cache
- Review settings
- Contact support
Speed Issues
Causes:
- Too many elements
- Large images
- Too many plugins
Solutions:
- Simplify design
- Optimize images
- Reduce plugins
Elementor vs Alternatives
| Feature | Elementor | Divi | Beaver |
|---|---|---|---|
| WooCommerce widgets | 15+ (Pro) | Many | Basic |
| Pricing | $59/yr | $89/yr | $99/yr |
| Ease of use | Easy | Medium | Easy |
| Theme builder | Pro | Yes | Pro |
| Best for | Most users | Full package | Simple sites |
Next Steps
After setup:
- Design homepage - First impression
- Create product template - Consistent products
- Customize checkout - Reduce friction
- Add popups - Email capture
- Test everything - All devices
WooCommerce + Elementor implementation checklist (2025)
This section adds practical “make it stable” steps you can use after you install the app/connector. It’s intentionally lightweight: the goal is fewer sync surprises, cleaner reporting, and easier troubleshooting.
1) Quick setup checklist
- Permissions first: grant only the scopes you need (orders/customers/products as required) and document who owns the admin credentials.
- Data mapping: confirm how email, phone, currency, and SKU are mapped between WooCommerce and Elementor.
- Historical import: decide how far back to import orders/customers (avoid importing years of data if you don’t need it).
- Deduplication rules: pick one unique identifier per object (usually email for customers, order ID for orders) to prevent doubles.
- Alerts: set a lightweight alert path (email/Slack) for failed syncs, auth expiry, and API rate limits.
2) Data you should verify after connecting
Most integration issues show up in the first hour if you test the right things. Use the table below as a QA checklist (create a test order if needed).
| Data object | What to check | Why it matters |
|---|---|---|
| Customers | Email/phone format, marketing consent fields, duplicates | Prevents double messaging and broken segmentation |
| Orders | Order total, tax, discount, shipping, currency | Keeps revenue reporting and automation triggers accurate |
| Line items | SKU, variant ID, quantity, refunds/returns behavior | Avoids inventory and attribution mismatches |
| Fulfillment | Status changes + timestamps, tracking numbers, carrier fields | Drives customer notifications and post-purchase flows |
| Catalog | Product titles, handles, images, collections/tags | Ensures personalization and reporting match your storefront |
3) Automation ideas for Design
- Start with one core workflow and validate end-to-end before adding more automation.
- Keep field naming consistent (email, phone, currency, SKU) to reduce mapping bugs.
- Monitor errors weekly and document a simple rollback plan for high-impact changes.
API sanity check (WooCommerce REST API)
If your integration UI says “connected” but data isn’t flowing, a quick API call helps confirm whether the store is accessible and returning the objects you expect.
# List the 5 most recent orders (REST)
curl -u ck_your_key:cs_your_secret \
"https://example.com/wp-json/wc/v3/orders?per_page=5&orderby=date&order=desc"Tip: keep tokens/keys in environment variables, and test in a staging store/site before rolling changes to production.
4) KPIs to monitor (so you catch problems early)
- Sync freshness: how long it takes for a new order/customer event to appear in Elementor.
- Error rate: failed syncs per day (and which object types fail most).
- Duplicates: number of merged/duplicate contacts or orders created by mapping mistakes.
- Revenue parity: weekly spot-check that WooCommerce totals match downstream reporting (especially after refunds).
- Attribution sanity: confirm that key events (purchase, refund, subscription) are tracked consistently.
5) A simple 30-day optimization plan
- Week 1: connect + map fields, then validate with 5–10 real orders/customers.
- Week 2: enable 1–2 automations and measure baseline KPIs (conversion, AOV, repeat rate).
- Week 3: tighten segmentation/rules (exclude recent buyers, add VIP thresholds, handle edge cases).
- Week 4: document the setup, create an “owner” checklist, and set a recurring monthly audit.
Related integration guides
Browse all: integration guides.
For WooCommerce marketing, see WooCommerce Klaviyo integration. For payments, check WooCommerce Stripe integration.