Create a custom WooCommerce Product Archive Elementor Pro & Elementor Custom Skin

Create a custom WooCommerce Product Archive with Elementor Pro & Elementor Custom Skin.
If you're looking for a quick and easy way to create more unique WooCommerce Product Archive pages with Elementor Pro, then this tutorial will help cast some light on how easy it is to achieve with the free Elementor Custom Skin plugin and a little creativity.
► RELATED TUTORIALS ◄
Checkout Page Customisation: • Woocommerce Checkout P...
Product Page Customisation: • How To Customize Wooco...
Take your WordPress website and skills to the next level!
► THE TOOLS I LOVE ◄
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.
► WORDPRESS VISUAL PAGE BUILDERS ◄
★ ELEMENTOR PRO: jo.my/1s0t2s2
★ Brizy Pro: bit.ly/2Ji97r8
★ WPBakery Page Builder (Formerly VISUAL COMPOSER): bit.ly/2NVbVNP
★ DIVI 3 Page Builder: bit.ly/2HiiDcE
► WORDPRESS THEMES ◄
★ GeneratePress Premium: bit.ly/2Ydn1SE
★ OCEANWP: bit.ly/2fRHBr0
★ DIVI Theme: bit.ly/2G8JMiA
★ Astra Pro: bit.ly/2zruoKn
► WORDPRESS TOOLS ◄
★ SMART SLIDER 3: bit.ly/2G0G1vB
★ CSSHERO: bit.ly/2qbrRl6
★ SLIDER REVOLUTION 6 - jo.my/sr6
► SUBSCRIBE ◄
bit.ly/2rX7rhu
► LETS CONNECT: ◄
/ wptutz
SUPPORT: Our website offers additional information and perks. Please check it out! wptuts.co.uk

[@nickdixon3536]

This is exactly what i was looking for 😭. watched hours of youtube videos and no one teaches you how to do this. You Sir, are a God send. Thank You!!!

[@sotamods-TMH]

Same for me! After spending HOURS and DAYS in experimenting in the backend, I fortunately ended up in searching for an archive customization solution and now I can proceed building my shop much better and easier :)

[@KennethHall]

Outstanding, being a newbie, I have spent about 8 weeks trying to put it all together, your explanations allow me to get past bottlenecks. Thanks for your teaching.

[@TheFarfellia]

After hours and hours of online research I finally find the solution to customize the product list page, thanks to the loop :) thank you so much ! very very helpfull !

[@sheralync5854]

You are a fabulous instructor. The right amount of detail, excellent pace and examples. This really helped.

[@chairmansocial]

Absolutely solid video. Very helpful regarding pointing out the dynamic functionality that nobody else teaches.

[@akellaglobal4608]

Your videos on Woocommerce have helped me quite a bit. Thank you very much for this video and others on Woolentor and Woolementor. These plugins are quite helpful, and most importantly, your short videos on how to use them a blessing and time saver. So, thank you!

[@24SevenMarketing]

Another GREAT video...there are so many plugins claiming to let you customize different WooCommerce pages within Elementor...but NONE of them can come close to what you show in this video. Again you show the real power behind Elementor Pro and its ability to create custom themes. I can't wait to see your video on Elementor Custom Skins Pro version. It, like Elementor, already does so much with the free version ... I wounder what the Pro version adds.

[@stevechong65]

Hey Paul, once again a great tutorial! You have solved a problem that has been bugging me for days! You are one of the best tutors out there! Keep up the good work!

[@SalikMinsk]

Wow! So quickly, accurately, succinctly and clearly! Thank you so much!

[@AdrianoWagner13]

Thanks a Lot! Never got it so well explained! You made it easy and simple and saved me! Thanks a lot and keep up the great work!

[@ChapelOfNewSongsMararaba]

Thank you for the tutorial. Burnt over 6 hours already trying to figure this out.

[@elmerjohn3406]

This is awesome. This is exactly what i have been looking for for hours now. THANK YOU!

[@nichart]

Thanks for this great tutorial. It's a really great tool, that will use again in the future. Thank you!

[@TutorIsland]

Really enjoyed the video, exactly the info I was looking for. Thanks !

[@dmitryklimov9706]

Paul, you're the best, thank you!

[@user-pr2wl4hm2b]

Thank you so much. You have no idea how much time I trying to understand that. You saved me

[@WPTuts]

My pleasure. So glad to hear this helped. 😁

