WooCommerce and Elementor: How To Build a Store With Style

Use Elementor to edit the style and formatting of the Shop page, and consider inserting a template kit for a faster process.

Combined with the Elementor WooCommerce Builder, you can construct an elegant design for any online store, customize fonts and headers, and launch an online store within minutes. Not only that, but you receive excellent customer support and theme documentation.

8. Neve

Neve homepage.

Once completed, you’ll see a WooCommerce tab in WordPress and links to add products, set up payments, add tax rates, and more.

Starting by adding products.
The WooCommerce dashboard in WordPress

The idea behind the Customify theme is to build virtually any type of website, blog, or online store, as it taps into deep customization options for styles, fonts, and widget areas.

This presents you with content settings for tabs and additional options, along with style and advanced settings.

My Account settings.
Editing the My Account page with options for content, style, and advanced settings

The HappyAddons plugin is actually a collection of widgets and add-ons made specifically for Elementor. Some widget examples from HappyAddons include a mega menu, one-page navigation, a WooCommerce cart, and a blog post kit.

Elementor provides a drag-and-drop editing experience, making for a visual design interface that primarily utilizes a computer mouse, as opposed to computer code or advanced development settings.

The Phlox WordPress theme is yet another multipurpose theme that presents a strong site-building experience for WooCommerce and Elementor developers.

We also recommend exploring the Theme Builder from Elementor. For this, go to Templates > Theme Builder.

By default, these pages (like Checkout, Cart, and My Account) have limited editing potential. But with Elementor, you have full control over the formatting, style, and overall appearance of each one.

As for an online store, the WooCommerce Elementor integration allows you to easily showcase products and edit the entire checkout experience without any coding knowledge.

10. GeneratePress

GeneratePress homepage signup.

All of the one-click demos drop right into the design, and they provide a modern appearance without much work on your end. You can also customize most aspects of an online store, from the shopping cart to how the products show up on a mobile device.

The answer to this is simple. Upgrade to Elementor Pro:

  • If you’d like most WooCommerce Builder functionality, like editing and templates for the Add To Cart section, Categories, and Products
  • If you want complete control over the customization of your online store
  • When you want to start using additional elements like a Ken Burns effect, Login widget, or flip box

There are several essential WooCommerce plugins to add to your store from the start. We do, however, recommend looking into even more specific add-ons and plugins that not only integrate with WooCommerce but expand the features of Elementor as well.

Some of the premium elements include an advanced Google Map, Instagram Feed, and parallax designs.

5. JetWooBuilder

JetWooBuilder download page.

The last part of this step involves installing and activating the Elementor Page Builder. Either install the free version of Elementor or walk through the steps of buying and downloading Elementor Pro.

Step 2: Add a WooCommerce Elementor Theme

Then, you can edit the content, style, and advanced settings for the cart in Elementor. On the Cart page, for example, you might adjust the colors and fonts to better fit your brand.

Hello Elementor is the official theme from Elementor. The theme includes a sleek, simple design without any frills, essentially allowing you to build any type of site.

And that’s how you create an online store with the WooCommerce Elementor integration!

To edit the Checkout and Cart pages, go to Pages in WordPress. Scroll over the desired page and click Edit with Elementor.

Edit Cart with Elementor.
Edit your Cart page with Elementor for the most control

You can also learn how to set up WooCommerce on your site with the least amount of trouble. Be sure to activate WooCommerce and walk through the configuration steps.

As a multipurpose WordPress theme, OceanWP has a WooCommerce integration and direct support for the Elementor page builder.

Here are our favorite WooCommerce Elementor addons:

1. HappyAddons

HappyAddons homepage and sign up page.

Yes, Elementor is designed to work with the WooCommerce plugin.

Elementor and WooCommerce serve as the best combination of tools for building an ecommerce site on WordPress. In this guide, we explain every step required to create an online store with the two.

Step 1: Install WooCommerce and Elementor

We encourage you to explore these themes and test them out in WooCommerce and Elementor. When making your decision, you may want total control, meaning a multipurpose theme might be right for you.

