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

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

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.

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

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

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.

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

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.

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.

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

Summary

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

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.

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.

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

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.

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.

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

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

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.

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

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.

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.