Elementor + WooCommerce: How To Build an Amazing eCommerce Website

WooCommerce is the number one choice when building an online store in WordPress.

It comes with a host of advanced features and is fully customizable, allowing you to build just about any kind of store. The best part is that it’s open source and completely free!

Want to build a WooCommerce website with the most popular page builder, Elementor, and the most popular WordPress theme, Astra?

Elementor is a popular WordPress page builder that helps you build pixel-perfect websites with an intuitive drag and drop editor.

With Astra, you have the most popular non-default WordPress theme in the world. It’s lightweight and installed on close to 2 million websites.

With the recent Astra 3.9 update, every aspect of your WooCommerce store can be taken to the next level.

In short, with the combination of WooCommerce, Elementor, and Astra, you can build an online store that’s sure to enhance the shopping experience and increase sales.

This article covers the exact steps on how to build a WooCommerce website with Elementor and the Astra theme.

Let’s get building!

What is WooCommerce?

WooCommerce is the most popular open-source eCommerce platform built for WordPress.

It is flexible and fully customizable, allowing you to create any online store, including those that offer physical and digital goods, sell subscriptions, and more.

WooCommerce comes with a host of advanced features that other SaaS-based platforms would typically charge for.

Features include an intuitive dashboard, advanced reporting, inventory and order management, invoicing, and other excellent features.

Whether you are starting an online business or taking your brick and mortar store online, WooCommerce is the perfect solution for building eCommerce websites with WordPress.

Why use WooCommerce to build an online store?​

WooCommerce is one of the most well-rounded eCommerce platforms available. The quality and variety of features help you create an online store that’s optimized for both online and offline sales.

With the range of customization options, you can create a store that perfectly matches your brand and looks great on desktop and mobile devices.

Additionally, WooCommerce is compatible with various eCommerce software solutions, making it easy to integrate with third-party applications like payment gateways and marketing tools.

WooCommerce also has a range of functionality that integrates your online store with online and offline sales. Create dynamic coupons to help boost your sales, create mobile-friendly checkout pages, and more.

Here are a few additional reasons why you should use WooCommerce to build your online store:

• WooCommerce is built for WordPress, the software that powers more than 44% of websites globally
• WooCommerce integrates seamlessly with website content
• Works with just about any WordPress theme and plugin
• From physical and digital products to subscriptions and appointments, you can sell anything using WooCommerce
• Highly customizable
• Add unlimited products, users, and orders

To summarize, with WooCommerce, you can go beyond the confines of traditional eCommerce solutions and be limited only by your own imagination.

What do you need to build a WooCommerce store?

Wondering what you need to build a WooCommerce store?

While we will get to these in detail a little later in the article, here’s a list of the bare essentials:

1. Domain and hosting

To begin, we need a domain and hosting.

While there are several options available, we recommend going with SiteGround.

SiteGround is a popular hosting solution that is reliable, offers great features, and, more importantly, is also recommended by WordPress.org.

We also recommend SiteGround for its world-class support team. They are always available to answer any hosting-related questions or concerns that you may have.

Select a managed WordPress hosting plan that best suits you. You can also purchase a domain if you don’t already have one.

2. WordPress

Next, you need to install WordPress.

The good thing about going with a managed WordPress hosting plan, is that it’s easy to install the software.

With the website set up wizard or the one-click installer available in your control panel, you install WordPress just like that.

3. WooCommerce

WooCommerce is the eCommerce platform that works best with WordPress.

Installing WooCommerce is pretty straightforward. It’s as simple as installing any other WordPress plugin.

Simply search for the plugin, install it, and activate it. That’s it!

Once that’s done, you’ll be ready to add products and start selling immediately. Well, almost!

4. WordPress theme

A WordPress theme makes your store look great. The colors, fonts, typography, layout structure, and more, are all part of your theme.

There are lots of WordPress themes available in the market. While some are good, some are even better. As we want you to have the best, we’ll focus on the latter.

One such theme is Astra.

It’s a super lightweight theme that loads in just 0.5 seconds and is built for speed and performance.

With a host of website templates tailor-made for online stores, you’ll be up and running with your store in a matter of minutes. All without writing a single line of code.

5. WordPress page builder

Finally, we also need a page builder to help design and customize our pages.

You have several page builders to choose from, including Spectra. However, for this article, we’ll go with the popular WordPress page builder, Elementor.