Here are some key features of WooCommerce:

  • Digital and physical product sales: WooCommerce supports a wide range of other product types as well, including subscriptions, variable products, affiliate products, and grouped products.
  • Ecommerce store management: WooCommerce handles orders, product inventory, and all contacts within its dashboard.
  • Automated creation of essential ecommerce pages: You receive a Shop page, Cart page, My Account page, and many more once activating WooCommerce on your site.
  • Extendability and scalability: There’s a large ecosystem of plugins, extensions, and add-ons for WooCommerce, allowing you to incorporate new features that aren’t built in. It’s also easy to scale up a business with WooCommerce due to its support for large amounts of orders, products, and other data.
  • Community and support: Although there’s no direct human support, WooCommerce has a large community of active developers and users, and the internet is filled with forums and tutorials to find solutions.
  • Payments, shipping, and taxes: Choose from hundreds of payment processors, and link to the shipping provider of your liking. You can even set up taxes based on zones.
  • Analytical data: Few ecommerce platforms rival the robust set of reports and analytics provided by WooCommerce. Track your store’s performance throughout the year, and analyze everything from customer actions to daily revenue.

Elementor (Free) provides:

  • Basic theme builder customization
  • Limited templates and blocks
  • Exporting and importing templates
  • Mobile editing
  • 40+ design elements such as testimonials, buttons, icon boxes, text editors, and more

Here’s what you get with Elementor Pro (that’s not included with Elementor Basic):

  • Customization of every part of your theme
  • Form design and integration
  • All professional blocks and templates
  • All professional widgets
  • A popup builder
  • Scrolling effects
  • Header and footer builder
  • About 30+ more widget and design elements such as block quotes, blog pagination, countdown, and masonry layout
  • WooCommerce-specific design elements like WC Categories, WC Products, and WC Add To Cart

When To Upgrade From Elementor to Elementor Pro

Once inserted and selected, the Checkout widget offers tabs for Content, Style, and Advanced settings.

Edit checkout tools.
Modify the Checkout page in Elementor—everything from Coupon settings to payment styles

Next up, we have the best Elementor WooCommerce themes and addons to help you with the design process.

11 Best Elementor WooCommerce Themes for 2023

That reveals a new tab in the WooCommerce Settings called Tax. Select that to configure settings like additional tax classes, prices entered with tax, and how taxes should be calculated.

Selecting the Tax tab.
Open up the new Tax tab

WooCommerce users should really upgrade to the Pro version of Elementor at some point for the best experience.


Scroll to and check off the Enable Taxes box to calculate them based on your address during checkout.

Check to enable tax rates.
Enabling tax calculations in WooCommerce

To begin, you must have:

  1. WordPress
  2. Hosting (preferably a powerful, managed hosting solution like Kinsta)

During that process, remember to check out our list of the best Elementor addons and themes. This way, you have a head start when compared to those designing their stores from scratch.

For instance, Elementor helps you customize:

  • The WooCommerce Shop page
  • Product pages
  • The Checkout and Cart pages
  • The My Account page
  • The Shop page

Along with full WooCommerce website kits and a single-page setup feature for WooCommerce, it’s safe to say that WooCommerce and Elementor work rather well together.

Why Should You Use Elementor For WooCommerce Sites?

By default, a Homepage isn’t generated for a WooCommerce store, leaving you to build it from scratch. To speed up this process, you can automatically create a Homepage by going to WooCommerce > Home in WordPress. Click to Create a custom homepage and customize it to suit your needs.

Adding homepage and logo.
Click to create a custom homepage and upload a logo

We have a list of the best Elementor themes; some of these are excellent for WooCommerce, but not all of them cater to online stores.

You can, for example, customize the Homepage or add a Coming Soon page within a matter of seconds, all thanks to page and section templates that come with Elementor.

It’s the most popular solution for running an online store on WordPress due to its quick integration into the WordPress ecosystem, a robust collection of supported ecommerce themes, and advanced development flexibility.

Product pages are managed similarly to any other page in Elementor.

What else would you like to learn about WooCommerce and Elementor? Please let us know in the comments section below.

