Since its inception, eCommerce has transformed the way of shopping for all of us. Although it’s easy to shop on but not that easy to run an eCommerce business.

It requires various stages of planning and resources, one of which is having a well-developed website. 

To remain parallel with your competitors, you need to adapt to the changes in the industry. For this, you need to have proper hands-on tools.

In this article, we will discuss one of the tools named Elementor WooCommerce used in WordPress, which makes the development, updating, and maintenance of your eCommerce site easy and fast.

elementor easy drag and drop html editor

Elementor is a WooCommerce store builder that offers an intuitive, drag, and drop interface for building awesome user interactive websites.

It helps the developers save time by skipping most of the handwritten part. This also helps the designers to deliver the project faster while being sure of a stable and flexible output.

WooCommerce and Elementor

Although there are many more plugins in WordPress, WooCommerce is the one that is most widely used all over the world for building an eCommerce site. It is preferred because of its various benefits like:

  • Security 
  • Developer friendly 
  • Miscellaneous useful features
  • Low cost
  • Extendability

Apart from this, there are various other additional features which place WooCommerce in the lead. 

Elementor, on the other hand, is a Builder plugin for WordPress which easily integrates with WooCommerce.

Along with easy integration, it offers you a smooth way to build an online eCommerce store easily, efficiently, and faster.

How to install and setup the woocommerce plugin

As we are going to further discuss the working of WooCommerce for creating pages for your eCommerce store. Let’s check the various crucial steps for the successful installation of the WooCommerce plugin.

The steps are basic and very simple. You’d better be a bit careful while performing the steps. Let’s begin!!!!

To set up a WordPress WooCommerce powered online store, you need to install WordPress and WooCommerce plugin.

The installation will require some prerequisites from the host system, make sure that the host server has all the required elements. The requirements are:

  • PHP version should be at least 7.2 or greater
  • MySQL version 5.6 or greater or MariaDB version 10 or greater
  • The WordPress memory limit of 128 MB or greater.
  • HTTPS support

Check all the requirements carefully as the outdated and unsupported versions of MySQL and PHP may compromise the security of your website.

After checking all the specifications, let’s jump into the installation process of WooCommerce. If you already have a WordPress site, follow the following steps for installing WooCommerce:

install woocommerce plugin

  • Go to the “Plugins” option and choose “Add New”.
  • Search for ‘Woocommerce’.
  • If the installation is by Automatic, Select Install Now.
  • Choose the option “Activate Now” and the WooCommerce Setup wizard will follow.

When activated for the first time, the WooCommerce setup wizard helps you set up your shop. 

The setup wizard will provide you with two choices, either you can click on the “Let’s Go” option to allow the setup wizard help you in setting up the shop or you can click on “Not Right Now”. This will allow you to set up your store manually by yourself. 

In the automatic setup wizard option, it further asks you about entering other parameters like:

WooCommerce Store Setup:

in this, you will be required to enter various details like location and currency of your store, the types of goods you are planning to sell. Along with this, you will be asked to check the box if you will sell goods and services in person and if you wish to participate in improving WooCommerce.

install woocommerce blog plugin

Payment:

Based on your location and if you checked or unchecked the checkbox of selling goods and services in person, you will be provided various payment options to choose from, like Paypal, Stripe, and Square if you live in U.S, Canada, Australia, Japan or the U.K. 

If you have NOT ticked the box of selling in person, then

setup woocommerce plugin guide

If you ticked the box of selling in person, then

setup wordpress woocommerce plugin

If you are in Austria, Denmark, Finland, Germany, the Netherlands, Norway, Sweden, or the UK, you will also see Klarna.

how install woocomerce

For Australia and New Zealand, it will be eWAY.

woocommerce setup guide step by step

For South Africa, it will be Payfast.

guide for setup wooceommerce

For offline payments, select the appropriate option shown in the screenshot below

woocommerce plugin guide

Shipping

In the shipping section, you have a choice of printing shipping labels at your home. To save time, you can choose this option along with the units of weight and dimensions.

The printing labels at home option is available only in the U.S and Canada.

woocommerce setup shipping guide plugin

Recommend

Various options will be offered to you by the wizard depending upon your geographical area. You can also choose some other extra extensions for your store. 

woocommerce guide for installing and setup

The plugin automated taxes requires Jetpack connection, choosing this will lead to establishing a connection. You can connect to jetpack and you are ready to go!!!

woocommerce setup guide jetpack

Now as the setup wizard is complete, you can create products, upload products via CSV and review and change settings. You can also take a video tour or read get started.

woocommerce wordpress plugin installing and setup step by step

Re-run the Setup Wizard

If in any case, you miss the setup while installing WooCommerce, go to Help > Setup Wizard and select Setup Wizard.