Using Elementor, you can create professional-looking and highly creative websites easily.

What to look for in a WooCommerce theme

A theme adds to the look and feel of your website. But is that all there is to a theme?

A theme can also impact the performance of your website.

While the right theme can always boost your store’s performance and, in turn, sales, the wrong theme can negatively impact performance.

So what are the prerequisites for the ideal WooCommerce theme?

1. Speed

Faster loading websites = Better shopping experience = More sales and conversions.

Speed is everything online. If your website takes time to load, there’s a good chance your customers will leave your site. And with that, you lose potential sales as well.

Did you know that page speed is also an important Google ranking factor?

Not only does a faster website enhance user experience, it also helps increase your chances of ranking higher on search engines.

Put your theme to the test using tools such as PageSpeed Insights, and Pingdom to see how fast it loads.

2. Responsive

Did you know that nearly 62% of customers won’t buy from you again if your store is not optimized for mobile devices?

Which gets us to an all-important questions:

Does your store offer a great user experience on mobile devices?

While most themes are responsive, checking early on will help you make more sales when you go live.

3. Customization

Want to customize your store to match your requirements? You know, in terms of colors, fonts, typography, layouts, header, footer, and just about everything else in your store?

Your WooCommerce theme should be customizable. That way, you completely control your store and can brand it just the way you want.

While some themes can be customized using the WordPress customizer, others come with a built-in editor that can help you quickly tweak the design.

4. Seamless checkout process

Reports indicate that the cart abandonment rate is nearly as high as 70%.

This means 7 out of 10 customers leave your store at the checkout stage. That’s huge!

(Source: Baymard)

As shown in the above image, the number one reason for cart abandonment is extra costs levied on customers.

This eCommerce stats say 70% of carts in online stores are abandoned due to a lengthy and complicated checkout.

If you want to reduce the cart abandonment rate and increase sales, ensure your WooCommerce theme has a conversion-optimized checkout process.

5. Website demo templates

Wouldn’t it be great to launch your online store right away?

You’ll still need to add products and all the information that goes with it, but you get the point.

It’s easier to build a WooCommerce website using a readymade template instead of building one from scratch. And that’s precisely what some themes offer.

All you have to do is select a professionally designed store template, import it, and then customize it to suit your requirements.

All this can be accomplished in minutes without writing a single line of code!

6. Support

Having a support team to assist is always reassuring as you never know when you need help.

Most WooCommerce themes offer you support via email, chat, and an online ticketing system. Some premium themes provide you with priority support as well.

7. Secure

Another primary reason for cart abandonment is that customers aren’t comfortable sharing their credit card details.

You’ll want to build trust if you want customers to share their credit card details with you.

The first step towards building trust is ensuring your WooCommerce theme is secure.

It’s one thing to make your site secure, and it’s another to make your customers aware of it.

We recommend showcasing the payment gateways you have signed up with and anything else that would build trust among your customers.

That could include trust markers like security badges, certificates, or third party endorsements like Google Customer Review badges or Better Business Bureau Accredited Business badges.

To summarize, these are the key aspects to consider when selecting a WooCommerce theme. You could search the internet for themes that tick all the above boxes.

Or, you could just take our word for it and go with the Astra theme! 🙂

Why use Astra and Elementor to build an online store?

When it comes to themes, Astra is the most popular non-default theme in the WordPress ecosystem. It has nearly 2 million active installations and has crossed 7 million downloads.

The lightweight theme is beginner friendly and offers an extensive range of professionally designed website templates that can be used for just about any niche.

With the latest Astra 3.9 release, we’ve taken WooCommerce to a whole new level.

Some of the features include:

• Completely new modern skin for your shop page
• Effortlessly create an image gallery on your product page
• Modern new layout for the cart page
• Super optimized and frictionless checkout page built for conversion
• Modern new thank you page
• Modern-looking layout for the account page
• Impressive-looking variation swatches for your WooCommerce store
• Stripe payment gateway plugin that seamlessly integrates with Astra

And many more impressive features.

In short, with Astra 3.9, we’ve significantly enhanced every element of your store, ensuring a much better shopping experience for customers.

Elementor is a very popular WordPress page builder with over 5 million active installations.

With an intuitive drag and drop editor, it can be used to build creative and unique websites quickly and easily.

