How to Build a Custom WooCommerce Store Using Elementor?

Table of Contents

Are you looking for a way to set up your WooCommerce store using Elementor? Are you looking for an easy way to customize your WooCommerce store using the Elementor Page Builder? You’ve landed on the right spot! In this WooCoomerce Elementor Tutorial, I will cover every step of setting up a WooCommerce store using Elementor.

Having a custom look of your WooCommerce store can make a lot of difference in your store’s performance. But customizing WooCommerce parts is not that easy. Even with Elementor Pro, you get widgets that allow you to customize the WooCommerce elements, but they often don’t come with good customization options.

But it does not mean that you can’t customize your WooCommerce store the way you want. In fact, in this tutorial, I will take you through a step-by-step journey on how you can customize WooCommerce store parts with Elementor. By the end of this WooCommerce Elementor tutorial, you will have a custom-designed functioning WooCommerce store up and running. 

Not just that! We will be doing all of that using the Elementor FREE version.

Yes! That’s right!

I will be using the brand new WooCommerce builder of PowerPack Pro addon to customize the WooCommerce pages.

In this tutorial, I will start with the basics. Then I will cover every aspect required to set up an eCommerce store with the Elementor Free version and WooCommerce using PowerPack Addon.

So, without any further ado, let’s jump into it!

For this tutorial, we will be using these three plugins:

  • Elementor Free Version: Elementor is the page builder that we will be using in this tutorial. It is a simple drag and drop front end builder that allows you to customize your website without coding. Get Elementor.
  • WooCommerce Plugin: This free plugin allows you to set up your eCommerce store on your WordPress website without touching a single code line. Get WooCommerce
  • PowerPack for Elementor: Since we will be using the free version of Elementor, we will be customizing our WooCommerce store with the WooCommerce builder of PowerPack. Get PowerPack.

If you are not sure why we are using these plugins; here is a quick explanation:

Why WooCommerce and Elementor?

WooCommerce allows you to set up the entire store with a couple of clicks, and with its powerful setup wizard, you do not have to worry about the technicalities. 

You just need to enter the details and information about your store, and WooCommerce will take care of the same.

WooCommerce automatically adds eCommerce parts to your eCommerce websites like the cart page or the checkout page.

When a user buys a product, they go through a proper step by step buying journey. 

This journey usually starts from Adding Product to the Cart > Cart page > Checkout page > Payment and finally to the Thank you page. The WooCommerce plugin handles all of this.

So then… Why are we customizing WooCommerce with Elementor?

WooCommerce is reliable when it comes to functionality, but if you want to make design changes, there is not a lot that you can do here. 

You can make some basic changes to your store parts like color or typography change, but if you want to revamp your store’s look, we will need extra help.

And for that, we will be using the Elementor Page Builder. With Elementor, you get loads of options to customize and alter your WordPress website’s look easily. 

Elementor has a powerful editor interface that allows you to drag and drop the elements like text, image, or sliders to create a custom-looking layout easily.

Also Read: 10+ Reasons to use Elementor. 

You can literally create a custom theme design just by using the Hello theme and Elementor plugin. Don’t worry! We won’t be doing that, but if you follow this tutorial, you will be able to customize your website entirely.

Okay, Elementor is required… but then why PowerPack?

Elementor has two versions: Free and Pro. You get loads of options with the free version, but if you want to customize your WooCommerce website’s look, you will need the Pro version.

Also Read: Elementor Free VS Pro Comparison

With PowerPack for Elementor, you can create WooCommerce pages and parts using the Elementor Free version.

We have recently added the WooCommerce builder to PowerPack. Now anyone can create and customize the WooCommerce parts without the help of Elementor Pro.

Apart from the WooCommerce builder, PowerPack is loaded with many more powerful widgets that we will be using in this tutorial.

The only things you will need for this is the WooCommerce plugin, Elementor Free version, and the PowerPack Pro addon. You can go with any theme of your choice but if you want my recommendation, I would suggest the Hello Theme by Elementor would be good enough!

Okay, I think we now understand why we will be using the combination of the three widgets.

Now, let’s start setting up our WooCommerce store. At this point, I am assuming you have a website up and running on WordPress.

If you do not have a website up and running, then wait! Go back a few steps. Get yourself a good domain name and a hosting plan. Set up your website and install WordPress. Once you have got that covered, we shall continue with our WooCommerce Elementor tutorial.

Let’s set up our epic WooCommerce Store!

Installing and Setting up Plugins

