How to Build a WooCommerce Website With Elementor & Astra Theme

0 0
Read Time:7 Minute, 26 Second

Looking to launch a WooCommerce shop and start selling products over the Internet? While you can find plenty of information online, the entire process of creating a store that actually looks good can often seem a little overwhelming.

So what if we told you that you could get set up with a great-looking eCommerce store in under an hour…for free?

As exciting as it is to get started with your online store using WooCommerce and Elementor, it’s equally essential to find a suitable theme to go along with it.

The last thing you want is to end up firefighting and fixing issues just before you go live!

What are those key elements that you must consider while narrowing down on your ideal WordPress theme?

Page load speed is not just a necessity. It’s what underlines your success.

With a longer page load time, your customers have more chances of leaving without seeing what your store has to offer. Which means a higher bounce rate. 

This doesn’t go well with search engines and only brings down your site rankings.

Want complete control over the look and feel of your online store? Then consider a theme that you can easily customize.

So why stick to the theme’s default settings? 

You must be able to customize every element of the theme either from the customizer or using Elementor. While most themes give you this flexibility, it helps to check this early on.

Why start on a blank canvas when you can leverage on some readymade store templates?

Admit it. When you start, isn’t it easier to create an online store by seeing how it’s already done? It’s like referencing what’s working before you become a pro at creating your own.

Sales from mobile devices are constantly on the rise. ​​

Reports indicate the sales from mobile devices are projected to reach $3.56 trillion in 2021, which is 22.3% more than what it registered in 2020.

Is your store mobile optimized? Is your theme responsive and does it work well across all devices? If it isn’t, we recommend you give this some serious consideration.

Let’s start with some facts.

While the number one reason is the inclusion of extra charges, 26% cited the checkout process being too long during checkout.

All this data goes to prove the importance of a well-designed checkout page.

Unless you want to see a significant dent in your sales revenue, you’ll want to ensure your theme has a conversion-optimized checkout process.

Wouldn’t a little support help occasionally? And what better way than to have a support team, just when you want them.

While most themes offer support through documentation, it’s nice to go in for a WordPress theme that offers friendly human support.

Last but not least, go in for a theme that is stable and secure. One that allows you to install just about any WooCommerce and Elementor plugins without the fear of breaking your store.

Long story short is, look out for a theme built for performance, conversion and that works like a charm. 

The only thing we’ll assume for this tutorial is that you already have WooCommerce installed – we’ll cover everything else about making your store look and function great.

Once you have WooCommerce installed, here’s how to make your store look awesome!

Beyond its general lightweight design and customization options, Astra specifically helps you with WooCommerce in two main ways. 

You can:

Here’s how to use Astra to set up the core of your WooCommerce store:

To get started, you’ll need to install a theme and a plugin. Both are listed at, which means you can install them right from your WordPress dashboard:

This will start the starter template wizard to install the prebuilt template on your website.

Click on the “Build Your Website Now” button.

Then, select the Elementor page builder:

Feel free to pick any demo site that catches your eye. But for this tutorial, we’re going to use the free Brand Store demo site:

Once you click on your desired demo site, it will open up a new page where you can upload the logo and color scheme of your website. This makes your life easier because you won’t have to add the logo or pick colors the second time.

However, if your logo and colors are not ready, you can simply skip the step. For this tutorial, click on “Skip and Continue”.

Next, You’ll come across a box that asks you to fill in your details (that you can choose to leave as blank) and install the custom data that’s added to the website. 

So in this step, just click on Submit & Build My Website.

Once you click the Submit & Build My Website button,  it will start importing the website. 

Now, you’re ready to make things your own!

Astra uses the native WordPress Customizer to help you customize your store’s looks. This tool lets you make code-free changes to various aspects of your store and see the results right away on a real-time preview.

To access the WordPress Customizer, go to Appearance → Customize in your WordPress dashboard:

In addition to the WooCommerce-specific settings here, Astra also includes options to help you customize other aspects of your site like fonts, colors, logos, and more.

These let you control aspects of your store like:

Most of the WooCommerce settings are located in two main areas.

To access the set of options, go to WooCommerce in the WordPress Customizer sidebar. Here, you’ll see following areas:

For example, if you enable a Store Notice, you’ll get this nice sitewide notification banner:

This feature is great for promoting a sale or special offer.

Changing the Shop Columns to 4 adds another product on each row:

Beyond the WooCommerce part, you can also find WooCommerce settings in:

Steps for building a WooCommerce Website With Elementor & Astra Theme.

Astra helps you customize your shop and product pages, as well as your navigation menu and sidebar.

But when it comes to tweaking your Homepage and About Us page, that’s where the free Elementor page builder plugin comes in.

To edit your homepage, click the Edit with Elementor. Elementor makes it easy to:

For example, to edit the headline on your homepage, you just click and type:

Did you know that you can create an entire shopping cart, a checkout page, a customer account page, and so much more by just using a shortcode? 

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

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.

Using Astra, you get:

Want more features? 

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

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.

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:

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

Both Astra and Elementor offer pro versions that can add functionality to your WooCommerce store.

This functionality isn’t just eye-candy – it adds features that can make a real effect on your store’s bottom line by making it easier for your visitors to shop your products, as well as giving you options to control your store’s checkout page:

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

Remember, all you need to do is:

Now get out there and start selling your products!


0 %
0 %
0 %
0 %
0 %
0 %
Previous post Radical new “Flying-V plane” aims to transform flight
Next post How to Add Custom Items to Specific WordPress Menus

Average Rating

5 Star
4 Star
3 Star
2 Star
1 Star

Leave a Reply

Your email address will not be published.