How To Build A WooCommerce Website With Elementor & Astra Theme

Elementor Elementor WooCommerce

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?

We know – that’s a tall order. But with the combination of Elementor, WooCommerce, and the Astra theme, you can do it. And in this post, we’re going to show you the exact steps you need to take to get up and running with your own store in no time.

What You Need To Make Your WooCommerce Store

As the title of this post suggests, there are two main tools you’ll need to build your store beyond the core WooCommerce plugin:

  • Astra Theme – this is a free WordPress theme that includes deep customization options, as well as a built-in WooCommerce integration and demo sites.
  • Elementor – this is a free page builder that will help you customize various pages at your store, like your homepage and about page.

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.

If you need a helping hand with setting up WooCommerce, the WooCommerce Guided Tour Videos are a great place to start.

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

Part 1: Setting Things Up With Astra

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

  • Import free Elementor WooCommerce templates, as well as WordPress Customizer settings, to quickly create a great-looking WooCommerce store.
  • Use Astra’s dedicated WooCommerce integration to customize important aspects of your store via the real-time WordPress Customizer.

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

Step 1: Install Astra Theme And Astra Starter Sites Plugin

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

Elementor WooCommerce Theme

Step 2: Import Astra WooCommerce Starter Site

Once you’ve installed the Astra theme and Astra Starter Sites plugin, go to AppearanceAstra Sites in your WordPress dashboard to import your demo site (this help article has more information if needed).

Then, select the Elementor page builder:

best free themes for elementor

You can then use the filtering options to find the various eCommerce templates.

Some of these templates are free, while others, marked as “Agency” require the Astra Premium Sites plugin that’s part of the premium Astra agency package.

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:

elementor themes free

Once you click on your desired demo site, it will open up a live preview of your site, as well as tell you the required plugins to use the site.

First, click Install Plugins to install the required plugins (Elementor and WooCommerce, in this case):

elementor woocommerce product page

Once the plugin installation process finishes, you should see two Import This Site buttons in place of the Install Plugins buttons. Be aware that, when you click one of these buttons, Astra will overwrite your current design settings.

If you’re ok with that, go ahead and click Import This Site. After a short wait, while Astra imports all the relevant data, your site should look exactly like the demo.

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

Step 3: Use The WordPress Customizer 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:

elementor woocommerce plugin

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.

For a full explanation of these settings, you can peruse the Customizer settings support articles. For this tutorial, though, we’ll focus specifically on Astra’s WooCommerce integrations.

These let you control aspects of your store like:

  • How your product listing pages work
  • Upsells on your shopping cart page
  • Your product images
  • Other smaller settings

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

WooCommerce Layout Settings

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

  • Shop – lets you control how many products to display on your shop page, as well as what information to display and how many columns of products to display.
  • Single Product – lets you disable breadcrumbs.
  • Cart Page – lets you enable product upsells on your cart page. Upsells can help boost your sales by showing targeted products related to the products that are already in a user’s cart.

For example, changing the Shop Columns to 4 adds another product on each row:

Elementor woocommerce widget

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

  • Layout → Container – lets you control the width of the area that your WooCommerce pages occupy.
  • Layout → Sidebar – lets you control the location of your sidebar on WooCommerce pages. For example, by changing it from Left to Right, your product categories list would shift to the right side

elementor woocommerce plugin

General WooCommerce Settings

You can also access another set of WooCommerce options right from the main WordPress Customizer sidebar by clicking on WooCommerce.

From these options, you can control:

  • Store Notice – lets you enable a storewide notice and customize its text.
  • Product Catalog – lets you control what information should display on your shop and category pages.
  • Product Images – lets you control the size of your product’s images, as well as how those images are cropped.

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

eCommerce Website With Elementor

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

Part 2: Using The Elementor To Customize Important Pages

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:

  • Change text and images
  • Move design elements around using drag and drop
  • Add new design elements

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

WooCommerce Widgets Elementor Pro

If you need some help using the Elementor page builder to edit your shop’s core pages, the official Elementor 101 videos are a great place to learn about Elementor.

When To Consider Going Pro With Astra Or 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:

  • Infinite scroll for products: More products automatically load as a visitor scrolls down the page. Research from Baymard Institute suggests that eCommerce shoppers tend to view more products with infinite scroll, which is great if your store has a deep catalog.
  • Off-Canvas sidebar: This lets you add helpful filters without getting in the way of your shoppers’ browsing. Quality filtering is an essential aspect of any eCommerce store. Done right, it lets your customers quickly find the right product so that they can make their purchase.
  • Product Quick View: Shoppers can click a Quick View button when they hover over a product to see more information about that product. This lets them see important details without requiring them to load a new page, which can make for an easier shopping experience.
  • More checkout options: You can add a distraction-free checkout, or enable a two-step checkout process. You can also choose whether or not to enable the coupon field, as well as a few other smaller settings. All of these options help you tweak your checkout process to ensure that your cart abandonment rate is as low as possible.
  • White label: If you’re building a store for a client, this feature lets you remove all Astra branding from the WordPress dashboard to offer a more customized final product.

Where Astra Pro gives you access to extensive and unique e-commerce features and functionality, Astra Agency Package lets you use premium ready-to-use websites having “Agency” tag from the stater websites library.

And with Elementor Pro, you’ll get access to dedicated Elementor WooCommerce widgets that help you display your products and redesign product pages.

WooCommerce, Astra, And Elementor: Better Together

Put them all together and WooCommerce, Astra, and Elementor are a triple-threat that let you build a completely custom eCommerce store in no time without writing a single line of code.

Remember, all you need to do is:

  • Install and configure WooCommerce
  • Import an Astra demo site
  • Customize your store via Astra’s real-time Customizer settings
  • Edit your homepage and other core pages with the Elementor page builder

Now get out there and start selling your products!

Leave a Comment

Your email address will not be published. Required fields are marked *