woocommerce setup wizard

How to install and setup elementor plugin

As we have seen, what actually Elementor is, let’s see how we can set it up in WordPress. 

Elementor is available in two variants. It can be downloaded for free and there is a paid version also. Both have their own benefits but to get a clear idea which one to choose, check the Elementor review.

Now, the Elementor page builder plugin can be installed in two ways:

+ Elementor Method: After selecting and downloading the variant in the WordPress dashboard, go to “plugins” and choose the “add plugin” option. In the end, click “upload plugin” and choose the file you have downloaded.

+ WordPress Method: In the dashboard, go to “plugins” and click “add new.” Search for Elementor in the search field and choose Elementor Page Builder to install. After installing, click on “Activate.

elementor wordpress plugin

Using Elementor Builder

Now, our Elementor Builder is installed and activated in WordPress. Let’s check how we can use it to make our website look better.

We will start with the initial steps that would give you a better idea about the interface and features.

1- Creating a new page

Like everything else, it is pretty simple to create a new page in Elementor builder. You just need to go to the WordPress dashboard and select “Add new” after clicking on “pages.

After this, click on the edit with Elementor to enter the Elementor page builder.

Following this, you will see a page with Widgets on the left side and editing area on the right where you can add templates, sections and more.

elementor builder setup

elementor builder install and setup

2- Building the first page

The Elementor Builder tool offers three types of building elements named sections, columns, and widgets. 

Sections are the largest and widgets are the smallest among all. Widgets are housed in columns and columns in sections.

The user can easily control all three of them with their respective handles.

Use the section handle to add a section or use a predefined section. You can also set the column structure in this.

A column can be added by using the “Add a new column” option in their handle, and its width can be changed under the layout.

The Elementor WooCommerce widgets can be added in the columns, and their width can be set by the column width. You can surf through a variety of widgets shown on the left side of the interface to make your website attractive for your users.

Handles

elementor builder Handles

Section Preview

elementor Section Preview

Widgets Preview

elementor builder Widgets Preview

3- Adding Templates 

Templates are pre-built pages and blocks included in the Elementor Builder. They can be easily added with a single click on the webpage.

To choose a template, click on the folder icon in the editing area. The template can also be viewed by clicking on the magnifying glass icon. Click on insert to select the required template.

Choosing from templates

elementor page builder templates

4- Preview and Publish the pages

After you are done designing the page according to your needs. You can view the page by clicking on the “eye” icon.

It will show you the way your page looks, and after being satisfied with it, you can easily publish it by clicking the “Publish option.”

There is also an option to save your page as a draft after making changes to the published page.this will help you save your progress.

elementor Publish the pages

elementor update the pages

5- Making website responsive to devices

With Elementor, it is possible to control how your website looks on various devices like Mobile, Tablet, laptop, etc. 

You can easily edit the text size, margins, and padding of elements. Just click the icon of the device you want to edit.

Elementor also provides you with the ability to choose the image for devices and also control the position and visibility of images on different devices.

Change the breakpoints for mobile and laptop along with the ordering of columns.

elementor builder responsive to devices

How to Create Products With WooCommerce

Since WooCommerce is a widely popular tool to create your own online shopping store, it needs a special mention of how to create products with WooCommerce.

This process is simple, straightforward, and really exciting. The overwhelming experience of adding the first product to your store is both fantastic and a little worrisome.

But you need not worry about it all, there is a huge market at your disposal, and all you need is to pitch right to the right audience.  

Here we will go through the process to add a product to your new woocommerce store:

Step 1: Add New Product

As soon as you build your first page, adding the products should be your next stepping stone. The products menu has to be good looking, influencing, and informative. So, to add the first product navigate to Products >> Add New. 

Click on it, and a new screen will pop up with multiple options and prompts for you to consider. Woocommerce works best with WordPress, and thus creating new products is also done through the WordPress editor. 

elementor builder add new product

Starting with the name and the product description, you need to select the right product categories, the product tags, images, and gallery. Consider these additions as a step by step process to further enhance your product visibility.

Because if the customer is clear about the product they are about to buy, the decision making will be more comfortable. 

Now adding images and making a gallery part is not a difficult process even if you are doing it for the first time. If you have experience with WordPress, it’s awesome, if not, then you have a good opportunity to learn something new. 

Step 2 Product Configuration:

This is where you will give your product a new identity and further simplify it to the highest extent. You will need to describe the type of product. 

  • Simple Product
  • Grouped Product
  • Affiliate Product
  • Variable Product

elementor page builder plugin Product Configuration

You can select the type of product from the drop-down menu. To give you an overview, the simple products are ready to be used products.

They are usually sold in single shipments. Grouped products are like a set of DVDs or a series of books which need to be sold together.

