[ad_1]
Starting a new eCommerce store could can be an overwhelming task for a novice. Especially if you are not a developer, setting up an online eCommerce store can be challenging. However, if you follow our step-by-step tutorial to set up a professional Astra WooCommerce store, then you can easily create your store in no time for free of cost.
Also read:
– 21 Must-Have WordPress WooCommerce Plugins You Need For Your Store
– Astra Theme – Is This Popular Theme also Suitable for WooCommerce?
What tools are going to be used to make your eCommerce store? You’ll need only three tools: WooCommerce plugin, Astra theme & Elementor Builder.
- WooCommerce:- Install the latest version of WooCommerce from WordPress repository.
- Astra theme:- Astra theme is a feature-rich, highly customizable and lightweight theme. Astra has perfect integration with almost all famous page builders and especially with the Elementor page builder.
- Elementor:- Elementor is an ideal solution for users who do not have any prior coding skills. And they can design their entire website pages like about us, the home page, and product catalogue and payment pages like a breeze.
How to Build a WooCommerce Store using Astra theme & Elementor Builder?
Astra is one of the most recommended WordPress themes that are ideal for any kind of website, personal blog or eCommerce website. Astra stands out from other WordPress theme because it is the lightweight, fast and flexible theme.
Moreover, Astra is packed with a vast library of ready-made websites with deeply customizable options. It is perfectly compatible with Elementor page builder and helps you design various pages of your site with the perfect duo combination of Elementor and Astra.
Let’s have a quick look at some of the exceptional features of Astra theme that stand it out from other themes.
- Compatible with almost all famous page builders like Elementor, Beaver builder, Brizy etc.
- Lightweight and fast, thus your site will load at a lightning-fast speed.
- Modern, sleek designs.
- Responsive layouts perfectly fit on any screen sizes.
- Massive library of ready-made templates with customizable features.
- Supports WooCommerce and comes with free Elementor WooCommerce templates; ready to import with customizable settings.
If you are a novice and trying to build a personal blog or any informative business website, then the free version of Astra would be enough for you., because Elementor pro can cover many aspects for you. However, if you need to start an eCommerce site with customized features or have multiple websites, then I recommend getting Astra pro version & Elementor Builder Pro. Astra pro version supports an unlimited number of websites and allows more styling features with significant control.
Astra pro exclusively focuses on the WooCommerce features and offers pre-built starter templates for various WooCommerce stores. You can import any of the templates and start your store right away. Or you can also customize the WooCommerce features according to your specific business needs.
Let’s start with our tutorial. I assume that you already have pre-installed the latest version of WooCommerce. The next step would be installing the Astra theme and Elementor page builder.
Step 1: Install the Astra WordPress Theme.
Once you have installed the WooCommerce latest version, then the next step is to install the Astra theme from wordpress.org.
Open the dashboard and go to:-
Appearances -> Themes -> Add New -> search “Astra” -> click on Astra theme and install and activate.
Step 2: Import Your Astra Demo Starter Site
After installing the Astra theme and starter plugin, you can import any demo site from the Astra sites to start your website.
Once you click on the Astra sites option, you will have to select which page builder you like to use to help you in customizing your website layouts.
Go for Elementor page builder.
You can choose any demo site from various eCommerce templates. Most of the templates are free; however, those demo sites which are labelled with “Agency” come with premium Agency package that is a part of premium site’s plugin. You can select any one of them that suits your business needs. We’ll work with the brand’s store.
You can preview by clicking on any of the desired demo sites before using it.
When you preview the demo site, you’ll see an option “install plugin” that is for installing Elementor plugin. Therefore, you’ll have to install the Elementor plugin before moving forward.
Once you are done with the plugin installation procedure, another option of Import this site will appear. So, if you decide to download the demo site, be aware that the demo site would replace all of your current design settings of the website.
Therefore, if you are convenient to replace the older designs, then move forward and click on “import the site” option. All of the required data will be downloaded right away, and you can customize the site’s settings as you need.
Step 3: Use Native WordPress Customizer
Astra theme comes with an easy option to use native WordPress customizer to customize your website layouts. This option is especially for those users who do not have any prior coding knowledge. And they will be able to change various aspects of eCommerce site while still be able to preview the changes in real-time.
To customize your site’ layouts go to the Appearance -> Customize in the Dashboard menu.
You will have access to any aspect of your WooCommerce store, i.e. your products listings, the setting of your shopping cart page, product images and many other settings like fonts, colours, logos, images dimensions and many others.
Basic WooCommerce Settings
In the customize sidebar you access to two essential WooCommerce setting areas. You will find three customizable areas in; Layout -> WooCommerce.
Shop:- This setting area lets you customize the product catalogue page of your shop. Here you can edit
- How much products you want to display on the shop page.
- Product descriptions.
- How many columns of products should be displayed; 2 columns, three columns or four columns depending upon your choice.
Single product display:- if you like to show a single product per page, then this section will help you with product display and disable breadcrumbs.
Cart page:- This page setting will help you to boost your sale in the cart page by showing those targeted products which are being purchased by other customers also. Therefore, you will enjoy an upsell on your cart page with the sale of many other related products as well.
Other than the setting of your products display, you can also customize the layout area of your product display page. Thus, you can customize the width of products in display and also the sidebar location.
Some other general WooCommerce settings can be accessed from the main WordPress customizer sidebar by clicking on the WooCommerce option. Where from you can control these options.
Store notice:- You can select a text to be displayed on each of your website pages. These notices can be about upcoming sale promotion or any new product launch in forthcoming days or anything which you like to display to your audience.
Product Catalog:- With this option, you can select any text or information that you want to display on your product category pages
Product images:- You can control what image size should be maintained across your website.
How to Use the Elementor Page Builder to Customize Your Shop Pages?
The native WordPress customizer can help you customize your product pages, your product display, the sidebar menu and other basic WooCommerce settings.
However, when it comes to the Homepage and about us pages settings then you’ll need Elementor page builder.
The Elementor page builder is helpful in:-
- Changing the text size, the headlines and images.
- The page images can be moved around anywhere with the help of drag n drop option.
- Add new design elements or edit an existing element.
Click on the Edit with Elementor option.
If you like to write the headline you can simply click on it and change the text as you wish. You can move other elements also and place them wherever you like to. Or you can add any other element also. The same way you can edit any other page with Elementor page builder.
Elementor and Astra WooCommerce Story – Over to You
The trio combination of WordPress, Astra and Elementor can create a next-level WooCommerce website in no time without using any code. Creating a WooCommerce website is easy as a breeze, and you do not need to go through any complicated procedure.
- Install the latest version of WordPress and configure WooCommerce plugin.
- Install Astra theme and import your favourite Astra demo site.
- Customize the essential eCommerce store setting, i.e. the product catalog and images with the native WordPress customizer.
- Edit the core website pages like Homepage, about us page with the help of Elementor page builder.
That’s all. Your professional WordPress eCommerce store is ready to rock.
[ad_2]
