How to Add WooCommerce to Elementor

Last modified: June 16, 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

When it comes to building a good website shop, you need to have lots of functionality on your website. You will need to set up product pages, carts, checkouts, thank you pages, order pages, customer accounts, and more.

WooCommerce allows you to add all these basic elements to your website. And then it has the functionality to help you build upon this. For example, you will be able to add new plugins to enhance the experience of your users.

For example, you can add catalog mode, video options, inquiry buttons, and more options for you. Therefore, it has the same functionality as WordPress where you can have the basic functions and then add in the features that you need.

And many of these features can be free to add. Therefore, you can customize your website to your exact needs.

WooCommerce is also quick. Therefore, the speed will not be too bad on your website, though some sites report a 35% increase in loading time.

How to Add WooCommerce to Elementor Website

It is very simple to add WooCommerce to Elementor. All you need to do is to access your WordPress website. Then you can go to the Plugins section and then the ‘Add New’ area. In the plugin library, you can find WooCommerce in the list (it is normally close to the top) or you can enter the name WooCommerce and then search for it.

Then all you need to do is click on the ‘Install’ and then ‘Activate’ button. Then you will need to go through the setup process. This shouldn’t take too long.

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: