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 easiest way ever. 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.

Start building your online store today!