[@sotamods-TMH]

BRILLIANT!!! This video was VERY helpful to me! Like Nicky Mandeville I was spending a lot of time for research and finally ended up finding your tut. I killed two birds with one stone since I was desperately looking for a solution to edit the products' look in the archive and for the single products as well! Great job, thanks a LOT and please keep on going wit hsuch awesome tuts!

[@samantha2715]

This was extremely helpful, showing products as a 'post' instead of using the product archive helped me work around some issues on a client site where they had tons of stuff overwriting woocommerce archives, thanks!

[@filippomarsili5470]

I really like the way you explain things. Right on point. Great tutorials.

[@abdullahalmohaymenrafi5553]

Really useful. I always like the way how simply you explain everything.

[@WPTuts]

Thank you :0)

[@iriszijlstra9713]

awesome info! exactly what I was looking for for building my shop! THANK YOU

[@WPTuts]

Great to hear :)

[@Orsohobo]

Finally what i was looking for! Thanks

[@ivannikoffandrii]

Incredible instruction, thank you very much for your work!

[@lscottbutler2853]

Thanks for all you do Paul. You're not only a great teacher but an excellent orator. Of the scores of videos that I've watched I haven't heard you utter a singe Um or Ah. Great work....

[@edinhofilho98]

I'm from Brazil and your video really helped me, thanks!

[@CharlesHale85207]

Some good information in there, will look for the next video as well. - Thanks

[@dhireshpahuja]

Thank you so much. Helpful video. Just one question How can we add sorting menu on top of this? Thanks !

[@santobramas]

Yes ! AWESOME ! Thank you

[@AnaPereira-cw7tx]

Amazing! I searched for a long time, thanks to God I found your video!

[@plutorising3167]

What a great instructor! Just subscribed. Thanks so much.

[@KayyDainty]

Hi, thank you for your amazing tutorial. What if I wanted the product to show a secondary image on hover? How would I do that?

[@ishield6452]

Thanks for all the great videos.

[@viniciussabara2951]

thanks man, thanks a lot! you deserve the best!

[@leslieisaac9104]

Love these customisation videos Paul. They open up so many options for an Elementor novice like me. If you want to use Woo Product Categories on the archive page then I found that you need to set Query on the Posts to Current Query, so that the product category filtering operates. Setting Query to Product shows all products regardless of category selected.

[@HerQuiddity]

Thanks for pointing that out, this was driving me crazy!!

[@akaguv]

Life saver!! :D

[@dhireshpahuja]

Thanks , You sorted this for me . It was driving me crazy !! Still one thing is going wrong, Sorting the products price wise not working perfectly. Could you help with this? Thank you !

[@micheleM84]

Thanks Leslie!

[@helloitslouisaa]

OMG Thank you so much! This was also driving me crazy :D This was really helpful!

[@martagraugil]

soo useful!! Thank you so so much!!

[@morgankennedy6708]

OMG I had to Google so much to find this but it was EXACTLY what I was looking for.

[@abdulkadirhussain7471]

I am developing a site for my small business and found this tutorial to be really helpful. Thanks for the good work

[@mmb811]

Fantastic video tutorial, clear and to the point! Well Done, keep up the great videos, Liked & Subscribed ;)

[@drteddyweb]

Another amazing tutorial as usual....

[@maudverboom4582]

Thanks so much! It helped a lot.

[@IndyVirmond]

Hi, thanks so much for the tips, really helped! One question though, that doesn't work with product filters right?

[@ginalilydattilio928]

Thanks so much!! This video really helped me. I'm trying to use the loop again on my product page. I have an accordion file and I want to include other products in the same category in one of the drop-down areas. I used a shortcode [product_category category="Lumina"] to pull the products into the area I want but I can't style them. Do you have any advice on how I might be able to style my products to match the product archive styling I created with custom skins as you demo'd in your video?

[@mamadoukone6839]

Thnaks For this it's very helpful for me !

[@nataliamarsab]

Thank you! It was very useful. I have a question. Can I put a filter in the archive product? I tried to put one but it doesn't work

[@tomaszroot]

Good material. Thank you very much for your help. It was a great experience

[@shunoni2359]

Thank you for this. I've been trying several expensive plugins, none of which could achieve this. Quick question - is it possible to use this method to display "top selling" products? I wasn't sure if that type of query would be supported.

[@acno4780]

Thank you for the video, very educational.

[@bangshady2054]

