Elementor Loop Builder Tutorial: Custom Product Carousel & Archive, Product On Sale Ribbons & More
ฝัง
- เผยแพร่เมื่อ 28 เม.ย. 2023
- Elementor Loop Builder Tutorial: Custom Product Carousel & Archive, Product On Sale Ribbons & More
In this tutorial, I will show you how to use the elementor loop builder to design a global product archive page and shop page. I will also show you how to use loop builder to build a custom product carousel and add the on-sale ribbons to all products that are on sale easily.
Other videos:
Elementor LOOP Tutorial: How to DISPLAY a Different PRODUCT Image on HOVER | No Code Required - • Elementor LOOP Tutoria...
Elementor LOOP Tutorial: Post Title Length, Equal Height Trick | CSS TIPS & TRICKS - • Elementor LOOP Tutoria...
Elementor Loop Grid Tutorial | Post Excerpt, Equal Height - • Elementor Loop Grid Tu...
How To Use The New Elementor Mega Menu Widget Tutorial - • How To Use The New Ele...
#elementor #woocommerce #wordpress #wordpresstutorial
Very nice tip, thanks
Great tutorial! Thanks
Thabk you sooooo much for this helpful video
I have struggled to build an offset (where the products appear outside the column) product slider for a long time. Thanks to this method and 1 line of CSS code it became possible. Thank you so much for this video
Glad it helped!
Thanks friend
Thanks mate..
Valeu brother!!!
can you tell me how to add percentage discount label over product which are on sale
Very good tutorial! Can you help me aligning the add to cart buttons?
there are different to align items in elementor
you can set the alignment from the container
you can set the align on the widget in the style option
you can also go to advance settings and set the custom with and then align self
lastly you can use CSS code to do it
How to mobile responsive this loop?
Hello. Thank you. How do I make the product swatches as a slider like in temu.
can you upload a screenshot google cloud and show me
very good video bro! helped me a lot...but m just wondering why did you create the breadcrumb manually instead of using the widget or am i missing something here..
No, you are not, whatever works for you.. Elementor recent updates have helped eliminate the need to install multiple plugins or add on..
Excellent, have been struggling since last two days for this "Sales" Badge thing, is there a way to actually place as Percentage Discount?
For now, elementor loop doesnt have that future however it can be done with custom code
@@thecreativarena Can you or anybody else share that code snippet here?
i have done the video and posted it you can find it here th-cam.com/video/YcwtRLqoqeo/w-d-xo.html
Hello! May I ask, where did you edit the grid loop layout? In theme builder? What part?
i dont understand what you mean however you can edit the loop either from the theme builder or the loop widget also check this playlist out
th-cam.com/video/GUNP3EA6cO4/w-d-xo.html&pp=gAQBiAQB
it contains everything you need to know about loop
Good tutorial... How to filter the carousel by categories? Is this possible to do?
Yes it is Possible am going to make a video about that share today
Good
you can see a video of that here th-cam.com/video/6afFyYD4Qbo/w-d-xo.html
Thanks so much for the tutorial, but I have few questions.
I want to design an Archive page, just like the Category product page that you designed but I need to design a set of 2 - 3 post designs.
In practical, I need a way to use Query (total number to pick for one particular design and offset too). So, that if the first design shows 4 contents then the second design will start from content 5 from the same Archive page.
I hope you understand me....
In simple terms, can I add more than one loop to an achieve page while setting the number to show for a loop and offset for the second one
Yes i understand what you mean and i have a video with such features but not for product loop but post loop however you can still use the same method used to achieve it for product loop.. here is the tutorial th-cam.com/video/s9zrr-zUTbE/w-d-xo.html
@@thecreativarena Oh, thanks a lot. I have checked the video and I can see that its explained what I am requesting for BUT hope selecting Dynamic content on the loop grid design will work perfectly on Archive page (that's category page, so that the post shown will be from that category that's view) ❔
yes it does work
Does the archive made with the loop item works with filters
it makes you have a design for how you want products or post in a particular category or tags to display but if you want to know more about how to filter you can watch this th-cam.com/video/DFiBUgJz3LA/w-d-xo.html or this th-cam.com/video/6afFyYD4Qbo/w-d-xo.html
helo , how can i add the sorting bar for product loop grid , because the product archive have it but when customize shop page with loop grid is lacked
You can watch this video it will help you with that th-cam.com/video/DFiBUgJz3LA/w-d-xo.html if it doesnt reply this comment
Hello! thanks for the tutorial, one question, if I want to click on the image of the product it will take me to the product page? because nothing happens :c
Thats be cause i didnt add that option am working on a more recent and comprehensive tutorial for loop builder soon
however you can make the image clickable by editting the image under content go down to links set it to custom url select the dynamic option and select post url option
@@thecreativarena thanks a lot!
any ideas why I don't have the "Loop" section in the Elementor feature settings?
make sure you have installed the elementor pro and also the latest version of the plugin
Good i need to add sales Presentage for the sales badge,how to do it?
yes this can be done however with custom code for now
@@thecreativarena did you know about it?
yes but it wont work on loop though just on default woocommerce product list and archive
@@thecreativarena will really appreciate if someone can a code snippet which works on loop as well
How can I design to achieve page on elementor free, and on a live server as one can not add a template?
i do not understand your question do you mean Archive page?
Pls I wish to know the difference between the archive page and the shop page. Thanks 🙏🏽
ok its quite simple to be able to differentiate them the archive page is what you see when you click a particular product category or tag where as the shop page is the page that shows all the available products
i hope you understand this
@@thecreativarena ok I get it now thanks so much. How often do you publish new contents?
Weekly
@@thecreativarena ok will be back for more
is this available only in elementor pro option?
yes it is
Do you have a single product page video?
No I dont for now but if you want i can create one, i also create videos based on viewers requests
Okay I understand that you are taking only one image for the carousel and how did you take everything at once together? It doesn't work for me
i think i under your question however with elementor loop grid you can take everything together to understand elementor loop you can watch this series th-cam.com/video/4bi63xPozgM/w-d-xo.html&pp=gAQBiAQB
How can i show the sale percentage insted of sale text ??
you can check this video out th-cam.com/video/YcwtRLqoqeo/w-d-xo.html
im adding featured image and i dont see example image of product, why?
you need to make sure your all products posted have a featured image set and follow the steps in the tutorial step by step it should work fine for you
How can I used it to work with a search ?
you can watch this video for that th-cam.com/video/x6ySFzQ3ek0/w-d-xo.html
It loads very slowly, is there any way to fix it?
what exactly loads very slow is it the video or the loop after you have created it or what please specify so i can help
how to replace Sale ! by Percent Discount ? (Loop)
am working towards that and will make a video about it as soon as possible
@@thecreativarena Thanks ! I always look forward to it, this is a very useful thing
Add to cart ajax no work in product loop? Why?
it works just fine. in a situation whereby when you click on add to cart in the loop and it takes you to the product page instead of add to cart and then showing a link by the side called view cart, you might want to check to make sure that the product, in particular, is not out of stock.
and also there are two add to cart widgets in elementor and I have tried both and ajax works well
Hello, loop grid product category archive Pagination is not working, can you help me with this? I couldn't figure it out.
its working well for me did you get any error message and did you try out all the pagination options and got same results?
Hello @@thecreativarena Yes, it does not appear even though I have selected all pagination options. This just doesn't work when Current Query is open. I need to open the product category archive to show the products. When I open it, pagination does not work. I don't know what I should do
i have gone over this and the pagination seems to be working just fine..
before we can solve this i believe we need to know why so here are some suggestive questions to help with this
plugin conflict = they might be a plugin or an addon you are using that is preventing it from working
theme compatibility = your theme structure might not be compatible with the feature
elementor version is not up to date
try uninstalling your cache plugin and see if the pagination works for you
i hope this was helpful
@@thecreativarena Thank you for your answer, hello elementor theme, elementor, elementor pro, woocommerce plugins are available. Elementor Loop Grid, Product Category Archive pagination just doesn't work. Can you please send me a short video about your settings?
i didn't do any special setting after designing the content for the loop in the archive i set the items per page then set the pagination to numbers as you can see in this video where i even styled the pagination th-cam.com/video/epsNhSJuCWw/w-d-xo.html
and every other thing set default, you could try this out
goto elementor > tools > Regenerate CSS & Data Click on it, this will help fix what was broken or preventing it from working
hey where is a filter
you can use this video to do that th-cam.com/video/6afFyYD4Qbo/w-d-xo.html
thanks man 🫡
Loop girl option not available
can you make me understand what you mean so i can help you
Sir already completed product design but sir per page show 1no page 2no page 3no page product design attached How to do..and Filter option Added Low to high
maybe this video can be of help th-cam.com/video/epsNhSJuCWw/w-d-xo.html