PLUGINS: Build a WooCommerce Website With Elementor & Astra Theme

Monday, May 9, 2022

Build a WooCommerce Website With Elementor & Astra Theme

visit EYEWP.COM now!! https://eyewp.com/

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 to Look For in an Elementor WooCommerce Theme

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?

1. Speed

It all boils down to how fast your website loads. It is all the more important when you’ve got products to sell in your WooCommerce store.

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

Did you know that 1 in 4 visitors will abandon your website if it takes more than four seconds to load? Even a second delay can reduce customer satisfaction by 16%. (Source: Website Builder Expert)

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.

At the end of the day, it comes down to user experience. The better the user experience, the better is your store conversions.

Hello! My name is Sujay and I’m CEO of Astra.

We’re on a mission to help small businesses grow online with affordable software products and the education you need to succeed.

Leave a comment below if you want to join the conversation, or click here if you would like personal help or to engage with our team privately.

2. Customization

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

When creating an online store, the idea is to create one that’s better than your competitors. Your logo, fonts, colors all have to reflect your brand identity.

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.

3. Demo Templates

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.

Look out for themes that offer you the flexibility of using pre-built WooCommerce store templates that can be easily customized using Elementor.

4. Optimized For Mobile Sales

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.

(Source: Statista)

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.

5. Faster Checkout Process

Let’s start with some facts.

The average cart abandonment rate is nearly 70 percent (69.57 to be precise), and it’s as high as 85.65 percent when it comes to mobile users
Due to cart abandonment, eCommerce brands lose as much as $18 billion in sales revenue every year

The good news is that the same report also indicates that by optimizing the checkout experience, there’s a 35.62 percent increase in conversions.

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

(Source: Sleeknote)

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.

6. Awesome Support

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.

7. Secure

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.

A theme like Astra! 🙂

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, check our complete guide.

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

Part 1: Build a WooCommerce Website in Under 10 Minutes

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: Theme and 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:

Step 2: Import Astra WooCommerce Starter Site

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

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:

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

Some of these templates are free, while others, marked as “Premium” require the Premium Starter Templates plugin that’s part of the Astra Essential Bundle and Growth Bundle.

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!

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:

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 Settings

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

Product Catalog – 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 – 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.
Store Notice – lets you enable a storewide notice and customize its text.

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:

Global → Container – lets you control the width of the area that your WooCommerce pages occupy.
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

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

Part 2: Use the Elementor Page Builder to Customize Your Shop 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:

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. If you’re a total newbie, then you should get familiar with Elementor page builder first.

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?

Here’s an entire list of WooCommerce Shortcodes that you can explore.

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.

When to Consider Going Pro With Astra

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 Essential Bundle and Growth Bundle lets you use premium ready-to-use websites having “Premium” tags from the starter websites library.

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

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

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!

==========

Premium plugins, extensions, and themes for WordPress and WooCommerce – Download Free

Don’t be late. visit EYEWP.COM now!! https://eyewp.com/

Grow your business with thousands of free and paid plugins, extensions, and themes for WordPress and WooCommerce across all your logistical, technical, and marketing needs.

Platform

WordPress – Shopify – Prestashop – Magento – Joomla – Opencart

Brands

WooCommerce – Yoast – Gravity Forms – YIThemes – CodeCanyon – Themeforest – Easy Digital Downloads – WP Rocket – iThemes – AffiliateWP – Give – Toolset / WP-Types – WP All Import – Advanced Custom Fields – Design N Code – WC Vendors Pro – The Events Calendar – Ultimate Member – ArrayThemes – Duplicator Pro – FacetWP – Elementor Pro – SearchWP – Admin Menu Editor – Automatewoo – MainWP – WPFomify – Restrict Content Pro – WPFomify – MyThemeShop – Elegant Themes – WPMU Dev – Thrive Themes – WP Job Manager – Beaver Builder – Divi Booster – Download Monitor – WPML – Themify – Gravity Perks – Admin Columns Pro – LearnDash – Studiopress – EventON – CSS Igniter – Gravity Flow – AppThemes – CyberChimps – Elementorism by CSSIgniter – OceanWP – WP Rich Snippets – Rank Math – Crocoblock – polylang – UpdraftPlus – GeneratePress – EngineThemes – Iconic – clearfy – formidableforms – Wordfence – restrict content pro – premmerce – LifterLMS – ProteusThemes – JoomUnited – wpmailsmtp – aioseo

PLUGINS