so so so appreciated!!! Clap clap! Thanks alot

[@stepupmybody7784]

This was super helpful! Thanks

[@lodeluyckx]

Extremely helpful, thanks

[@joysing7564]

Really helpful ,thanks very much

[@jasonbeard]

I bought the Custom Skin Pro when first released on LTD & still havent used it yet. Be good to see a vid on that.... Onya Paul...

[@alixiahodge4395]

Thanks i have the same question that Ken has is there a way to work with sub catergoies ?

[@allecsable]

Thanks so much! It helped a lot. However, I am now struggling with my filters because since I used the Posts Widget, it is not connected to my filters anymore, which work with the product attribute. Can you help?

[@Nimber22]

Im having the same issue, did you find a solutions ?

[@kennethmoesgaard2696]

I'm also struggling with this issue. Pls let me know if any of you figure this out. I have tried for hours...

[@dots560]

Try Filter everything plugin. Got the info on this channel and it worked for me.

[@bhumiagaramakdes853]

Great Info Boss.... You help and solved my problem. Thx a lot !!😄

[@pellekarlsson152]

Great video Paul ! I think woocommerce customization is a big issue for all famous pagebuilders companies to solve. For the moment there are too many solutions from Third-part some of them too expensive and less good...I hope all pagebuilders Team work hard on the"woo customization issue"

[@RafaelRodriguezCorcho]

Cool tutorial, thanks!

[@gurugugu1816]

Excellent video. Many thanks! I´m not been able to use the categories side bar, it is not searching for the products listed in the category, do you have any idea why? thanks again

[@Aziz-Ahmed-UK]

Great Tutorial. Thanks

[@maliktanveerdhool]

hello paul sir, I am facing an issue with image sizes in the archive product page. How to fix this with equal height?

[@levigelis]

Thank you so much for the excellent guide I encountered a problem: The Add to Cart widget automatically redirects to the product page after adding to cart I want to avoid it and find no way

[@clarylifeglobal9573]

Thanks so much for this tutorial. It really helped a great deal. However, there's a challenge. The "add-to-basket" which is now "add-to-cart" has issues with styling it on Elementor. It doesn't always follow the settings.

[@ajaymanjeethutube]

Really a great Tip and tuts.. Bring out and share more like this... Very usefull and Thanks a ton...

[@TheJetchkout]

thanks you, this very helpful to me

[@EhsanBahrami-hw3qo]

Very useful and excellent, a problem that I was dealing with for several days was solved, thank you very much

[@alexwaymann640]

This is genius way to. Thank you for amazing experience!

[@arashazadkhan7036]

Thanks alot for this helpful Video , You save my day !!!!!

[@andreacicali249]

Hi Paul, I'm new to WP and I'm trying to build my first my website from scratch. Thanks for the great tutorial. I have a question, how can I deal with Product categories? Now, navigating on the category archive it display the same page with all the products? Should I build a different template for each category or is there a more streight forward way? Thanks a lot!

[@mohitsandhu2842]

thanks for making this tutorials

[@qasim2646]

Thank you but if we want to add sorting option? and what about showing product count

[@martinholmboe1179]

This is excellent! Implemted it already. Next question: How to apply search filters to theese product loop pages ? The 'standard product filter' plug ins do not seem to work on product loop archives? Any hints?

[@silviapedrini9451]

Thanks so much for this tutorial! can i something to allow clients to sort product by price, popularity ecc???

[@connectpositivelaetitia8442]

Thank you for this great video ! Is there a way to make it work dynamicaly when we change category ? I didn't find how to do it ! thanks a lot

[@digitaleditorial]

Thanks a lot! I've been searching for how to edit this section, and only got the basic archive options. Thanks to this video, now I have full control over my archive's look and feel. I'd add more likes to the video if I could 😀

[@phucthaifg]

Thanks so much for this tutorial! This is applied for products, is there any way to apply for sub categories instead of products?

[@phaonce407]

Hi! Did you found any solution to apply custom loop to woo categories?

[@-nzyx-7458]

@@phaonce407 I duplicated the product archive for each category and set the condition for each product category. You can change a specific category if you go to > Query>include by>Term>your category then it should work

[@mizan1148]

@@-nzyx-7458 thank you so much this information helped me a lot. thanks!!

[@ImMeInDim]

Hi, thanks for video. Is it possible to add sale badge to the single product loop? Thanks.

[@wallerode46e]

