Create a custom WooCommerce Product Archive Elementor Pro & Elementor Custom Skin
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- 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
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!!!
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 :)
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 !
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.
Thanks for pointing that out, this was driving me crazy!!
Life saver!! :D
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 !
Thanks Leslie!
OMG Thank you so much! This was also driving me crazy :D This was really helpful!
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!
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....
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?
Im having the same issue, did you find a solutions ?
I'm also struggling with this issue. Pls let me know if any of you figure this out. I have tried for hours...
Try Filter everything plugin. Got the info on this channel and it worked for me.
Very useful and excellent, a problem that I was dealing with for several days was solved, thank you very much
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!
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.
I am developing a site for my small business and found this tutorial to be really helpful. Thanks for the good work
Really a great Tip and tuts.. Bring out and share more like this... Very usefull and Thanks a ton...
Is it possible to filter products with the custom the custom skin like category, price etc...?
Thank you for the tutorial. Burnt over 6 hours already trying to figure this out.
You are a fabulous instructor. The right amount of detail, excellent pace and examples. This really helped.
OMG I had to Google so much to find this but it was EXACTLY what I was looking for.
soo useful!! Thank you so so much!!
Good material. Thank you very much for your help. It was a great experience
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?
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 😀
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!
Thanks so much for this tutorial! This is applied for products, is there any way to apply for sub categories instead of products?
Hi! Did you found any solution to apply custom loop to woo categories?
@@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
@@-nzyx-7458 thank you so much this information helped me a lot. thanks!!
Absolutely solid video. Very helpful regarding pointing out the dynamic functionality that nobody else teaches.
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)
Wondering about this to.
hey bro , did you findd good filter ?
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.
Great Info Boss....
You help and solved my problem.
Thx a lot !!😄
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.
This is genius way to. Thank you for amazing experience!
Thank you for the video, very educational.
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!
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.
Have you found anynsolution to this? Having the same issue
Thanks so much for this tutorial. It really helped a great deal. However, there's a challenge.
Thank you so much. Helpful video. Just one question
How can we add sorting menu on top of this?
Thanks !
Thanks alot for this helpful Video , You save my day !!!!!
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!
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!
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?
Genius!!
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"
Wow! So quickly, accurately, succinctly and clearly! Thank you so much!
This is awesome. This is exactly what i have been looking for for hours now. THANK YOU!
Thank you so much. You have no idea how much time I trying to understand that. You saved me
My pleasure. So glad to hear this helped. 😁
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!
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?
Thanks so much for this video! Do you happen to have a updated tutorial on this subject?
awesome info! exactly what I was looking for for building my shop! THANK YOU
Great to hear :)
Amazing! I searched for a long time, thanks to God I found your video!
Thanks so much for this tutorial! can i something to allow clients to sort product by price, popularity ecc???
Really useful. I always like the way how simply you explain everything.
Thank you :0)
Cool tutorial, thanks!
awesome video!
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.
Have you solved the problem? I have the same issues...
@@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.
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.
Thanks so much! It helped a lot.
What a great instructor! Just subscribed. Thanks so much.
OK, I've tried I tested, I liked it at first but then I noticed that both YITH heart and Sale badge are all gone from the product archive.
Tried adding them to the loop but didn't manage to find a solution and I reverted back to the old Product Archive...
Thanks to this video I found a way to further customize things with Elementor by using the Wrench tool and using the Dynamic option
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.
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?
Really enjoyed the video, exactly the info I was looking for.
Thanks !
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.
Same thing happens to me. I can not add any element.
@@andresdica becuase these are seen as posts and not products it wont allow sorting :( frustrating
@@FNYNorth There must be a way
Incredible instruction, thank you very much for your work!
thanks for making this tutorials
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?
Did you find a solution? Having the same issue...
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...
Great video Paul. How do we insert the dropdown that sorts products by price... etc?
I believe you can use the default WooCommerce filters: docs.woocommerce.com/document/woocommerce-product-search/shortcodes/woocommerce_product_filter/
@@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
@@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
@@audreychou5498 @WPTuts I tried many solutions but they didn't work
@@Arrmani oh no! What did you do at the end?
You are the best!
Hi, thanks so much for the tips, really helped!
One question though, that doesn't work with product filters right?
Thank you, this video has been very useful. The only question is how can I show the default product archive in each category?
if you select the current query option it will resolve the issue.
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.
super valuable video
This is Clever!
thanks man, thanks a lot! you deserve the best!
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.
Have you found any solution for sale label ? Thanks
@@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.
How to filter query by product category?
I'm from Brazil and your video really helped me, thanks!
So helpful!
Is it possible to customize the upsell and related products widgets too?
were you able to fix it?
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?
Hi,
Excellent jog Paul!
Same issue as Tamara. Is there a way to force the minimum height?
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?
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.
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
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.
I really like the way you explain things. Right on point. Great tutorials.
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?
Hello.
Thank you for the great video.
Is there a way to integrate a filter?
Thank you very much.
Regards
Terry
Thanks for this great tutorial. It's a really great tool, that will use again in the future. Thank you!
Paul, you're the best, thank you!
Great videos, thank you! Can I use ELI and customize without an image? I only need description/price and add to button!
Yes, you can use only the fields you need with Ele Custom Skin. 😁
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
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
Some good information in there, will look for the next video as well. - Thanks
wow this is exactly what I was looking for. thank you. I can't find the elementor custom skin pro tutorial though
Outstanding. Add another appreciative comment to the pile!
thanks you, this very helpful to me
at 2:50 I don't have the option: "Loop" - even with the pro version not.
Ok you need to install "Elementor Custom Skin" - but now HOW do I customize the "add to cart" button?
Hi, thanks for video. Is it possible to add sale badge to the single product loop? Thanks.
Crack! Saludos desde Perú!
Fantastic video tutorial, clear and to the point! Well Done, keep up the great videos, Liked & Subscribed ;)
Thanks for all the great videos.
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.
Thank you but if we want to add sorting option? and what about showing product count
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?
Best Ever!
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?
How do you filter the results with this custom product archive? Default filters don`t seem to be working.
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.