WooCommerce and Elementor: How To Build a Store With Style
Using the Theme Builder, choose Product Archive, then select and save one of the layouts provided for product collections.
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.
WooCommerce is a plugin for WordPress that turns any standard WordPress installation into an ecommerce site.
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?
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 customize the default My Account page from WooCommerce, open Pages in WordPress. Click on Edit with Elementor after scrolling over the My Account page.
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.
WooCommerce users should really upgrade to the Pro version of Elementor at some point for the best experience.
Summary
The Phlox WordPress theme is yet another multipurpose theme that presents a strong site-building experience for WooCommerce and Elementor developers.
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
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
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.
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.
Adding the Checkout widget to Elementor
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 Ecommerce Website With Elementor and WooCommerce
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.
Upgrades are generally to support additional websites with the same Elementor subscription, not to get more features.
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.
To begin, you must have:
WordPress
Hosting (preferably a powerful, managed hosting solution like Kinsta)
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
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 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.
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 ;).
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 ecommerce-oriented theme. This way, you’re not stuck with a blogging theme when trying to build a full-fledged online store.
To set up payment processing, navigate to the Payments tab under WooCommerceSettings. Install the WooCommerce Payments extension to accept payment methods like credit cards and Apple Pay.
You receive high-quality customer support, regular updates, and extensive documentation for this lightweight and fast WordPress theme.
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.
During our many years of researching WooCommerce themes, we’ve landed on the best WooCommerce Elementor themes:
1. Astra
Astra
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?
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
It has a lightweight, speedy foundation, powerful customization options, and some of the most user-friendly features for editing fonts, headers, and footers.
2. Hello Elementor (With the Elementor WooCommerce Builder)
Hello Theme
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 ecommerce pages. This cuts down on potential development fees and time spent building your store.
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
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.
Click to create a custom homepage and upload a logo
Elementor Pro provides replacement widgets to entirely swap out the default cart/checkout from WooCommerce.
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
The next few sections involve customizing essential ecommerce pages generated automatically by WooCommerce.
Finally, go to Appearance > Customize, and select Homepage Settings. Choose A static page under Your homepage displays. Select Homepage under the Homepage dropdown.
Make your homepage static
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.
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
Yes, Elementor is designed to work with the WooCommerce plugin.
Some of the premium elements include an advanced Google Map, Instagram Feed, and parallax designs.
5. JetWooBuilder
JetWooBuilder
Find the Cart widget under WooCommerce and add it to your design. You can then delete the default cart from WooCommerce.
Dragging the Cart module into your Cart page
WooCommerce adds ecommerce functionality to a WordPress site, but what happens when you want more than the built-in design tools from WooCommerce?
Product pages are managed similarly to any other page in Elementor.
You can configure carousel types and category cards with ease while also creating single product pages from a sleek template.
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.
The Neve theme comes with a myriad of starter sites built just for ecommerce stores.
9. Customify
Customify
There are also plenty of other WooCommerce shipping add-ons and extensions available for different regions, carriers, and shipment management.
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
With these elements in place, install the WooCommerce plugin. Kinsta Hosting users have the advantage of automatically installing WooCommerce upon creating an account.
Option to install WooCommerce with your Kinsta website creation
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.
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?
These are all situated under the WooCommerce > Settings area in WordPress.
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.
As a multipurpose WordPress theme, OceanWP has a WooCommerce integration and direct support for the Elementor page builder.
For instance, Elementor helps you customize:
The WooCommerce Shop page
Product pages
The Checkout and Cart pages
The My Account page
The Shop page
Delete the old My Account module, and add the Elementor version located as a widget under WooCommerce.
It’s important to set up essentials like payment processing, shipping, and tax rules before accepting purchases from customers.
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
Essential Addons
And that’s how you create an online store with the WooCommerce Elementor integration!
Save time and costs, plus maximize site performance, with $275+ worth of enterprise-level integrations included in every Managed WordPress plan. This includes a high-performance CDN, DDoS protection, malware and hack mitigation, edge caching, and Google’s fastest CPU machines. Get started with no long-term contracts, assisted migrations, and a 30-day money-back guarantee.
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 WooCommerce Payments
To add a product to WooCommerce, go to Products > Add New. You also have the option to Import multiple products with a CSV file.
Click to add a new product in WooCommerce
Alternatively, you can scroll to the bottom of the page to configure the WooCommerce Shipping extension, which offers printable USPS and DHL labels.
Clicking the Get Started button for WooCommerce Shipping
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
Once completed, you’ll have a Shop page with a showcase of your products, filtering tools, and a search bar.
A completed Shop page with filters, a search bar, and items
Step 7: Display Stylish Product Collections With Elementor
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.
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.
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
You can opt for blocks or pages designed specifically for WooCommerce product pages.
Pre-built blocks for individual products in Elementor
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
Once you find the perfect theme for your needs, install it on your WordPress site.
Step 3: Create a WooCommerce Homepage
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
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.
For shipping, go to the Shipping tab. Click to Add Shipping Zone. This allows you to set specific shipping rates based on geographical zones.
Add a shipping zone
Install WordPress on your host. Kinsta offers a one-click installation for WordPress.
Adding a new WordPress website in Kinsta
However, the jump from Elementor to Elementor Pro does provide new features.
Shopkeeper is not a multipurpose theme but rather catered directly to ecommerce store owners. Much of the ecommerce site infrastructure we’ve come to expect is already built and ready to go.
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.
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
For instance, you might want to change the border type or the color on the My Account page for a more brand-relevant feel.
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.
Astra offers seamless integration with WooCommerce—and alongside Elementor, it functions as a multipurpose theme for building any type of website, including ecommerce stores.
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.
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.
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
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.
Elementor comes packaged with various WooCommerce widgets, too.
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
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.
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.
Step 9: Customize the WooCommerce Checkout and Cart With Elementor
Check out our plans or talk to sales to find the plan that’s right for you.
Jeremy Holcombe
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
WooLentor is an addon for the Elementor page builder, as it improves upon the WooCommerce page builder and offers features for email customizations.
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.
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.
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.
Add details like a product name, price, and media
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
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
You can assign these templates to the page of your choice or make an entirely new page.
Choose a Product Archive block for a nicely designed collection
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.
Once completed, you’ll see a WooCommerce tab in WordPress and links to add products, set up payments, add tax rates, and more.
The WooCommerce dashboard in WordPress
Overall, Elementor provides:
A drag-and-drop builder with WooCommerce blocks
Pre-made templates with ecommerce in mind
A specific WooCommerce Builder tool with widgets and features dedicated to ecommerce elements
Advanced styling for every block, section, and page created in WooCommerce
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
Your list of products is always available under Products > All Products in WordPress.
List of products in WooCommerce
Step 5: Configure Shipping, Payment Gateways, and Taxes
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.
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
The ShopIsle Pro theme is a premium solution with advanced typography, pre-built ecommerce demos, and deep integration with Elementor and WooCommerce.
This adds a Homepage—Front Page for customization.
Click on the Homepage option
What else would you like to learn about WooCommerce and Elementor? Please let us know in the comments section below.