Kinsta company logo

Jeremy Holcombe

To customize the default My Account page from WooCommerce, open Pages in WordPress. Click on Edit with Elementor after scrolling over the My Account page.

The GeneratePress WordPress theme is a multipurpose solution with WooCommerce and Elementor support. Its main advantage over other themes is its lightweight nature, but also its modular design.

Elementor comes packaged with various WooCommerce widgets, too.

There are prebuilt templates for specific ecommerce categories and a deep WooCommerce integration. Elementor works well with the theme as well, allowing you to adjust layouts, edit the cart, and customize just about every facet of your online store.

5. Zakra

Zakra homepage.

The ShopIsle Pro theme is a premium solution with advanced typography, pre-built ecommerce demos, and deep integration with Elementor and WooCommerce.

Other users, however, want their theme to look and act like an ecommerce site from the start. In that case, opt for a theme like Storefront or ShopIsle Pro for a more ecommerce-oriented experience.

To set up payment processing, navigate to the Payments tab under WooCommerce Settings. Install the WooCommerce Payments extension to accept payment methods like credit cards and Apple Pay.

Once you find the perfect theme for your needs, install it on your WordPress site.

Step 3: Create a WooCommerce Homepage

Overall, WooCommerce offers a wide range of features, making it the go-to ecommerce plugin for WordPress. Having said that, there are other ecommerce plugins to consider, which we recommend before committing entirely to WooCommerce.

What Is Elementor Used For?

You can configure carousel types and category cards with ease while also creating single product pages from a sleek template.

Use the Single Page option and click Add New. Use the Pages and Blocks tabs to rapidly design a professional Homepage or any other page on your site.

Picking a page template in Elementor.
Use the Pages tab for prebuilt homepages

Step 4: Add Products to WooCommerce

To create a product collection—displayed on your homepage or as a separate category page—we recommend using the Elementor Theme Builder or adding a simple widget to an existing page.

The theme helps with adding a quick view of products, along with cart notices and off-canvas shop filters. We also like it for adjusting WooCommerce cart layouts or setting up a sticky cart.

Here’s a list of some WooCommerce Elementor widgets:

  • Product Meta
  • Short Description
  • Product Breadcrumbs
  • My Account
  • Cart
  • Menu Cart
  • Product Stock
  • Add To Cart
  • Product Rating
  • Many more

Once completed, you’ll have a Shop page with a showcase of your products, filtering tools, and a search bar.

Looking on the frontend of the shop.
A completed Shop page with filters, a search bar, and items

Step 7: Display Stylish Product Collections With Elementor

The Neve theme provides multipurpose functionality with a fast and lightweight interface. With Elementor, you’re able to construct a website for any industry, particularly in the ecommerce world.

Keep in mind it’s essential to choose a speedy and secure hosting solution like Kinsta for any ecommerce operation. Kinsta also provides Elementor hosting, which is powered by Google Cloud’s C2 machines to deliver the best performance possible.

Finally, go to Appearance > Customize, and select Homepage Settings. Choose A static page under Your homepage displays. Select Homepage under the Homepage dropdown.

Homepage settings for a static homepage.
Make your homepage static

In this article, we highlighted what features make WooCommerce and Elementor special and showed you how they improve upon each other when combined. We also walked through a step-by-step tutorial on how to build an ecommerce store with the WooCommerce Elementor integration.

The design of your homepage (and the entire website in general) depends on the theme chosen. For instance, the Astra theme offers starter templates to build a beautiful online store within seconds. Those are located under Appearance > Starter Templates (if you’re using Astra).

Searching for a template
Search for industry-specific page templates in Astra

Using WooCommerce without Elementor is perfectly okay. It’s still a powerful ecommerce platform for the vast majority of businesses. However, you’ll find that customization options are limited without Elementor, and you’ll spend more time developing your website.

Elementor Pro provides replacement widgets to entirely swap out the default cart/checkout from WooCommerce.

Elementor is used for easily controlling the design of any WordPress website. It integrates nicely with WooCommerce. This way, you can customize elements of your WooCommerce store that normally lack editing capabilities.

