WooCommerce and Elementor: How To Build a Store With Style

WooCommerce adds ecommerce 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 ecommerce 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 ecommerce 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 ecommerce 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.
• 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.

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?

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 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

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 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.

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.

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

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

To begin, you must have:

1. WordPress
2. 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.

Step 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 ecommerce-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.

Step 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.

Step 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.

Step 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.

Step 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.

Step 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.

Step 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.

Step 9: Customize the WooCommerce Checkout and Cart With Elementor

The next few sections involve customizing essential ecommerce 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.

Step 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 for 2023

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 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 ecommerce 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. Hello Elementor (With the Elementor WooCommerce Builder)

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.

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

3. 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 ecommerce brand, with quick settings to edit everything from colors to fonts and layouts to headers.

4. Shopkeeper

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.

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

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.

6. Storefront

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.

The theme is developed by the same folks over at WooCommerce, so you know it’s meant to run smoothly with the ecommerce plugin. It also works well with Elementor and offers a simplicity you can’t find elsewhere with other ecommerce themes.

7. ShopIsle Pro

The ShopIsle Pro theme is a premium solution with advanced typography, pre-built ecommerce 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.

8. 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 ecommerce 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 ecommerce stores.

9. 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.

10. 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.

11. 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 ecommerce site from the start. In that case, opt for a theme like Storefront or ShopIsle Pro for a more ecommerce-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 ecommerce 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 ecommerce operation. Kinsta also provides Elementor hosting, which is powered by Google Cloud’s C2 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.

The post WooCommerce and Elementor: How To Build a Store With Style appeared first on Kinsta®.