1) WooCommerce Plugin

In this section, I will be doing a fresh WooCommerce plugin installation on a WordPress website. If you are not familiar with how to install the WooCommerce plugin, don’t worry. Just follow along!

If you already have the WooCommerce plugin installed and set up on your website, you can skip this step.

Step 1: Log in to your WordPress website’s admin dashboard. Now go to the Plugins > Add New.

Step 2: Look for the WooCommerce plugin and install WooCommerce. Once it is installed, click on the activate button.

WooCommerce elementor

Step 3: As soon as you click on the activate button, you will be redirected to the WooCommerce setup wizard, which will look like this.

WooCommerce setup

Click on the Yes please button.

Step  4: Follow the installation wizard’s instructions. Now enter your store’s details in the first step.

WooCommerce install

Step 5: After clicking continue, select the industry for which you want to set up your store. Click on Continue button.

WooCommerce store selection

Step 6: All of this is pretty straightforward and on the next screen, select the type of product you will be selling. For my tutorial, I am choosing Physical Products.

WooCommerce products

Step 7: After clicking on continue, enter how many products you are planning on selling.

WooCommerce selection

Step 8: In the last step, you get the option to choose the theme for your store. You can go with any theme of your choice. I am going with the Hello Elementor theme.

WooCommerce themes

After finishing, you will be redirected to the WooCommerce backend. Here you will be checking on your orders, listing products, and keeping track of everything.

Let’s complete the setup process first.

You will see the finish setup option in the top right corner. Here you can complete all the pending tasks like adding products, tax and payment details, etc.

WooCommerce finishing for elementor

Now, if you have made it this far without getting confused, I am sure you can go ahead without any issue. Go ahead and add new products, payment details, and tax info for completing your store’s setup process.

WooCommerce products selection

For example, here I am importing the products data CSV as sample data for the tutorial.

Go ahead and personalize your store by adding your logo, etc. This can be taken care of by the Finish Setup tab we checked earlier. It will look like this:

WooCommerce image

After checking off all the tabs in that table, you will be all set. We can set up Elementor and PowerPack now.

2) Elementor Plugin

For Elementor, we will be following the same procedure. 

Step 1: Go to the WordPress admin dashboard. Go to Plugins > Add New and search for “Elementor”. Install and activate the plugin.

Elementor installation

You will automatically redirect to a quick guide. You can go through that and familiarise yourself with the builder.

Anyways, we will be going to a step by step process here on how to use Elementor for setting up pages.

Now let’s set up the last yet most important plugin for the tutorial, PowerPack for Elementor.

3) PowerPack for Elementor 

Let’s install and set up PowerPack now.

Step 1: Go to your My Account area on PowerPackelements.com and log in to your account.

PowerPack Install

If you do not have an account with PowerPack, you can get the PowerPack Pro version here.

I know you will love PowerPack, but if you are not sure, don’t worry! It comes with a 14 days money-back guarantee! 🙂

We’ve got you covered!

PowerPack Install

Step 2: Once you have logged in to My Account area, go to Downloads, and then click on the product you want to download.

Step 3: After you have downloaded the ZIP file, go back to your WordPress website. Now go to Plugins> Add New.

Step 4: Now, this time, we will be uploading the zip file. Click on the Choose File button and select the file you want to install. In our case, it will be a PowerPack zip file.

PowerPack Install

Step 5: Once the installation is complete, click on the Activate button.

Step 6: Now go to PowerPack settings and enter your License to activate the plugin.

PowerPack Install step 6

Now we are all set. We can directly jump into customizing our store’s pages.

Let’s start with the Product page. After all, this is where our user will start their journey.

Let’s set up our first page!

Setting up WooCommerce Shop Page Using Elementor

WooCommerce automatically adds some pages to your websites like the shop, checkout, and cart page.

WooCommerce Shop Page Elementor

But for the WooCommerce products page, we will be adding a new Elementor template and will later assign it in the settings.

Step 1: Go to Elementor > Saved templates > Add New.

Select the template type as Page and give your template a proper name.

WooCommerce Elementor Guide Shop page

Step 2: Now, as soon as you click on the Create Template button, the editor will load up. You might see your page’s default style in the editor but don’t worry, we will change this.

Let’s start by changing the layout of the page.

Customizing WooCommerce Products Page with Elementor

Step 3: Click on the little wheel icon (⚙) at the lower-left corner of the page. Doing this will open up page settings. Now change the page layout to Full Width or Canvas.