Create a website and design your future

You might also consider another payment processing solution like Stripe, Alipay, or Klarna. Walk through the steps presented to activate payment processing, like inputting your business address and adding a checking account to receive payments.

Install button for payments.
Install WooCommerce Payments

Find the Cart widget under WooCommerce and add it to your design. You can then delete the default cart from WooCommerce.

Moving cart block.
Dragging the Cart module into your Cart page

Using the Theme Builder, choose Product Archive, then select and save one of the layouts provided for product collections.

JetWooBuilder is a WooCommerce Elementor addon from Crocoblock, another Elementor addon that’s worth looking into. The JetWooBuilder option unleashes the ability to mix and match elements like custom templates, layout switchers, and shop-specific pages.

For shipping, go to the Shipping tab. Click to Add Shipping Zone. This allows you to set specific shipping rates based on geographical zones.

Click on shipping.
Add a shipping zone

To add a product to WooCommerce, go to Products > Add New. You also have the option to Import multiple products with a CSV file.

Adding a new item.
Click to add a new product in WooCommerce

WooLentor is an addon for the Elementor page builder, as it improves upon the WooCommerce page builder and offers features for email customizations.

As you may have discovered, WooCommerce limits your design prospects, especially for product pages and the checkout area.

Similar to shipping, there are several tax extensions for WooCommerce that you can enable for more advanced features.

Step 6: Set Up a Shop Page in WooCommerce Using Elementor

Some WooCommerce-specific widgets are for product carousels, grids, checkouts, and mini carts. There are even widgets to improve other facets of your online store, like blog posts, charts, marketing, and social media.

2. PowerPack for Elementor

PowerPack homepage and sign up.
PowerPack for Elementor

As for custom design, Elementor helps you customize areas of a WooCommerce shop that, before, were generally unavailable for customizations. Elementor lets you edit the Checkout, Purchase Summary, My Account page, Product pages, Cart, and more.

There’s a templates library to immediately add designs and special WooCommerce widgets for things like the My Account page, checkout page styler, and add to cart button.

3. WooLentor

WooLentor homepage and sign up page.

During our many years of researching WooCommerce themes, we’ve landed on the best WooCommerce Elementor themes:

1. Astra

The Astra homepage.

WooCommerce adds ecommerce functionality to a WordPress site, but what happens when you want more than the built-in design tools from WooCommerce?

Therefore, you essentially enable and disable modules depending on your needs and tap into the live customizer for the utmost control over your brand’s design requirements.

11. Phlox

Phlox homepage.

It’s considered one of the fastest multipurpose themes on the market, and you gain control over color schemes, fonts, and layout variations.

6. Storefront

Storefront theme homepage.

Your list of products is always available under Products > All Products in WordPress.

Scroll through all the items in WordPress.
List of products in WooCommerce

Step 5: Configure Shipping, Payment Gateways, and Taxes

After that, Elementor provides settings for adjusting the number of columns, rows, and the entire style of the widget.

Step 8: Customize Product Pages With Elementor

This adds a Homepage—Front Page for customization.

Selecting the frontpage.
Click on the Homepage option

Content & Marketing Editor at Kinsta, WordPress Web Developer, and Content Writer. Outside of all things WordPress, I enjoy the beach, golf, and movies. I also have tall people problems ;).

Due to Elementor’s ease of use with WooCommerce, the plugin is utilized by developers and site owners all around the world to make highly customized online stores.

Does WooCommerce Work With Elementor?

The Zakra theme provides starter demos to speed up the store creation process. It integrates with Elementor and WooCommerce and offers niche demos that you can implement with one click.

Delete the old My Account module, and add the Elementor version located as a widget under WooCommerce.

In fact, Elementor is sold as a product that:

  • Reduces plugins needed for WooCommerce
  • Increases conversions (with pre-made, optimized WooCommerce sections and themes)
  • Helps visualize online store development without the need for code

We recommend combining it with the Elementor WooCommerce Builder for making clean and modern WooCommerce websites, and some of the fastest around.

