Create an Ecommerce Website With Elementor & Storefront

There's a new way to design an e-commerce website using Storefront, WooCommerce and Elementor. This way you can create your own online store visually and with zero coding.

The Storefront theme is the official theme for WooCommerce, made by Automatic. It is a free theme and is one of the most popular themes on the WordPress repository.

In the video, we show how to create a homepage that includes WooCommerce products, create a contact page, and adjust the two designs to be 100% mobile responsive.

As seen in the video, there is a huge advantage in visually editing the Storefront pages using Elementor. Both theme and page builder work perfectly together, and allow you to setup a complete eCommerce website in record speeds.

6 Handy WooCommerce-Related Features

There are specific challenges that arise when customizing WooCommerce websites. Elementor works to provide an easy to use solution for these challenges, no coding required.

1. Setting Up Your Basic Store

By using a wide array of WooCommerce widgets, you can setup your basic store, including a homepage products display, contact page, about us and more.

2. Showcase Featured Products 

Drag the Woo-Products widgets and visually customize which products are displayed. Sort and filter according to author, categories, featured products, on-sale products, price, popularity and more.

3. Create a Product Landing Page

You can easily create a unique product landing page, that offers the best design and produces the best conversion rates. You can even start off with one of our templates, making the task that much easier.

4. Easily Customize Add to Cart Button

The add to cart button is an extremely important element of any sales page, as it has the sole task of getting the sale. With Elementor’s Add to Cart widget, you can customize the button with advanced typography, color, background, border, shadow and spacing options.

5. Design Your eCommerce Homepage

By showcasing your products and product categories on your homepage, you instantly increase the chances your customers will buy on your site. Follow the video tutorial to see just how we created a converting homepage using Elementor, WooCommerce and the StoreFront theme.

6. Add WooCommerce Elements

Drag and drop any WooCommerce element you might need, including the cart page, single product page, checkout page, order tracking form and my account.


You might have overlooked this, but Elementor Pro ‘arms’ you with some powerful WooCommerce customization features that will help you create your online shop in the easier way ever.Using . The interface is friendly enough to make any designer’s workflow faster.

Using the friendly and intuitive UI, you can avoid all the hassle and coding that is usually involved with setting up an eCommerce website.

Download Elementor Pro and start building your online store today.

About the Author

Ben Pines
Ben Pines
Elementor evangelist & head of content. Follow me on Twitter

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 1,353,229 subscribers who stay ahead of the pack.

By entering your email, you agree to our Terms of Service and Privacy Policy.


27 Responses

  1. Kindly cover or make a video on customizing Product page, checkout, shop page and Account pages. That would help the Elementor users.

    Also kindly develop a add on like what Themify builder has called “parallax” we can delay the parallax effect for each element

    Also now reverse column option for mobile edit is missing, kindly fix it.

  2. Hi like elementor pro, but at the same time i have to hate it!
    Only after the purchase, i foud that it does not support pagination when you have a lot of products.
    I had to have onther theme that works with elementor to manage the default woocommerce that has pagination. The solution provided by elementor was ridiculous….

  3. hii carlos there are many more sites like shopify, wix, buildabazaar, bigcommerce which are providing perfect pagination, payment gateway, SSL Integration etc as per my personal experience you can contact buildabazaar & shopify as they provide best service at lowest cost.

  4. In the video you make home page and contact page – without showing how to set them to be used by woocommerce…
    The main issue is that if you try to edit the “Shop” default homepage of woocommerce – Elementor gives an error and not letting you do it…

  5. ELEMENTOR PRO does NOT have the ability to populate your single product page (the page that shows the actual item once it is clicked). This has to be done in the customizer and there is little functionality doing it this way. When are we gonna be able to do this- Elementor Pro Team?

    1. The WooCommerce Builder is a design tool which was meant to customize the layout of your product page. However, you will still have to insert the content through Woocommerce.

  6. hello I am currently starting my online shop with storefront theme and elementor so far I can edit everything except the home page of the theme why is this happening? Or could you suggest us some woocomerce compatible themes that will definably let us edit the homepage with elemntor?

  7. i am testing elementor on a page with a storefront theme. I’ve created a page with an elementor header and page design, and footer is gone… Anyone having this issue?

  8. Hello, there is som app to consider delivery distances price,with map selection prices, for example some food delivery site? Thanks on advance.

Leave a Reply

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

Want to learn how to build better websites?

Join 1,353,229 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.