Hi Paul, thanks for this very interesting video. I did some testing on a shop I'm working on and it works really well. There's just one thing that's bugging me: apparently, because you're using the posts-widget, the query doesn't exclude products that are OUT OF STOCK. They are just shown without a price in the list. That's no so good. Can you think of a way to avoid that? Apart from that, great solution!

[@SatyajitTechWorld]

I have design a custom shop page using this method. Also I want to add bit more function in shop page which you have not cover in your video. Actually I want to add two thing just top of products 1) Showing all results in left side and 2) Default product sorting option in right side. I think this facility is available only for default archive page. Do you have any idea about how to add this facility in custom shop page after pulling data from product loop of own.

[@benjaminharris943]

This video was super helpful, finally i can style my archive and product page the way i want it. However, i have one problem. whatever i search for in the searchbar, the actual results shown are always ALL products. How do i control that? With the conditions?

[@modhausstudio]

Thanks so much for this video! Do you happen to have a updated tutorial on this subject?

[@tinoo9030]

Thanks for great tutorial. But is it possible to add line for product ATTRIBUTES somehow ? In Loop/text editor/dynamic there are no option for it. Or could our Custom Product Archive template integrate somehow with WooCommerce Variation Swatches plug in who has that options ? Thanks !

[@twinfinagency3126]

Hello WPTuts!! Thanks for the tutorial!! Amazing!! Can i make a loop for post categories, tags, search.... cause when i apply a condition to them... they just show me one product. Thank You!!

[@waqasarshadar]

How we will use the dynamic category tag for the archive page. because for now, i have set this up and its showing product for all the categories.

[@wpweblearny1059]

Hello Paul, thank you very much for your tutorials, they are fantastic. I have a problem and I would like to know if you have the solution, I need to add the loop created with elementor custom skin in the related products to a simple product page and I can't find the way, I tried with jet engine query and I couldn't. Is there a way to use loop in related products? I would also like to know if it is possible to add "order by" to the product archive thank you very much

[@ivannikoffandrii]

I use the loop to upgrade the product archive and it looks great, but when I'm trying to add filters it doesn't work in a proper way. Looks like filtering doesn't work at all, because it searches in products not in post. Can you advice how to sort it?

[@davidsots558]

So cool ! Thank you very much! Can we make a custom skin and apply it to a posts or products slider ?

[@scomexxxx]

How do you filter the results with this custom product archive? Default filters don`t seem to be working.

[@relaxity999]

Thanks alot for the tutorial

[@niharikasingh280]

Hey the whole tut is actually awesome and helped me a lot in setting up the archive template for simple products in many ways . However, when i use this method with variable product which has price variations, the result is not that great .The whole prices in the archive template seems to be attached to each other.Hence all the products takes the same prices. Any help on that front. Thanks.

[@creativemarketing5582]

Thanks for video. How do I add the categories with the products into a page I want

[@joanasantos7735]

Thanks for the tutorial, but i came across a problem. Now that i used the custom skin to make my "catalog/Product Archive" the Woocommerce layered navigation doesn't filter my products. Is there any solution for it? Thanks!

[@jhonbetancourt1197]

Great tutorial. Is it possible to show the following photo of the product when I hover the cursor?

[@alaaabdelrahim4074]

You are awesome thank you, you saved me........

[@alissoncustodio3477]

You save my Life. Thanks bro, more one sub:)

[@MenneZaalberg]

Hi, wonderfull your video's about Elementor! I created a product archive loop, got the image on a equal height over the different products but I do not get the short product description and price on the same height. Do you have a trick for this or does this need CSS?

[@processengineercanada]

how to do we make the grids the same height?

[@Mohammad-vv5ef]

Hi, thank for your special WordPress tutorials, I've been looking for a such video to learn how to create a customized Product Archive and finally I found it but the thing is that Although I set the condition as All Product Archives but the my shop page still uses Woo-commerce default Product Archive. Please help me!

[@KennethHall]

A Question, what if you wanted to show products by categories, how would that be done? So new to all of this

[@lifetrail_hiking_mentoring]

Great videos Paul, I'm now having issues with the Loops I created months ago when I first watched this video. I'm having trouble accessing the Loops and it looks different in Theme Builder. Does Custom Skin no longer work with the new Elementor versions?

[@imranmanan7346]

wow this is exactly what I was looking for. thank you. I can't find the elementor custom skin pro tutorial though