Affiliate products are not owned by you, but you will get a commission for their sales. Lastly, the variable products include variations. These can be in sizes, shapes, colors, and whatnot. 

Step 3: Tweaking the details

In the next segment, you can add a few more details for your product. First up, you can choose your product to be virtual or downloadable.

The virtual products are like those which are provided in the software form. And the downloadable products can be downloaded by the user on their device, but after they fulfill some conditions set by you. 

Next up is further streamlining the product details. You will see a general tab on the left-hand side of the product configuration window. In this, you will need to set the price (fixed or discounted).

And if you are selling an affiliate product, then you can also add some other parameters like URLs, product links, etc. 

Inventory lets you assign a unique ID and make a stock list for all your products. In the shipping details, you need to confirm the product weight, measurements, and shipping classes. 

All the other tabs are optional edits for your products. They will make your product simpler to understand. Thus, buying decisions are made easier. 

elementor woocommerce add product guide

This is what your first product will look like when you add it. 

In case you want to check out all the products that you have added, go to All Products and check them all out here. 

elementor plugin woocommerce products

Step 3: Build a Product Page

Once you have added the products for your store, it is time to build a product page template. This product page will have all the products of your store, sorted on one page.

Elementor will give you the freedom to either create your own product page or choose from the pre-made templates. 

elementor woocommerce wordpress products

Just go to Templates >> Add New. Here you can choose the block templates for all the four types of products that you can sell via WooCommerce.

If you want to create a block from scratch, go for it. And if you’re going to customize the existing templates that is also possible. 

Step 4: Playing with the Widgets: 

The Elementor Widgets provide you with various options to further enhance your product information sharing. For a simple product, there is no need to add extensive information. 

But if you are selling a high-end or a wearable, then explaining it all to the potential buyer will benefit you. 

Here are a few Widgets that you can add to your product details page on WooCommerce:

elementor woocommerce build products guide

A simple product will have just the most essential details, and an Add to Cart Button. But for a product which needs more details and extra information, you can add a lot of content on the same product page.

Apart from product description and name, there is MetaData, Reviews, additional info, horizontal and vertical slider images, stock and inventory, breadcrumbs, cart menu, among others. 

woocommerce plugin elementor guide

Step 5: Add to Cart Button

Now, this may look like a simple button that is important, but customizing it is not necessary.

Well, that is where you are mistaken. The Add to Cart button is what every seller wants their users to go for.

However, you can make a few tweaks to this button and further enhance the user experience. 

From enabling the hover effect to changing the color scheme and typography, Elementor will give you a lot to play with. But when you click at Custom Add to Cart button, options like change in size, alignment, icon shape, and spacing.

The best part, you can also allocate an ID to this button for all or any product that you like. This addition will help you track the performance of the products and then retarget the potential buyers with the help of Analytics. 

woocommerce plugin elementor guide step by step

Step 6: A few Tweaks and Publishing: 

Before your product goes live on the website, you can further make a few helpful changes.

This includes choosing the right categories, the shipping classes, and assigning additional attributes.

You can also choose to add pea-sized images to the product categories with Elementor for Woocommerce. And then you can hit the “Publish” button.

Benefits of Elementor

Customizable Layout

Elementor has a simple structure which offers user to customize their webpages as much as they want. It has the options of sections, columns, and widgets which can be customized as per user requirements.

elementor Customizable Layout

Resizing

It is extremely easy to resize the structure of every page element, whether it is a section, column, or a widget. You can stretch each of it from any corner to make it as big or small as you desire.

This helps you position each element at the required place with appropriate spacing between them. It also helps to make your webpage look clean.

elementor plugin woocommerce Resizing

Scaling 

Elementor also provides the designers with the ability to control the spacing between the content and the border of the section or column.

This is very much helpful because, with this feature, designers can dynamically resize the content to make it fit for their mobile phone audience.

elementor plugin guide scaling

Templates

Templates are the pre-built page design and structures which are offered to the designers to save time if they like any.

The most amazing thing is that these Elementor WooCommerce templates can be modified as per the designer and saved separately.

They can also be used for other websites and shared with other designers with the help of import-export functionalities.

elementor page builder templates

Developer friendly

Adding up all the features, Elementor is developer-friendly as it offers state of the art features for full customization of the pages.

Along with this, its pick and drop style eliminates the need to write long codes which saves time. With this, designers can design and release the website faster.

elementor page builder Developers friendly

 

Conclusion

As we have gone through all the basic aspects of Elementor WooCommerce page builder, I hope this guide will steer you in the appropriate way while making a choice.

You will be able to discover many more features and benefits of Elementor Page builder like various WordPress themes, attractive product categories, product archive template, etc. when you will get hands-on the plugin.

It is an excellent product to consider because of its operability, features, and its ability to get things done faster.