3. OceanWP

OceanWP homepage and signup.

You can also look into WooCommerce addons for Elementor to expand the number of widgets and features in Elementor. Check them out below.

Top 5 WooCommerce Addons for Elementor

For instance, you might want to change the border type or the color on the My Account page for a more brand-relevant feel.

When searching for WooCommerce Elementor themes, it’s best to target themes with:

  • Support for both WooCommerce and Elementor
  • A responsive design
  • Fast page load speeds
  • Compatibility with all major browsers
  • The essential ecommerce features you need (you can fill in the gaps with Elementor and WooCommerce)
  • A design that matches your brand
  • A clean interface
  • High ratings and high-quality customer support/documentation

You can assign these templates to the page of your choice or make an entirely new page.

Picking one of three blocks.
Choose a Product Archive block for a nicely designed collection

There are also plenty of other WooCommerce shipping add-ons and extensions available for different regions, carriers, and shipment management.

The Essential Addons solution has a free and premium version. This addon improves the page-building experience in Elementor with widgets for pricing tables, product grids, calls to action, and more.

With these elements in place, install the WooCommerce plugin. Kinsta Hosting users have the advantage of automatically installing WooCommerce upon creating an account.

Adding WooCommerce in Kinsta hosting.
Option to install WooCommerce with your Kinsta website creation

Click to Edit With Elementor. There’s also a Template Kits button from Elementor for quickly adding a beautiful design to your Shop page.

8 page templates.
Various template kits for Elementor pages

It’s important to set up essentials like payment processing, shipping, and tax rules before accepting purchases from customers.

For taxes, go to the General tab under WooCommerce. Be sure to have your business address filled in; taxes and shipping rates are calculated based on this address.

The Neve theme comes with a myriad of starter sites built just for ecommerce stores.

9. Customify

The Customify homepage.

Upgrades are generally to support additional websites with the same Elementor subscription, not to get more features. 

These allow for customizing elements like the Your Order section, Returning Customer details, and Payment information. You can modify the colors, styles, sizes, and more.

Step 10: Customize the My Account Page With WooCommerce and Elementor

Here are the main reasons to use Elementor with WooCommerce:

  1. Improved visual design: WordPress has its Gutenberg page builder, but Elementor expands upon that functionality with a greater number of blocks and prebuilt sections.
  2. Customization of un-editable WooCommerce pages: From the Cart page to the My Account page, Elementor allows you to customize various WooCommerce pages that are usually on lockdown. It also lets you customize almost every aspect of Product pages.
  3. Conversion-oriented designs: All Elementor elements are responsive, and many of its WooCommerce widgets and blocks are made specifically for boosting sales, like the pricing tables, testimonials, and countdown timers.
  4. Seamless integration with WooCommerce: Elementors works perfectly with WooCommerce, and that unveils a large ecosystem of WooCommerce-compatible themes and addons made just for Elementor page building.
  5. Time-saving and cost-effective: Elementor’s pre-designed templates, blocks, and sections cut out the need for custom coding and tedious manual configuration. It only takes a few minutes to build professional-looking ecommerce pages. This cuts down on potential development fees and time spent building your store.

By default, WooCommerce generates a Shop/Store page for you. You can find this by going to the Pages tab in WordPress.

Choosing the shop page.
Click on the Store — Shop Page to design it

You can opt for blocks or pages designed specifically for WooCommerce product pages.

Single product blocks.
Pre-built blocks for individual products in Elementor

For more granular control and to add a design that’s professionally made, go to Templates > Theme Builder in WordPress. Select the Single Product tab and click Add New.

Perhaps one of the most versatile free ecommerce themes to choose from, Storefront includes a wide range of online store features right out of the box.

On the other hand, you might go to a previously created page, open it in Elementor, and add the Products widget to any section for a pleasant-looking collection of your products.

Bringing Products block in design.
Drag and drop the Products widget to the editor

The next few sections involve customizing essential ecommerce pages generated automatically by WooCommerce.

You receive high-quality customer support, regular updates, and extensive documentation for this lightweight and fast WordPress theme.