WooCommerce adds e-commerce functionality to a WordPress site, but what happens when you want more than the built-in design tools from WooCommerce?
As you may have discovered, WooCommerce limits your design prospects, especially for product pages and the checkout area.
That’s where the WooCommerce Elementor integration comes into play: it opens up drag-and-drop functionality, creative control over all WooCommerce pages, and support for advanced Elementor WooCommerce addons and themes you may not otherwise use.
In this guide, we explore the basics behind WooCommerce and Elementor, how they work together, and how to create a beautiful e-commerce site with the WooCommerce Elementor combination. Keep reading to get started.
What is WooCommerce?
WooCommerce is a plugin for WordPress that turns any standard WordPress installation into an e-commerce site.
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 e-commerce themes, and advanced development flexibility.
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.
- E-commerce store management: WooCommerce handles orders, product inventory, and all contacts within its dashboard.
- Automated creation of essential e-commerce 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 e-commerce 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.
Overall, WooCommerce offers a wide range of features, making it the go-to e-commerce plugin for WordPress. Having said that, there are other e-commerce plugins to consider, which we recommend before committing entirely to WooCommerce.
What is Elementor used for?
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.
For instance, Elementor helps you customize:
- The WooCommerce Shop page
- Product pages
- The Checkout and Cart pages
- The My Account page
- The Shop page
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 drag-and-drop editor not only opens up customization of the pages listed above but provides greater control over the design of every part of your website.
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.
Overall, Elementor provides:
- A drag-and-drop builder with WooCommerce blocks
- Pre-made templates with e-commerce in mind
- A specific WooCommerce Builder tool with widgets and features dedicated to e-commerce elements
- Advanced styling for every block, section, and page created in WooCommerce
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?
Yes, Elementor is designed to work with the WooCommerce plugin.
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
Elementor comes packaged with various WooCommerce widgets, too.
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
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.
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?
Using WooCommerce without Elementor is perfectly okay. It’s still a powerful e-commerce 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.
Here are the main reasons to use Elementor with WooCommerce:
Improved visual design
WordPress has its Gutenberg page builder, but Elementor expands upon that functionality with a greater number of blocks and prebuilt sections.
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.
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.
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.
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 e-commerce pages. This cuts down on potential development fees and time spent building your store.
With advantages like these, we recommend always using Elementor (or another page builder you enjoy) when constructing a site with WooCommerce.
How to create an e-commerce website with Elementor and WooCommerce?
Elementor and WooCommerce serve as the best combination of tools for building an e-commerce site on WordPress. In this guide, we explain every step required to create an online store with the two.
1. Install WooCommerce and Elementor
To begin, you must have:
- WordPress
- Hosting (preferably a powerful, managed hosting solution like Kinsta)
Install WordPress on your host. Kinsta offers a one-click installation for WordPress.
With these elements in place, install the WooCommerce plugin. Kinsta Hosting users have the advantage of automatically installing WooCommerce upon creating an account.
Otherwise, add the free WooCommerce plugin to your WordPress site.
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.
Once completed, you’ll see a WooCommerce tab in WordPress and links to add products, set up payments, add tax rates, and more.
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.
2. Add a WooCommerce Elementor theme
WooCommerce is compatible with the vast majority of WordPress themes. The same can be said for Elementor. Yet, it’s best to choose a multipurpose theme (one that lets you build any type of website) or an e-commerce-oriented theme. This way, you’re not stuck with a blogging theme when trying to build a full-fledged online store.
Further in this article, view our recommendations of the best WooCommerce Elementor themes to get started. You can also search online for WooCommerce Elementor themes.
Once you find the perfect theme for your needs, install it on your WordPress site.
3. Create a WooCommerce homepage
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.
This adds a Homepage—Front Page for customization.
Finally, go to Appearance > Customize, and select Homepage Settings. Choose A static page under Your homepage displays. Select Homepage under the Homepage dropdown.
This dedicates that particular page as your global homepage and lets you customize it with Elementor or the WordPress Theme Customizer.
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).
We also recommend exploring the Theme Builder from Elementor. For this, go to Templates > Theme Builder.
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.
4. Add products to WooCommerce
To add a product to WooCommerce, go to Products > Add New. You also have the option to Import multiple products with a CSV file.
Fill in everything from the Product Name to the Product Description and the Price to the Product Category. Click the Publish button when you’re done with the product.
Your list of products is always available under Products > All Products in WordPress.
5. Configure shipping, payment gateways, and taxes
It’s important to set up essentials like payment processing, shipping, and tax rules before accepting purchases from customers.
These are all situated under the WooCommerce > Settings area in WordPress.
For shipping, go to the Shipping tab. Click to Add Shipping Zone. This allows you to set specific shipping rates based on geographical zones.
Alternatively, you can scroll to the bottom of the page to configure the WooCommerce Shipping extension, which offers printable USPS and DHL labels.
There are also plenty of other WooCommerce shipping add-ons and extensions available for different regions, carriers, and shipment management.
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.
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.
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.
Scroll to and check off the Enable Taxes box to calculate them based on your address during checkout.
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.
Similar to shipping, there are several tax extensions for WooCommerce that you can enable for more advanced features.
6. Set up a shop page in WooCommerce using Elementor
By default, WooCommerce generates a Shop/Store page for you. You can find this by going to the Pages tab in WordPress.
Click to Edit With Elementor. There’s also a Template Kits button from Elementor for quickly adding a beautiful design to your Shop page.
Use Elementor to edit the style and formatting of the Shop page, and consider inserting a template kit for a faster process.
Once completed, you’ll have a Shop page with a showcase of your products, filtering tools, and a search bar.
7. Display stylish product collections with Elementor
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.
Using the Theme Builder, choose Product Archive, then select and save one of the layouts provided for product collections.
You can assign these templates to the page of your choice or make an entirely new page.
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.
After that, Elementor provides settings for adjusting the number of columns, rows, and the entire style of the widget.
8. Customize product pages with Elementor
Product pages are managed similarly to any other page in Elementor.
One option is to open any product in your inventory and click on the Edit With Elementor button.
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.
You can opt for blocks or pages designed specifically for WooCommerce product pages.
This connects you to the Elementor Template library. After which, you can insert any of the product page blocks or page templates globally or to individual product pages.
9. Customize the WooCommerce checkout and cart with Elementor
The next few sections involve customizing essential e-commerce pages generated automatically by WooCommerce.
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.
To edit the Checkout and Cart pages, go to Pages in WordPress. Scroll over the desired page and click Edit with Elementor.
Elementor Pro provides replacement widgets to entirely swap out the default cart/checkout from WooCommerce.
Find the Cart widget under WooCommerce and add it to your design. You can then delete the default cart from WooCommerce.
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.
It’s also possible to add widgets for extra text, recommended products, or media while customers look at their carts. There are even tools to edit coupons, totals, and the order summary.
Editing the Checkout area is similar, where you open the Checkout page in Elementor and drag the Elementor Checkout widget into the editor. That replaces the default checkout module from WooCommerce, as long as you delete the old one.
Once inserted and selected, the Checkout widget offers tabs for Content, Style, and Advanced settings.
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.
10. Customize the My Account page with WooCommerce and Elementor
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.
Delete the old My Account module, and add the Elementor version located as a widget under WooCommerce.
This presents you with content settings for tabs and additional options, along with style and advanced settings.
For instance, you might want to change the border type or the color on the My Account page for a more brand-relevant feel.
And that’s how you create an online store with the WooCommerce Elementor integration!
Next up, we have the best Elementor WooCommerce themes and addons to help you with the design process.
11 Best Elementor WooCommerce themes
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 e-commerce 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 view our favorite WooCommerce themes to see if any of them are suitable for your brand. You should, however, check to see if those themes actually support Elementor.
On the other hand, you could go for the absolute fastest WooCommerce themes, focusing on speed first before anything else. The good news is that the vast majority of themes work with both WooCommerce and Elementor.
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.
During our many years of researching WooCommerce themes, we’ve landed on the best WooCommerce Elementor themes:
1. Astra
Astra offers seamless integration with WooCommerce—and alongside Elementor, it functions as a multipurpose theme for building any type of website, including e-commerce stores.
It has a lightweight, speedy foundation, powerful customization options, and some of the most user-friendly features for editing fonts, headers, and footers.
2. OceanWP
As a multipurpose WordPress theme, OceanWP has a WooCommerce integration and direct support for the Elementor page builder.
You receive high-quality customer support, regular updates, and extensive documentation for this lightweight and fast WordPress theme.
It’s highly customizable to improve the appearance of your e-commerce brand, with quick settings to edit everything from colors to fonts and layouts to headers.
3. Shopkeeper
Shopkeeper is not a multipurpose theme but rather catered directly to e-commerce store owners. Much of the e-commerce site infrastructure we’ve come to expect is already built and ready to go.
There are prebuilt templates for specific e-commerce 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.
4. Zakra
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.
It’s considered one of the fastest multipurpose themes on the market, and you gain control over color schemes, fonts, and layout variations.
5. Storefront
Perhaps one of the most versatile free e-commerce themes to choose from, Storefront includes a wide range of online store features right out of the box.
The theme is developed by the same folks over at WooCommerce, so you know it’s meant to run smoothly with the e-commerce plugin. It also works well with Elementor and offers a simplicity you can’t find elsewhere with other e-commerce themes.
6. ShopIsle Pro
The ShopIsle Pro theme is a premium solution with advanced typography, pre-built e-commerce demos, and deep integration with Elementor and WooCommerce.
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.
7. Neve
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 e-commerce world.
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.
The Neve theme comes with a myriad of starter sites built just for e-commerce stores.
8. Customify
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.
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.
9. GeneratePress
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.
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.
10. Phlox
The Phlox WordPress theme is yet another multipurpose theme that presents a strong site-building experience for WooCommerce and Elementor developers.
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.
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.
Other users, however, want their theme to look and act like an e-commerce site from the start. In that case, opt for a theme like Storefront or ShopIsle Pro for a more e-commerce-oriented experience.
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
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.
Here are our favorite WooCommerce Elementor addons:
1. HappyAddons
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.
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 for Elementor features a wide range of unique widgets for WooCommerce sites using Elementor. With over 70 Elementor widgets, you can incorporate breadcrumbs, testimonials, buttons, 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 is an addon for the Elementor page builder, as it improves upon the WooCommerce page builder and offers features for email customizations.
The add-on includes a checkout field manager and options to accept partial payments from customers. There’s even an option for customers to suggest pricing or for you to give out a special day offer.
4. Essential Addons for Elementor
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.
Some of the premium elements include an advanced Google Map, Instagram Feed, and parallax designs.
5. JetWooBuilder
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.
You can configure carousel types and category cards with ease while also creating single product pages from a sleek template.
Perhaps most importantly, the JetWooBuilder addon provides absolute control over your Shop page, helping you configure advanced smart filters.
When to consider Elementor Pro vs Elementor?
You may wonder, “What’s the difference between Elementor vs Elementor Pro?”
Luckily, the free version of Elementor is rather powerful and includes most features you’ll need to build a website or online store with drag-and-drop functionality. Having said that, the WooCommerce tools improve drastically when you upgrade to Elementor Pro.
First, let’s take a look at the pricing difference between Elementor and Elementor Pro:
- Elementor: Free
- Elementor Pro: Starting at $59 per year. Other plans are $99, $199, and $399 per year
Upgrades are generally to support additional websites with the same Elementor subscription, not to get more features.
However, the jump from Elementor to Elementor Pro does provide new features.
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?
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
WooCommerce users should really upgrade to the Pro version of Elementor at some point for the best experience.
Summary
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 e-commerce store with the WooCommerce Elementor integration.
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.
Keep in mind it’s essential to choose a speedy and secure hosting solution like Kinsta for any e-commerce operation. Kinsta also provides Elementor hosting, which is powered by Google Cloud’s C2 or C3D machines to deliver the best performance possible.
What else would you like to learn about WooCommerce and Elementor? Please let us know in the comments section below.
Leave a Reply