How to Customize WooCommerce Product & Product Archive Pages Via Elementor

How to create a WooCommerce Website in 2024 with Elementor Pro

In this tutorial learn how you can build the WooCommerce single and archive product page templates using Elementor's WooCommerce Builder.

You'll learn how to:

✓ Use WooCommerce with Elementor
✓ Create a custom design for your products and archive
✓ Save a single and archive template with conditions by category

Subscribe to our Youtube channel and be the first to get our AWESOME videos!

[rahilahmed]

you should mention that you are using pro version of elementor otherwise it makes confusion to find ecommerce feature in default elementor

[nemoclown]

For Archive Products the query field which allows you to organize the product type/category is not longer available, what is the work around for this? I really want to organize by category type.

[srceko]

Very nice! It would be awesome if, in the future, there would be some capablilites to edit Cart, Checkout and My Account pages.

[markusseyfferth]

I was also wondering, like some others: what’s the theme that has been used? Hello Elementor? Storefront? Ocean WP? Thanks Cassie.

[priyav]

saw many tutorial but this one was really easy to understand and loved it really ! This is one for the beginner with no know how like me .Thanks a ton!

[johnreilly]

Fantastic step by step video on creating a WooCommerce store. Well done Cassie and the Elementor Team.

[heyimamaker]

Any plans to support product attributes, facets, and filtering?

[johanstam]

Will there be (in the future) options to create the CART page and checkput page so the design matches with single and archive pages?

[Phoenix_Arise_J]

Elementor is fascinating!!! The more I learn about it's capabilities I restart falling in love ❤

[ecjgroup-elliot]

Great video. I have just started using Elementor and it seems there were some things that have changed. Also, what theme are you using for this demonstration? I am going to try and build it again because I had some issues trying to add additional elements (price, description, cart button, etc.) to be placed into the container where the product title was. The elements kept wanting to go to the left or right side of the column, i.e. add another column?

[SaadKhaan]

To change the Products Archive’s layout, go to Appearance > Customize. This shows in Content tab, and there is no Query Tab as well and because of it I cannot select the category as you did.

[Telposhow]

I cannot find the products tab on the elementor widget despite I'm using pro version

[ramikoren]

AMAZING!!!
i have been waiting for this for a long long time
Thank you very much elementor, you saved me a lot of time and a lot of money!

[rahilahmed]

so it will create two pages for each product, or we can customize same product page?
because the original product page is still look same and you created new page and imported product data and then customize that new product page, but by this way we will have double pages and it will make site heavy

[angryyuan]

With these simple but useful tools, An era of personal business is on the way. You guys are amazing.

[CoachTammyLee]

I just installed Elementor Pro on my website last night. I was previously using Avada with Fusion Builder. I switched over to Astra too as it is fast and works well with LearnDash, as ultimately, I'm building a new website for fitness and wellness online courses. I LOVE this Elementor feature for WooCommerce. The store on my old website looks terrible. I'm excited to get building with this feature and produce something that looks clean, organized and beautiful.

[jackymoore]

Thank Thank Thank you! You helped me fix my shop best training ever!

[lenawebb-bey]

I followed all your steps while your video was running. I kept running into issues with things such as short description, and related products are all grayed out. Any suggestions? Also, will I need to make a page for each product category?


Thank you for such an AWESOME video!! I finally have what I need.

[rejbeau]

Video needs to be updated, I do not see what is being shown

[MDC]

For the archive, does it let you create the shop archive, i.e. a list of the product categories? And if so, does it let you show the product categories in a vertical list with the category description on the right?