Woocommerce product shop page elementor

The full-width layout will leave the header and footer on the page, and the canvas layout will give you a completely blank space to work on.

I will be choosing the full-width layout here.

Oh! and while I am at it. With PowerPack, you can create your custom header and footer designs as well! Check out the Header and Footer builder.

If you want to learn how to create a custom header or footer with Elementor free, check out this video:

Coming back to our page, let’s start by adding the Product grid widget.

WooCommerce Elementor Guide Shop page

Step 4: In the search widget bar, look for “Woo – Products” and drag and drop the widget on the page. As soon as you drop the widget, you will see the products appearing right away.

Now you get three tabs on the left, Content, Style, and Advanced. We will be majorly working with the Content and Style tab.

The content tab allows you to change the contents of the widget.

And the style tab tells the widget how the content should look.

Step 5: You can go ahead and make the changes to the content and style tab easily. If you want to know how you can do this, here is a reference video that you can use:

After making the changes I wanted to make, this is what my Products grid looks like:

WooCommerce Elementor Guide Shop page

Step 6: You can go ahead and explore the options, and once you are done, you just need to publish the page. Look for the publish button at the lower-left corner of the page. Click on it, and the changes will be made live.

WooCommerce Elementor Guide Shop publish

Now we have created our products page successfully. Let’s create the Product single page.

Creating WooCommerce Single Page with Elementor

Again we will be adding a new template just like we did for the archive or the products page.

Step 1: Go to Elementor Templates and add a new page template and give it a proper name.

WooCommerce Elementor Guide Single page

Step 2: Click on the Create template button, and once you are in the editor, change the layout to full width. Disable the page title just like we did for the Products archive page.

WooCommerce Elementor Guide Single page

Step 3: Now, simply publish the page as it is. We will be making the changes after a small required step.

Step 4: Once the page is published, go back to the WordPress Admin dashboard. Now go to Elementor > PowerPack settings > WooCommerce Builder.

Single page WordPress Elementor

Step 5: Enable the WooCommerce builder and select the page template you have created from the list for the field: Single Product template.

Step 6: Also, while you are at it, select the template you created for products or the shop page in the Product archive page template’s dropdown. Once done, click on the save changes button.

Step 7: Now, we will go back to editing our single product page. For that, click on the edit button below the single product template dropdown. This will load the editor, and now you can customize the layout of the single product page.

WooCommerce Builder Elementor

Customizing WooCommerce Single Page with Elementor

Step 8: Once you are in the editor, firstly click on the wheel icon at the lower-left corner and select a product from your store in the preview settings.

Elementor WooCommerce page settings

With PowerPack’s WooCommerce builder, you get loads of widgets that you can use in combination to create a single page layout.

Here I have added a 2 column layout. On the left column, I have added the product image widget, and on the right column, I have added the following widgets:

  • Product Title
  • Woo Product Rating
  • Woo Product Price
  • Product Content
  • Add to Cart

This is just a simple design I created for my website. If you want to make a different format, you can easily do that. Just drag and drop the widget on the page, and that widget will take the properties of the product selected for the preview.

Step 9: Once you are done, publish the page, and the single page will start working flawlessly on all the single product pages.

If you would rather watch a video on how you can customize the page, you can check it here:

After making a few tweaks and changes to the widgets, my single product page looks like this.

WooCommerce single page design Elementor

So far, we have the product page and the archive/shop page ready. Now we need to complete the rest of the pages.

Let’s customize the page which a typical user sees after adding a product to the cart.

That’s right, the Cart page.

Customizing WooCommerce Cart Page using Elementor

To customize a WooCommerce cart page, we do not need to create an Elementor Page template. We can directly edit the WooCommerce cart page.

Again, for this section, we will be using the Cart Page Styler of PowerPack addon.

Step 1: Go to WP Admin Dashboard > Pages.  Now look for the Cart Page and click on the edit button. Open the page using the Elementor editor by clicking on Edit with Elementor button.

WooCommerce with elementor guide

Step 2:Once you are in the editor, change the layout to full width and disable the page title if you want.

Step 3: Remove the existing WooCommerce cart from the page. Simply go ahead and remove that section entirely.

Step 4: Now, we will be adding the PowerPack’s Cart widget. Look for the Woo – Cart widget and drag and drop it on the page. 

If you see a message like this, go back to your store page and add a few products in your cart.

Empty cart WooCommerce elementor

Once you have added a few products, you will be able to see your cart and its contents. If you still don’t see the cart in the editor, refresh the page, and it will work.