So, when you combine the most popular WordPress theme and page builder, you can build unique and high-converting WooCommerce websites that’ll score high on the shopping experience.

How to build a WooCommerce website with Elementor and Astra

Let’s now build a WooCommerce website with Elementor and Astra.

We’re assuming you’ve purchased a domain and managed WordPress hosting.

Step 1: Install WordPress

Once you’ve purchased hosting, you can easily install WordPress by heading to the control panel or using a setup wizard.

For instance, if you’ve gone with SiteGround, you can use the Website Setup Wizard to install WordPress.

After successful registration, you’ll find yourself on the following dashboard.

You can add a new website, select your application, and do much more.

After a few straightforward steps, your WordPress installation is complete.

You can now access your admin dashboard and start building your website.

An alternate method is to use the app installer.

For this, you’ll need to access the SiteGround control panel and locate the App Installer.

Select WordPress as your preferred application and complete the installation.

The process is pretty straightforward, and once you are done, you’ll be able to access your WordPress dashboard.

While the above steps are specific to SiteGround, the process is similar for any web host.

Want help installing WordPress? Check out our Complete Guide to Setting up Web Hosting, Domain and WordPress (2022).

Step 2: Install the Astra theme

Once you’ve installed WordPress, the next step is to install the Astra theme.

From your WordPress dashboard, head to Appearance > Themes and click Add New.

Search for Astra and then click on Install and then Activate.

Want to launch your store right away with some ready-made website templates?

Head over to Appearance > Astra Options.

Then click on Install Importer Plugin.

You’ll be asked to select a page builder of your choice. We’ll go ahead and choose Elementor.

You can also select a Starter Template of your choice.

For instance, search for Store and select a template of your preference. We’ve gone ahead with the Organic Store template.

Recommended Astra’s templates:

• eCommerce website templates
• Fashion and clothing website templates

Now, you get to customize the template based on your website requirements.

Add a logo, change colors and typography, and do more.

Once you are happy, you’ll arrive at the following screen.

Click on Submit & Build My Website.

This starts the installation process, as shown in the image below.

This should be done in under a minute.

On successful installation, your website will be live.

Click View Your Website to see how your site looks on the front end.

And just like that, your WooCommerce website is up and running.

All you have to do is add your products, complete a few settings, and you’ll be ready to accept orders and payments!

Step 3: Install WooCommerce

To build an online store on WordPress, we need to install WooCommerce.

If you installed a store-related Starter Template, you’ll notice that WooCommerce is already active.

When you install a Starter Template, it comes bundled with everything you need to build a website.

And in this case, when you selected a store template, not only did Elementor come installed with it, WooCommerce came with it!

If you didn’t use a Starter Template, you may need to add WooCommerce manually.

Here’s how:

For this, head to Plugins > Add New and search for WooCommerce.

Click Install Now and then activate it.

Step 4: Setting up your WooCommerce store

Now that you have WooCommerce installed, there are a few settings you’ve got to cover before you add products to your store.

Head over to WooCommerce > Settings. By default, you’ll be on the General tab.

This is where you get to include your store address, set a default currency, add shipping details, integrate a payment gateway, set up email notifications, and more store-related settings.

All these things are included in the WooCommerce setup wizard, but you can also set them up manually if you prefer.

For instance, if you want to add a payment method to your store, click on the Payments tab.

Simply enable the payment method you prefer and complete the setup process.

We recommend spending time and exploring what the settings have to offer.

For more details, you can always check out our in-depth article on how to set up WooCommerce.

Step 5: How to add products to your WooCommerce store

To add products to your WooCommerce store, head to Products > Add New.

Enter the product name and description, upload a product image, and all the details.

Then scroll down to the Product data section.

This is where you add details related to your product.

Starting with selecting the product type and adding inventory. Then move on to the shipping details and other settings.

There’s a whole bunch of more information that you can choose to provide.

While some details are required, others are optional.

What’s important to note is the new features that WooCommerce comes with when you install the latest version of Astra.

For instance, your store template now comes with Variation Swatches for WooCommerce by CartFlows.

With this feature, you can do away with the old dropdown list and show the different variants of your product using impressive variation swatches.

This is not just for showing the different color options available for your product. You can choose different image variants and also use label swatches.

Install a few must-have WordPress plugins

There are a few must-have WordPress plugins that you can consider installing. These plugins provide additional features.

