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

[@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 :)

[@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 !

[@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.

[@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....

[@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!

[@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!

[@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!!

[@0GRANATE0]

at 2:50 I don't have the option: "Loop" - even with the pro version not.

[@0GRANATE0]

Ok you need to install "Elementor Custom Skin" - but now HOW do I customize the "add to cart" button?

[@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?

[@sheralync5854]

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

[@morgankennedy6708]

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

[@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.

[@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!

[@peterm3799]

Is it possible to filter products with the custom the custom skin like category, price etc...?

[@plutorising3167]

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

[@abdulkadirhussain7471]

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

[@demiancalin]

Paul, what products FILTER plugin do you recommend us, one that works in harmony :) with Elementor Custom Skin and Elementor Posts Widget (for instance JetSmart Filters fro CrocoBloks doesn't like neither Elementor Posts widget, nor Ele Custom skin)

[@debelserarne]

Wondering about this to.

[@appletech8795]

hey bro , did you findd good filter ?

[@GinaAnagnostopoulou]

Great video Paul. How do we insert the dropdown that sorts products by price... etc?

[@WPTuts]

I believe you can use the default WooCommerce filters: docs.woocommerce.com/document/woocommerce-product-search/shortcodes/woocommerce_product_filter/

[@Arrmani]

@@WPTuts Thanks for the video. Your product category page does not have a left side column found on most e-commerce sites. In this side column there are sorting filters. I'm curious to know if you manage to build with Elemenetor a product category page with a side column in which we find the sorting filters and that these sorting filters are mobile friendly

[@audreychou5498]

@@Arrmani ​ @WPTuts I'm having the same question! I made my product archive page template using this method, and have just purchased Jetsmart filter plugin but I don't know how to insert the filter into the left hand side of the product archive page! Been googling but can't find anything! Need help desperately

[@Arrmani]

@@audreychou5498 @WPTuts I tried many solutions but they didn't work

[@audreychou5498]

@@Arrmani oh no! What did you do at the end?

[@dhireshpahuja]

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

[@ajaymanjeethutube]

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

[@EhsanBahrami-hw3qo]

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

[@martagraugil]

soo useful!! Thank you so so much!!

[@SalikMinsk]

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

[@joelindsay5743]

Anyone that is struggling to add a "Sale" badge or something along those lines. I've found a bit of a workaround. You can set an ACF image field to absolute in the loop (set to around 300x300px) and then design a badge in photoshop as a png or SVG to overlay on top of the product image in the archive page. Then just add the same ACF image to all products and include it when you want to put an item on "SALE" or any badge you want to include. Not ideal for a tonne of products but good for a small shop. You could have them all just designed up and included in the media library and then just use them as and when you need to.

[@gavinincrocci7045]

Is there a way that you can add the “default product sorting” bar to the top of your custom product page like the one that comes with the archive products widget?? Please help I’ve been stuck on this for about a week. I can’t seem to find an alternative widget that will do this function for me.

[@omranalkhleefalhamad6756]

Have you found anynsolution to this? Having the same issue

[@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!

[@ChapelOfNewSongsMararaba]

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

[@modhausstudio]

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

[@chairmansocial]

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

[@bhumiagaramakdes853]

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

[@danielguia7773]

Hello, the tutorial is impeccable, but I have one problem with the add to cart button, when I press the button it add the product to the cart but it also takes me to the product page, I would prefer if the button just added the product and left the user on the shop page, that way it can keep shopping, do you know any solution to that problem?

[@tomaszroot]

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

[@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!

[@elmerjohn3406]

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

[@acno4780]

Thank you for the video, very educational.

[@imransumra]

I can't see the loop option in the theme builder at all, I've elementor pro

[@WPTuts]

Have you installed Ele Custom Skin?

[@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 😀

[@marksurkin1356]

Thanks for this and all of your excellent video tutorials. I'm wondering how you solve the issue that it seems like there is a different button element for product loop add to cart vs product page add to cart. Using your method I end up with all of my product variations shown in the custom product loop when I use the elementor add to cart widget for the button. As far as I can tell, there's no elementor widget for the product loop version of the add to cart button. Any ideas? I've tried this in 3 different themes (Hestia Pro, OceanWP, Storefront), and had the same issue.

[@jensklinggaard3836]

Have you solved the problem? I have the same issues...

[@marksurkin1356]

@@jensklinggaard3836 I did find one plugin that provides a "product loop add to cart button" widget-- from Kadence (www.kadencewp.com/product/kadence-woocommerce-elementor/). However I ended up not using it, and instead just created a custom button on my product loop template which links to the product page.

[@jensklinggaard3836]

Hi! Thanks for your answer. I gave up ealier today, and also just created a linked buttom to solve the mystery problem. Have a good one.

[@pankajrakholiya5382]

Thanks so much for this tutorial. It really helped a great deal. However, there's a challenge.

[@alexwaymann640]

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

[@paulspinelli8574]

How about integrating Woo 3.9's product filters (price, attributes)? Can't get it to work with Elementor and Skin. This is a deal breaker for me.

[@andresdica]

Same thing happens to me. I can not add any element.

[@FNYNorth]

@@andresdica becuase these are seen as posts and not products it wont allow sorting :( frustrating

[@Owenoooo]

@@FNYNorth There must be a way

[@abdullahalmohaymenrafi5553]

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

[@WPTuts]

Thank you :0)

[@RezaulKarim-xm1yv]

How can I make this loop display product in carousel?

[@silviapedrini9451]

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

[@IndyVirmond]

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

[@arashazadkhan7036]

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

[@Andrewktav]

Incredible instruction, thank you very much for your work!

[@AdrianoWagnerS]

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!

[@Owenoooo]

What about sort options?

[@davecondon]

Quick question: Is there any way to include "Sale" label on the featured image? Great video! It really helped me to include custom fields on my product loop.

[@ImMeInDim]

Have you found any solution for sale label ? Thanks

[@mahnoorfatima9598]

@@ImMeInDim be logical this guy is scamming. Ele custom skin is not for WooCommerce. It's for posts he's just getting views for it by spreading wrong info.

[@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...

[@AnaPereira-cw7tx]

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

[@מניוינפלד-ז2ג]

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. 😁

[@geagraphicweb4305]

First of all, thanks a lot for the tutorial, it's great. My problem is that 'WOOF wocommerce product filters' does not work this way, what alternatives do I have to run filters?

[@martinholmboe1179]

Did you find a solution? Having the same issue...

[@Coffeelovestea]

Thank you very much for the nice tutorial. Everything works fine. Unfortunately the boxes in the product overview are different in size, because the text excerpt is of different length. I do not understand why. Can I set a minimum height for the product loop box somewhere?

[@cyrillesanson5047]

Hi, Excellent jog Paul! Same issue as Tamara. Is there a way to force the minimum height?

[@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?

[@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?

[@RafaelRodriguezCorcho]

Cool tutorial, thanks!

[@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!

[@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.

[@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!

[@denizkeklik2410]

Great videos, thank you! Can I use ELI and customize without an image? I only need description/price and add to button!

[@WPTuts]

Yes, you can use only the fields you need with Ele Custom Skin. 😁

[@edinhofilho98]

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

[@filippomarsili5470]

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

[@iriszijlstra9713]

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

[@WPTuts]

Great to hear :)

[@maudverboom4582]

Thanks so much! It helped a lot.

[@rujderkriszta]

So helpful! Is it possible to customize the upsell and related products widgets too?

[@wpweblearny1059]

were you able to fix it?

[@qasim2646]

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

[@m-zurowski]

WORKING CATEOGIRES: Edit Posts -> Content -> Query -> Set Source to "Current Query" (this will allow the archive to show only products in selected category) WORKING FILTERS: Install and activate plugin called "Ele Term List" made by "Dudaster.com" (this will allow filters on your site to actually filter content inside your loop) I hope this will help you guys (tested with Advanced AJAX Product Filters for WooCommerce).

[@capturedbybasman1536]

How? I installed it, nothing happened. what should I do?

[@m-zurowski]

@@capturedbybasman1536 read my comment again :) Just follow the steps - it will make the plugin use data relevant to active product category.

[@m-zurowski]

@@capturedbybasman1536 select the block with your custom loop (in product archive for example) and then in the settings of this block follow my instructions

[@capturedbybasman1536]

@@m-zurowski when I set the posts to "current query" it does not show anything and no field to select category.. more explanation please? would be so thankful

[@m-zurowski]

@@capturedbybasman1536 when you select current querry it should be working perfectly - are you checking the live version on website, or are you just looking at it inside elemntor builder?

[@mohitsandhu2842]

thanks for making this tutorials

[@mariapena5329]

Thank you, this video has been very useful. The only question is how can I show the default product archive in each category?

[@harisazmat5802]

if you select the current query option it will resolve the issue.

[@vadimbk]

Hi, it lesson is very useful. I have a one but a heavy question: how to add a sale badge to a loop image? Because it is absolutely necessary for customer response Thanks a lot for a fast reply.

[@MrMatylucky]

Hi, first of all excuse me for my bad english, I think you could create a custom field for the products that have a badge, and then create a design of badge on the product loop, put a text inside the badge and then link the text to the custom field of the product, that way it will show automatically de information on the product badge, and the variation of the information of every product as well, I hope you understand my explanation, cheers

[@joelindsay5743]

Anyone that is struggling to add a "Sale" badge or something along those lines. I've found a bit of a workaround. You can set an ACF image field to absolute in the loop (set to around 300x300px) and then design a badge in photoshop as a png or SVG to overlay on top of the product image in the archive page. Then just add the same ACF image to all products and include it when you want to put an item on "SALE" or any badge you want to include. Not ideal for a tonne of products but good for a small shop. You could have them all just designed up and included in the media library and then just use them as and when you need to.

[@ImMeInDim]

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

[@genteka5106]

This is Clever!

[@amy40c]

How to filter query by product category?

[@dmitryklimov9706]

Paul, you're the best, thank you!

[@jamesbarnett1140]

Great video - This has helped me get over an issue I spent hours on so thanks for that! One additional issue I've come across is the filter no longer works. Is this something anyone has been able to solve?

[@rexleop1]

You are the best!

[@alixiahodge4395]

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

[@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

[@scomexxxx]

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

[@viniciussabara2951]

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

[@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

[@ishield6452]

Thanks for all the great videos.

[@paulmanco]

Crack! Saludos desde Perú!

[@TutorIsland]

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

[@jhonbetancourt1197]

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

[@SAJTVcom]

Hello, WPTuts hope you are doing well love your videos big fan! Just a quick question how do I apply the same method on categories, On the shop I applied your method and it worked out beautifully but on the home page I want it as categories and it is not working can you guide me plus 1 more thing using ACF plugin. Thanks

[@imranmanan7346]

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

[@Orsohobo]

Finally what i was looking for! Thanks

[@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.

[@MLotfy-gg3ih]

Thank you so much for this. I did it and it's great. But i can't filter this page. I'm using pofily filter. The filter shows the item numbers in a right way. But the products don't filter. Can you provide me a solution?

[@TheJetchkout]

thanks you, this very helpful to 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

[@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?

[@maliktanveerdhool]

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

[@m.terryterhechte7167]

Hello. Thank you for the great video. Is there a way to integrate a filter? Thank you very much. Regards Terry

[@Andrewktav]

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?

Perfect video! only one question..if you use post widget in archive products template..the problem is if you go to product category page always yo will see all products, i wont see unique category products, how can i solve that? :-(

[@ImMeInDim]

Quick View Only Mode: Can be done on the product archive page, if the user clicks on the image or title, it will not go to the Single product page, but a product popup will appear with the product data and upsell? thank for posting.