How to Design an eCommerce Website With Elementor, WooCommerce & Storefront

In this video, you will learn how to design a complete eCommerce hompage and contact page, using Elementor, WooCommerce and StoreFront.

Storefront is the free and official theme for WooCommerce, the most popular eCommerce store solution for WordPress. By utilizing the visual design capabilities of Elementor, you can customize your Storefront website in a visual, quick and easy way.

** Tools Used **

[Yorubapod]

You guys are taking this game to the next level. First Avada and now Storefront. Awesome! And your videos are getting enjoyable. The background music is at good level and suits the tutorial. I have to mention that because your background music used to annoy me and turn me off your tutorials. Well done and keep this up!

[peterassanfulkwame]

This is super...long overdue! Thanks guys...

[danbeautyeshop]

the guy who doing the demo like singing a song while demo the process extremely smooth

[Odn]

Looking good mate, like The background music too. Pro tip for people finding the instructions too fast, use the pause button, on PC you can even use left arrow to skip 10 second back. If this video would be any slower, then I would fall asleep. Good job.

[DennisKwasnycia]

At 0:46 you go to page settings. I don't have that. I just installed the storefront theme and as expected, much of the work I'd done to my pages is undone, but I can't edit most of it. On my homepage in elementor, I can't click and edit my header and logo. There is also a "Private: Home" smack in the middle of my page with an "edit this section" button that does nothing when I click it.

[gamilamostafa]

Thanks for the tutorial. I have just iinstalled Elementor, but I don't have the Page Settings that you show on the 0:46. What do I need to do to have it?

[jasonugalde]

I've been looking for this video for quite a while; well-timed, cut-to-the-chase, informative, instructional. Well done. Thank you!

[tLearningTree]

I have a problem, when I put the woocommerce product tables on the elementor widget there is a huge space between one product and another, is there a solution? thanks

[syedahmedraza]

which plugin you are usin to add woo products

[smartsirvi]

One of best tutorial ever I seen thank u

[numistupik]

i dont see any edit with elementor button... how come? so depressed to study this

[cadencepoetica]

This is a great video, very interesting and not boring and slow like some tutorials. Gave me some great ideas for my website!

[foxtrotdesigns]

This video has the potential to be really helpful ... but it's too fast for beginners and skips some important explanations. Would be great if it could be redone at a a slower pace with clearer directions. Many actions are done without explaining how things are being done. Thanks for what you've done so far though.

[Mauex]

How do i get my products to appear boxed like that? like each in their own space? when i add my products, they appear in a vertical line. thank you!

[外國姊遊玩去]

I have an issue after drug the woo-product widget which did not show the same outlooks like yours, my product image is next to the title instead upon of the product name, do you have any clue how to fix it?

[ahmedraza]

Are these options also available for free-elementor version?

[mirandaelanor]

What is the ccs code to hide breadcrumbs?

[gigiyun]

This video is wonderful for me to design my first online store. However, on 3:05 when I drag the Woo/Product order the Featured Products, the featured products layout was wrong, the product picture is on the right and product description on the left. Please help me!!. Did I do something wrong?

[duvaneg]

you could write which css code is used so that the image is without space in the image and the header

[monicahernandez]

When inserting the products and having them laid out as columns, is that a feature in the pro version or can it be done in both?