How to Add WooCommerce to Elementor

Last modified: August 10, 2026

Elementor

If you want full design control over your WooCommerce store, pairing it with Elementor is one of the most popular choices WordPress developers make. By default, WooCommerce applies its own templates for the shop page, product pages, cart, and checkout, which means the look of your store is largely dictated by your active theme. Elementor lets you override those templates and design every section of your store visually, without writing code. This guide walks through the entire setup process, from installing both plugins to connecting them and building out your product pages.

Why Use WooCommerce with Elementor

WooCommerce handles the heavy lifting of running an online store: product management, inventory, payment gateways, shipping calculations, and tax rules. What it does not do well out of the box is give you a visually polished storefront. The default WooCommerce templates look functional but generic, and customizing them through a child theme requires PHP knowledge.

Elementor solves the design problem. Its drag-and-drop editor works on any WordPress page, so you can build a homepage that showcases your products, design a custom cart page, and style your checkout without touching a stylesheet. When you move to Elementor Pro, you get a full WooCommerce Builder that lets you replace the default product page template, the shop archive, the cart, the checkout, and the My Account area with your own custom designs.

Step 1: Install WooCommerce

From your WordPress dashboard, go to Plugins > Add New and search for “WooCommerce.” The official plugin by Automattic will appear at the top of the results. Click Install Now, then Activate.

Once activated, WooCommerce automatically creates four pages: Shop, Cart, Checkout, and My Account. These are assigned in WooCommerce > Settings > Advanced. If the setup wizard launches automatically, follow it through the next steps.

Step 2: Run the WooCommerce Setup Wizard

The setup wizard walks you through the most important store configuration steps. You will be asked to provide:

Store details: your country, address, and the type of products you sell (physical, digital, or both)
Payment methods: WooCommerce Payments and PayPal are offered by default; you can add others later under WooCommerce > Settings > Payments
Shipping zones: define regions and assign flat rate, free shipping, or local pickup
Tax settings: choose whether prices are entered with or without tax, and set up tax classes if needed

You can skip or revisit any of these later. The wizard is not mandatory, but completing it saves time configuring each section manually. Once you are through it, your store is technically functional, even before you touch Elementor.

Step 3: Install Elementor

If Elementor is not already installed, go to Plugins > Add New and search for “Elementor Website Builder.” Install and activate the free version from Elementor.com. This gives you the core page builder.

Elementor Pro is a paid upgrade that adds the WooCommerce Builder and a larger set of WooCommerce-specific widgets. The free version is enough to edit standard WordPress pages with Elementor, but if you want to customize the WooCommerce product page template itself, you will need Pro. More on that distinction in the sections below.

How WooCommerce and Elementor Work Together Out of the Box

After both plugins are active, WooCommerce and Elementor operate side by side but do not fully merge automatically. Here is what you get with the free version of Elementor:

You can edit any standard WordPress page (homepage, about page, landing pages) with Elementor’s drag-and-drop editor
You can add Elementor-designed sections to your WooCommerce Shop page if you open it in the Elementor editor
The core WooCommerce product page, cart, and checkout still use WooCommerce’s default PHP templates rendered by your active theme
Elementor’s free Product widget lets you embed individual product displays on any Elementor-built page

In other words, the free version of Elementor does not take over WooCommerce’s core store pages. It wraps around them. For full template control, you need Elementor Pro’s Theme Builder.

Using Elementor’s WooCommerce Widgets (Free Version)

Even without Elementor Pro, the free WooCommerce widgets are useful for building product-focused content pages. Open any page in the Elementor editor, then search the widget panel for WooCommerce-related widgets. You will find:

Products: display a product grid filtered by category, tag, or featured status
Add to Cart: embed a buy button for a specific product
Product Price: display the price for a given product
Product Images: show the gallery for a specific product

These widgets are designed for embedding product information into marketing pages, not for replacing the WooCommerce product page template. Think of them as tools for building a custom homepage, category landing page, or promotional page that pulls in live product data.

Customizing WooCommerce Product Pages with Elementor Pro

This is where the integration becomes genuinely powerful. Elementor Pro’s Theme Builder allows you to create a custom Single Product template that replaces the default WooCommerce product page for any or all products in your store.

To do this, go to Templates > Theme Builder in your WordPress dashboard, then click Add New and select Single Product as the template type. The Elementor editor opens with a set of Single Product widgets available in the panel, including product title, gallery, price, description, add to cart, related products, and more. You arrange these however you want, then set display conditions to control which products use the template. See our guide on how to edit the product page in WooCommerce Elementor for a detailed walkthrough of that process.

Elementor Pro’s Full WooCommerce Builder

Beyond single product pages, Elementor Pro gives you template control over every major WooCommerce page type:

Shop / Archive: redesign the main shop page and category archive pages with custom product grids and filters
Cart: build a custom cart page layout with upsell sections, trust badges, or cross-sell recommendations
Checkout: customize the checkout page to reduce friction and match your brand
My Account: style the customer account dashboard with Elementor widgets

Each of these is created through the Theme Builder using the same process as the Single Product template. You choose the template type, design the layout, and apply display conditions. Once published, Elementor Pro’s template overrides the WooCommerce default for that page type.

For stores that need product filtering by category, price, or attribute on the shop page, pairing WooCommerce with a filter plugin adds that functionality on top of the Elementor layout. Our guide on Search and Filter in Elementor covers the widget setup for that workflow.

Free Alternatives for WooCommerce Customization

If Elementor Pro is not in your budget, several third-party plugins extend Elementor’s WooCommerce customization capabilities at no cost or at a lower price point. Plugins like ShopReady, JetWooBuilder, and similar add-ons introduce additional WooCommerce widgets and, in some cases, product page template builders that work with the free version of Elementor. These are worth researching if you need product page design control but are not ready to commit to Elementor Pro.