Now we will start customizing our cart.

Customizing WooCommerce Cart Page with Elementor

Step 5: From the Content tab, you get options to enable or disable the coupon field and cross-sells. If you do not want it, you can disable it using the toggle buttons.

WooCommerce Elementor Guide

Step 6: Now, coming to the style tab, you get options to customize the look and design of all the sections and products separately.

WooCommerce Elementor Guide

Go ahead and give the settings a try and set them to the values you like. Feel free to customize the look and feel of your cart page.

After making all those changes, here is what our cart page looks like:

WooCommerce Elementor Guide cart page

If you need help with the same, you can check this video, which explores every Cart widget option.

Step 7: Now, once you are done editing, go ahead, and publish the page. We will be assigning this page in the WooCommerce settings later.

Now let’s customize the page that the user will see after the cart page: The checkout page.

Creating a WooCommerce Checkout Page with Elementor

Step 1: For this, again, we will be editing the existing Checkout page. Open the page and click on the Edit with the Elementor button.

Checkout Page in WordPress editing

Step 2: Now, change the page’s layout to full width and remove the title if you want. Also, remove the existing checkout section from the page.

Now add the PowerPack’s Checkout widget on the page. Just drag and drop it on the page.

WooCommerce editing with Elementor

Once you have added the widget, you can start customizing your checkout page.

Step 3: For the content, you can go with one column layout or two columns layout. You can also enable or disable the additional information box.

Step 4: For the styling, you can customize and alter almost every part of the checkout page.

If you are not sure how to customize the widget, you can check out this video.

Go ahead and make the changes you want and once you are done, publish the page like any other page.

We’ve got so much covered now! The only thing left to create is the My Account page. Let’s do it!

Customizing the WooCommerce My Account Page with Elementor

For this part, too, we will be using the PowerPack addon for Elementor.

PowerPack comes loaded with the powerful My Account widget, and with this widget, you can customize how the Account area of the user looks.

Just like we did before, we will be making changes to the existing My Account page.

Step 1: Open the page and load it using the Elementor editor. Make the same changes we made earlier, i.e., Giving it a proper name, changing the layout to full width or canvas, and removing the existing My Account section.

WooCommerce Elementor MY Account

Step 2: Once you are in the editor, we will add the My Account widget. Simply drag and drop the widget on the page.

My Account WooCommerce Elementor

Now let’s start customizing the widget.

Customizing WooCommerce My Account Page using Elementor

Step 3: From the Content tab, you can select the endpoint you want to customize. If you are customizing the Downloads tab, you can set the endpoint for the same, and you will see the change you are making there.

Step 4: Further, you can enable or disable the tabs as well. For example, if you want to show the logout link tab, you can disable it using the toggle button.

Step 5: Coming to Styling, you can change all the tabs’ look and feel individually. You can customize the tabs, tables, buttons, forms, and even notices using the styling options. Go ahead and make the changes you want here.

If you want to check out a video to help you with setting up the My Account page, here is a video I made precisely for this:

Step 6: Once you are done making the changes, go ahead, and publish the page.

Here is what our My Account page looks like:

WooCommerce Elementor My Account Guide

We finally have a functioning store!

Woohoo! You have successfully set up a custom functioning WooCommerce store with Elementor Free and PowerPack!

Great job!🎉

You can go ahead and give your store a trial run. If you want to customize the store any further, you can always go back and make the changes you want.

Start Selling with Your WooCommerce Elementor Store!

I am sure, with the help of this tutorial, you would have been able to set up your WooCommerce store without the need for the Elementor Pro.

You can do a lot more with the PowerPack addon for Elementor. There are more than 70 creative widgets that you can use to customize your Elementor pages. If you wish to learn more about the PowerPack add-on for Elementor, check here.

What are your thoughts on this WooCommerce Elementor Tutorial? Do share if you found this guide useful!

Liked this Article? Join 5000+ Subscribers

Get latest Elementor updates, tutorials, and freebies in your inbox. No Spam Guaranteed.
Yashwardhan Rana

Yashwardhan Rana

I am Yash, Content Marketing Head at IdeaBox Creations, we are the makers of PowerPack :) I love good food, gaming and memes. When I am not in front of my laptop, I am either cooking, traveling or attending WordPress meetups.

Leave a Comment

Get 70+ Elementor Widgets with PowerPack Elementor addon

Hours
Minutes
Seconds

Biggest Sale of the Year!
Get up to 50% OFF