UpdraftPlus: WordPress backup plugin

Most hosting providers schedule automatic backups of your website for you. But we don’t want to depend on them, so we recommend having your own backup solution.

One such plugin to help with this is UpdraftPlus.

UpdraftPlus is a popular plugin that helps back up your WordPress website. You can also store your backups in Google Drive, Amazon S3, Dropbox or Rackspace Cloud.

By backing up your store, you ensure that you don’t lose everything. If something goes wrong on your website or your server crashes, you can restore it from a backup in minutes.

WordFence: WordPress Security Plugin

Owing to its popularity, WordPress can be vulnerable to hacks, spamming, and malicious attacks. The last thing you want is something to happen to your website, costing you dearly in terms of time, money, and reputation.

That’s where WordPress security plugins, such as WordFence, come in handy.

WordFence is a well-known and reliable security plugin that ensures your website is in safe hands. It blocks malicious traffic, stops brute force attacks, and ensures the passwords you set are strong.

Yoast SEO: WordPress SEO Plugin

Want your website to show up on the search engine results page?

While there’s a lot that goes into optimizing your store for search engines, installing an SEO plugin will improve your chances of being noticed by search engines.

Yoast SEO is a hugely popular WordPress plugin that helps you optimize your store for SEO.

Add titles and descriptions, generate an XML sitemap, optimize your on-page content, and do much more using Yoast SEO.

Site Kit by Google: WordPress plugin to analyze your website traffic

When you run a brick-and-mortar business, you’d like to know which of your marketing efforts are paying dividends and driving customers to your store.

The same goes for your online store. The good news is that it’s much easier to know what’s working and what’s not on your website by installing plugins such as Site Kit by Google.

By connecting your store to Site Kit by Google, you get the detailed information regarding your customers, how they discovered your store, the pages they visited, how long they stayed in your store, where they are from, and other helpful information.

Using this information, you can craft your offers accordingly.

ShortPixel: WordPress Image Optimization Plugin

Your WooCommerce store is going to have lots and lots of product images. The better the imagery, the better the chances of customers making a purchase.

However, higher image sizes can be large and negatively impact page load speed. And we all know how important page speed is as far as search engines and user experience are concerned!

ShortPixel is a WordPress image compression plugin that reduces the image size without compromising the image quality.

All popular image formats are supported, including WebP.

Elementor: WordPress Page Builder Plugin

There are several page builder options on the market, including the visual website builder, Spectra.

Elementor is a very popular page builder. It’s beginner friendly and uses an easy-to-use drag and drop site building method, allowing you to create beautiful pages.

If you’ve installed our Starter Template as part of this how-to you’ve already got Elementor installed.

And just in case you want more creative Elementor widgets for your site, you can install Ultimate Addons for Elementor.

It offers 40+ widgets and extensions, 100+ website templates, and 200+ pre-built section blocks, all of which can be customized the way you want.

To summarize, several WordPress plugins help you add functionality to your website. We’ve barely scratched the surface.

However, these must-have plugins are good to start with.

Want more options? Check out our detailed article on the best WordPress plugins for every successful WordPress website in 2024.

Want WooCommerce-specific WordPress plugins? Those that can help increase sales and conversions?

Here’s a list of the 38 best WooCommerce plugins every store needs.

Best Elementor WooCommerce Themes

There’s a lot of WordPress themes around and many of them are compatible with Elementor and WooCommerce.

While we haven’t listed all of them here, we’ve mentioned some of the top Elementor WooCommerce themes. Selecting one of these should deliver the experience you’re looking for.

1. Astra

With well over a million installations and being the only non-default WordPress theme to achieve this mark, we know a thing or two on creating high-performance, optimized themes that convert.

Astra is a lightweight WordPress theme that offers integrations with both Elementor and WooCommerce. Additionally, Astra comes with readymade WooCommerce demo sites that can be easily customized using Elementor.

Using Astra, you get:

• Much faster stores that help boost conversion rate
• A drop-down cart that allows users to view their cart from just about any page
• Conversion-optimized checkout process, thereby reducing cart abandonment rate
• Grab user attention with sales bubbles that help boost sales
• Completely responsive sites that work great across all devices
• Customizable stores without having to write a single line of code

Want more features? 

Upgrade to Astra Pro and get extra WooCommerce features such as:

• Infinite scroll that dynamically loads your products as users keep scrolling
• Additional checkout options to enhance user experiences, such as two-step checkouts, distraction-free checkouts, and more
• More product display and gallery options that can be easily adjusted. Option to open images in a lightbox available too
• Product quick view feature allows users to preview product details without visiting the detailed product page. This helps increase the conversion rate
• Off-canvas sidebar for product filters

2. Hello Elementor + Theme Builder

Elementor is a hugely popular WordPress page builder plugin and has some themes of its own that you may want to check out.

The templates work great with WooCommerce and can be customized easily using the Elementor WooCommerce Builder.

Using the dedicated WooCommerce widgets such as prices, add-to-cart buttons, and features in the Elementor Theme Builder, you can design your store and product pages just the way you want.

3. GeneratePress

GeneratePress is another popular WordPress theme compatible with WooCommerce.

Using the WordPress customizer, the GeneratePress WooCommerce settings allow you to configure just about anything, such as the drop-down cart, distraction-free checkout mode, and more.

While the GeneratePress theme is available for free on WordPress, to access the WooCommerce settings, you’ll need GeneratePress Premium.

4. Neve

Neve is a WooCommerce ready WordPress theme that comes with several readymade demo websites powered by Elementor.

The free version of Neve offers complete WooCommerce compatibility. For more WooCommerce integration, you may want to consider the Pro version.

The Neve Pro version packs in a WooCommerce booster module that allows you to customize your store, product, and checkout pages.

5. OceanWP

With 700,000+ active installations, OceanWP is a popular WordPress theme that comes with many built-in features for WooCommerce stores.

You’ve got readymade WooCommerce demo sites that are all powered by Elementor. 

Some additional features for WooCommerce include:

• Product quick view
• Drop-down shopping cart
• Floating add-to-cart button
• Distraction-free checkout process

OceanWP gives you heaps of customization options and is compatible with Elementor.

Elementor vs. Elementor Pro: When to Upgrade

Elementor’s free version works just fine. Whether you are just starting or a seasoned WordPress website developer, Elementor offers a whole range of design possibilities.

However, if you’re looking for more tools and features to enhance conversions and sales, there’s always Elementor addons and Elementor Pro.

While we’ve focused more on the WooCommerce and Elementor aspects in a comparison table below, here’s a look at some of the significant differences between Elementor and Elementor Pro.

1. While the theme builder allows you to customize every bit of your theme, Elementor Pro’s theme builder allows you to go beyond the theme restrictions. Using Elementor, you can visually design the various elements of your website, such as the header, footer, archive page, single posts, and more. Does this involve coding? Not at all! And it works on just about any WordPress theme.
   
2. How do you create contact forms? We’re guessing it’s by installing a contact form plugin such as WP Forms, Ninja Forms, Contact Form 7, and many more. While all these are great options, Elementor Pro’s forms widget gives you the same flexibility. Design your forms on the fly and set custom alerts and notifications. Want to integrate some automation or CRM tools? Elementor Pro’s Form widgets allow you to do so with just a few clicks.
   
3. Have you used the professional templates and blocks in the Elementor library? If you have, you’d know that there are many more options available in the Pro version. Using these professionally designed templates and blocks, you can easily customize them to create stunning landing pages, web pages, animated headlines, forms, and a lot more.

In addition to the above, here’s why you could consider going with the Elementor Pro version, especially if you own an online store.

WooCommerce Features	Elementor Free	Elementor Pro
Price Table Widget	❌	✅
Price List Widget	❌	✅
Product Archive Template	❌	✅
Single Product Template	❌	✅
Woo Products Widget	❌	✅
Woo Categories​ Widget	❌	✅
WooCommerce Templates & Blocks​	❌	✅
20+ WooCommerce Widgets	❌	✅

WooCommerce, Astra, and Elementor: Better Together

A successful online store requires a well-rounded platform to build on. When creating an online store on WordPress, WooCommerce is the best out there.

It’s a hugely popular eCommerce platform that seamlessly integrates with WordPress and other plugins and themes. And the best part is, WooCommerce is open source and completely free!

When you combine WooCommerce with Elementor and Astra, you’ve got yourself a highly optimized online store built to convert and enhance sales.

Not to mention, very high on the shopping experience as well!

Over to you now. Have you built a WooCommerce store using Elementor and the Astra theme? Or have you used a different page builder and WordPress theme? Let us know.