Fixing Style Conflicts Between WooCommerce and Elementor

One issue that comes up often is CSS conflicts between WooCommerce’s default styles and Elementor’s designs. WooCommerce ships with its own stylesheet that sets default colors, fonts, button styles, and layout rules. Your active theme adds another layer on top. Elementor adds a third layer.

When your Elementor design does not look right on a WooCommerce page, the cause is almost always CSS specificity: WooCommerce or theme styles are overriding your Elementor styles because they have higher specificity selectors.

Common fixes include:

Disabling WooCommerce’s default stylesheet via WooCommerce > Settings > Advanced > Remove WooCommerce block styles or by adding add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' ); to your child theme’s functions.php
Switching to a theme that is explicitly Elementor-compatible (Hello Elementor is the lightest option)
Using Elementor’s custom CSS panel to write higher-specificity overrides for specific elements

Setting Elementor as the Default Editor for WooCommerce Pages

By default, WordPress opens posts and pages in the block editor (Gutenberg). To edit your WooCommerce shop page, cart page, or any other page in Elementor, open that page in the WordPress page list, then click Edit with Elementor from the page actions or the button at the top of the block editor screen.

You can also set Elementor as the default editor for all pages by going to Elementor > Settings > General and configuring which post types Elementor should be active on. Enabling it for Pages ensures the Elementor editor is the default option whenever you open a page, including the pages WooCommerce created during setup.

* This button will show the rest of the post and open up an offer from a vendor

Why Add WooCommerce to Elementor WordPress Websites

WooCommerce handles the back-end of an online store: products, stock levels, orders, payments, shipping, and taxes. What it does not do is give you a visually distinctive storefront. The default WooCommerce templates look functional but generic, and every other store using the same theme and WooCommerce will look nearly identical out of the box.

Elementor solves the visual problem. You get drag-and-drop control over how your storefront looks without writing CSS or PHP. This combination is particularly valuable in a few specific situations:

Stores with strong brand identity: Lifestyle brands, boutique shops, and agencies building client stores can create product pages that match the rest of the brand’s site rather than a generic WooCommerce template. The product gallery layout, button style, and typography all match.
Stores competing on presentation: In categories like home decor, fashion, or specialty food, how products are displayed affects purchase decisions directly. Elementor Pro’s Single Product template lets you redesign the product page layout, placing the add-to-cart button earlier, enlarging the image gallery, or adding custom trust signals, without writing a new PHP template.
Businesses that update their site without a developer: Once the Elementor templates are set up, non-technical store owners can edit page content, change promotional banners, or adjust text using Elementor’s visual editor rather than modifying code.
Sites already built with Elementor: If your existing site uses Elementor for its homepage and interior pages, adding WooCommerce and keeping Elementor for the store pages keeps the editing experience consistent. You do not need to learn a second system.

WooCommerce does add some overhead to a WordPress site. On a properly configured host with caching enabled, the performance impact is manageable for most stores, but it is worth testing page speed after activation.

How to Add WooCommerce to Elementor Website

Adding WooCommerce to an Elementor site takes about ten minutes. Here is the complete process:

Step 1: Install WooCommerce

In your WordPress dashboard, go to Plugins > Add New and search for “WooCommerce.” The plugin by Automattic will appear first. Click Install Now, then Activate. WooCommerce automatically creates four pages after activation: Shop, Cart, Checkout, and My Account.

Step 2: Complete the Setup Wizard

WooCommerce launches a setup wizard after activation. Work through it to configure your store address and country (sets tax defaults and available payment gateways), your product type (physical, digital, or both), payment methods (WooCommerce Payments and PayPal are offered by default), and at least one shipping zone. Completing the wizard is not required, but it prevents common oversights like missing payment configuration or no shipping method set up.

Step 3: Verify Elementor Is Installed

If Elementor is not already on your site, go to Plugins > Add New and install the free Elementor Website Builder. Once both plugins are active, Elementor and WooCommerce work alongside each other. The Elementor editor is now available for any standard WordPress page, and WooCommerce’s product, cart, and checkout pages are live using WooCommerce’s default templates.

Step 4: Edit WooCommerce Pages with Elementor (Free)

Open any WooCommerce-created page (Shop, Cart, Checkout, My Account) from the Pages list and click Edit with Elementor. You can add Elementor sections above or below WooCommerce’s default content blocks. This is useful for adding promotional banners, trust signals, or custom text to the shop page without replacing the core WooCommerce layout.

Step 5: Full Template Control with Elementor Pro (Optional)

For complete design control over product pages, the shop archive, cart, and checkout, you need Elementor Pro’s Theme Builder. Go to Templates > Theme Builder, create a Single Product template, and use Elementor’s WooCommerce widgets to build the layout. Set display conditions to apply it to all products or specific ones. This replaces WooCommerce’s default PHP templates entirely with your custom design.

Final Word: How to Add WooCommerce to Elementor

One of the best eCommerce packages that you can get for WordPress websites is the WooCommerce plugin. It is simple, easy, and has the extensions to help you build an effective shop online. In this article, we’ve discussed how to add WooCommerce to Elementor. However, adding WooCommerce is only part of the process, running an online store is challenging and requires a lot of effort to get going. Once the plugin is connected, the next step is to edit your WooCommerce product pages in Elementor using the Theme Builder to give each product a custom layout. For stores that need live product filtering by category, price, or attribute, pairing WooCommerce with a dedicated filter plugin is the next step; see our guide on using Search and Filter in Elementor for the Product widget setup.

Once WooCommerce is connected, you can also customize how your product pages look. See our guide on how to edit the product page in WooCommerce Elementor to create a custom Single Product template using the Theme Builder.

Recap: