How To Build A WooCommerce Website With Elementor & Astra Theme
Sujay Pawar

April 25, 2018

How To Build A WooCommerce Website With Elementor & Astra Theme

Elementor Elementor WooCommerce

See All Astra Theme WooCommerce Features

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

Join 208,419 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

About the Author

Sujay is CEO and Co-Founder of Brainstorm Force, the company behind Astra. He is a diehard entrepreneur, growth hacker, and YouTube addict. Get in touch with him on Twitter @sujaypawar.

Sharing is Caring!
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp
Share on facebook
Share on twitter
Share on telegram
Share on whatsapp

12 comments

  1. Pingback: How To Choose A WordPress Theme in 2018: The Definitive Checklist

  2. I have Agemcy licenses. I build store now on Shopify, but I was thinking of switching to WC and Elementor. I haven’t had a chance to look at closer. I know that WC need many add-one to work good. It is not free as people think. However I guess that in my case I can set up fully functional shop without need for additional paid plugins. Can you confirm please. Thanks.

    1. Hello,

      The need of plugins completely depends on what features and functionalities you wish to include on your website. If you wish to build a simple eCommerce store, you can do that using free resources too!

      In fact, take a look at the ready to use eCommerce website demos that we offer. The ones without the Agency tag can be imported and used for free since they are built using 100% FREE resources. 🙂

    1. You can add social media links with Astra Widgets plugin. I am not sure if I understood what you mean by adding a subscription. Did you mean by the opt-in form that can add a user as a subscriber? If yes you can use subscription forms provided by any page builder or plugin. In case you need an advanced solution you can go for Convert Pro.

  3. Hey there my woocommerce widget cannot be found in my elementor page builder. Is there a setting that I’m missing?
    Thank you!

    1. Hello Amanda,

      The WooCommerce widget comes in Elementor Pro. Can you please check whether you have the Pro version?

  4. Hi
    I am using the Astra free theme, the Elementor Free plugin and Woocommerce free too.

    Sadly, I started setting up the Astra site with Elementor much earlier than installing WooCommerce. I use my own design. Since you say that the steps are precisely the other way round, (first install and configure WooCommerce, then set up the site with your free templates… is there anything I can do to avoid having to start from scratch? 🙁

    Also, I noticed that as soon as I activated WooCommerce (having Astra and Elementor previously active), the pages don’t look as I designed them. If I deactivate WooCommerce, everything looks fine.

    Thanks in advance for your response
    Esther

    1. Hello Esther,

      If you haven’t yet done so, could you please open up a ticket at our support center, so that we can take a closer look to see how things are set and help you better?

Leave a Comment

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

Recommended Articles

Scroll to Top
Like what you read? Leave a comment

Subscribe to Our Newsletter