Elementor Loop Builder Tutorial: Custom Product Carousel & Archive, Product On Sale Ribbons & More

แชร์
ฝัง
  • เผยแพร่เมื่อ 24 ธ.ค. 2024

ความคิดเห็น • 100

  • @OyomaAtiyota
    @OyomaAtiyota ปีที่แล้ว

    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

  • @PauloMontoyaTlacuilo
    @PauloMontoyaTlacuilo ปีที่แล้ว +1

    Very nice tip, thanks

  • @Rosszheng
    @Rosszheng 2 หลายเดือนก่อน +1

    Great tutorial,thanks. Do you have a video about a company products exhibition? For example, a high-tech company who has 3 types of products and each type has many detail products

    • @thecreativarena
      @thecreativarena  หลายเดือนก่อน

      i dont hvae but i have other videos on product loop you can check out that might help
      th-cam.com/video/gni2znoa7xU/w-d-xo.html
      th-cam.com/video/NxZ5pKVFJBo/w-d-xo.html
      th-cam.com/video/LWrgGOAnx8o/w-d-xo.html
      or check this playlist on everything you need to know about elementor loop
      th-cam.com/video/GUNP3EA6cO4/w-d-xo.html&pp=gAQBiAQB

  • @roseplumdrop
    @roseplumdrop 5 หลายเดือนก่อน

    Great tutorial! Thanks

  • @Feddy-01
    @Feddy-01 9 วันที่ผ่านมา

    Great tutorial, can a single design template be duplicated across products listing in a store? Do we need additional extension for this design or it can be achieved solely with Elementor?

    • @thecreativarena
      @thecreativarena  9 วันที่ผ่านมา

      yes a sinlge design is duplicated across the product listing thats why its build with the loop and also you can achieve solely with elementor pro

  • @jolayemijoseph6009
    @jolayemijoseph6009 8 หลายเดือนก่อน

    Thabk you sooooo much for this helpful video

  • @ekesMall
    @ekesMall ปีที่แล้ว +1

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

    • @ekesMall
      @ekesMall ปีที่แล้ว +1

      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

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +2

      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

    • @ekesMall
      @ekesMall ปีที่แล้ว

      @@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) ❔

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +2

      yes it does work

  • @geochafg
    @geochafg 10 หลายเดือนก่อน +1

    Very good tutorial! Can you help me aligning the add to cart buttons?

    • @thecreativarena
      @thecreativarena  10 หลายเดือนก่อน

      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

  • @momocreativeworld
    @momocreativeworld 3 หลายเดือนก่อน

    Great

  • @oko6359
    @oko6359 ปีที่แล้ว +1

    thanks man 🫡

  • @rozhb.abdullah1785
    @rozhb.abdullah1785 ปีที่แล้ว

    Thanks friend

  • @Mithsonraj
    @Mithsonraj 11 หลายเดือนก่อน

    Thanks mate..

  • @eduardoribas3682
    @eduardoribas3682 ปีที่แล้ว

    Valeu brother!!!

  • @thesynx1576
    @thesynx1576 5 หลายเดือนก่อน

    Hello! May I ask, where did you edit the grid loop layout? In theme builder? What part?

    • @thecreativarena
      @thecreativarena  5 หลายเดือนก่อน

      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

  • @shahzad248
    @shahzad248 ปีที่แล้ว

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

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      No, you are not, whatever works for you.. Elementor recent updates have helped eliminate the need to install multiple plugins or add on..

  • @t-.-t.
    @t-.-t. ปีที่แล้ว

    Hello. Thank you. How do I make the product swatches as a slider like in temu.

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      can you upload a screenshot google cloud and show me

  • @masielita95
    @masielita95 8 หลายเดือนก่อน

    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

    • @thecreativarena
      @thecreativarena  8 หลายเดือนก่อน +1

      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

    • @masielita95
      @masielita95 8 หลายเดือนก่อน

      @@thecreativarena thanks a lot!

  • @LokoRican_
    @LokoRican_ ปีที่แล้ว

    Do you have a single product page video?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      No I dont for now but if you want i can create one, i also create videos based on viewers requests

  • @CaterStudios
    @CaterStudios ปีที่แล้ว +1

    Pls I wish to know the difference between the archive page and the shop page. Thanks 🙏🏽

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +1

      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

    • @CaterStudios
      @CaterStudios ปีที่แล้ว

      @@thecreativarena ok I get it now thanks so much. How often do you publish new contents?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +1

      Weekly

    • @CaterStudios
      @CaterStudios ปีที่แล้ว

      @@thecreativarena ok will be back for more

  • @zainsajjad203
    @zainsajjad203 11 หลายเดือนก่อน

    can you tell me how to add percentage discount label over product which are on sale

  • @etergenmere
    @etergenmere 6 หลายเดือนก่อน

    Does the archive made with the loop item works with filters

    • @thecreativarena
      @thecreativarena  6 หลายเดือนก่อน

      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

  • @adriancheuquepan4699
    @adriancheuquepan4699 ปีที่แล้ว

    Good tutorial... How to filter the carousel by categories? Is this possible to do?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      Yes it is Possible am going to make a video about that share today

    • @Entudodesign
      @Entudodesign ปีที่แล้ว

      Good

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      you can see a video of that here th-cam.com/video/6afFyYD4Qbo/w-d-xo.html

  • @wordpresstipsntools960
    @wordpresstipsntools960 ปีที่แล้ว

    Excellent, have been struggling since last two days for this "Sales" Badge thing, is there a way to actually place as Percentage Discount?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +1

      For now, elementor loop doesnt have that future however it can be done with custom code

    • @wordpresstipsntools960
      @wordpresstipsntools960 ปีที่แล้ว

      @@thecreativarena Can you or anybody else share that code snippet here?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      i have done the video and posted it you can find it here th-cam.com/video/YcwtRLqoqeo/w-d-xo.html

  • @carolinadelsur6411
    @carolinadelsur6411 10 หลายเดือนก่อน

    any ideas why I don't have the "Loop" section in the Elementor feature settings?

    • @thecreativarena
      @thecreativarena  10 หลายเดือนก่อน

      make sure you have installed the elementor pro and also the latest version of the plugin

  • @Saint-su2se
    @Saint-su2se 3 หลายเดือนก่อน

    Let’s say for example the user clicks on the shirt, how do you take them to the page where they pick the size and color?

    • @thecreativarena
      @thecreativarena  3 หลายเดือนก่อน

      you can design a custom made product page using a elementor there is a plugin that can help you set variations easily called Variation Swatches for WooCommerce you can check it out

  • @vodoijeezyb6002
    @vodoijeezyb6002 ปีที่แล้ว

    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

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      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

  • @davidgutierrez8468
    @davidgutierrez8468 4 หลายเดือนก่อน

    How would you use loop carousel to put only a specific category, for example discounts and only promotional products are displayed?

    • @thecreativarena
      @thecreativarena  4 หลายเดือนก่อน

      in your loop settings go to the query in order to show only products on discounts select the Sale option from the query instead of latest product, and then for promotional products select the featured option in the query i hope you understand this, if not let me know

  • @ramxavier4627
    @ramxavier4627 หลายเดือนก่อน

    how do you change the images for the products?

    • @thecreativarena
      @thecreativarena  หลายเดือนก่อน

      by editing the products and setting the product featured image or gallery images

  • @isampath6918
    @isampath6918 ปีที่แล้ว

    Good i need to add sales Presentage for the sales badge,how to do it?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +1

      yes this can be done however with custom code for now

    • @isampath6918
      @isampath6918 ปีที่แล้ว

      @@thecreativarena did you know about it?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      yes but it wont work on loop though just on default woocommerce product list and archive

    • @wordpresstipsntools960
      @wordpresstipsntools960 ปีที่แล้ว

      @@thecreativarena will really appreciate if someone can a code snippet which works on loop as well

  • @tekno7
    @tekno7 ปีที่แล้ว

    Hello, loop grid product category archive Pagination is not working, can you help me with this? I couldn't figure it out.

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +1

      its working well for me did you get any error message and did you try out all the pagination options and got same results?

    • @tekno7
      @tekno7 ปีที่แล้ว

      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

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      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

    • @tekno7
      @tekno7 ปีที่แล้ว

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

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว +1

      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

  • @ymedia8576
    @ymedia8576 ปีที่แล้ว

    is this available only in elementor pro option?

  • @trandugold
    @trandugold 5 หลายเดือนก่อน

    It loads very slowly, is there any way to fix it?

    • @thecreativarena
      @thecreativarena  5 หลายเดือนก่อน

      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

  • @fayad_ousmand
    @fayad_ousmand 6 หลายเดือนก่อน

    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

    • @thecreativarena
      @thecreativarena  6 หลายเดือนก่อน

      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

  • @fastmedia277
    @fastmedia277 9 หลายเดือนก่อน

    How can I design to achieve page on elementor free, and on a live server as one can not add a template?

    • @thecreativarena
      @thecreativarena  9 หลายเดือนก่อน

      i do not understand your question do you mean Archive page?

  • @sunnatimart
    @sunnatimart 2 หลายเดือนก่อน

    How to create buy now button in loop grid?

    • @michaelmaxwell8668
      @michaelmaxwell8668 5 วันที่ผ่านมา

      You can use the normal button widget

  • @Boldogsagtar
    @Boldogsagtar 4 หลายเดือนก่อน

    Hi, I have no Loop options in settings. :(

    • @thecreativarena
      @thecreativarena  4 หลายเดือนก่อน +1

      you need elementor pro to be able to use the Loop widget

    • @Boldogsagtar
      @Boldogsagtar 4 หลายเดือนก่อน +1

      @@thecreativarena l have Pro. Now l see. Ty :)

  • @vzky
    @vzky ปีที่แล้ว

    im adding featured image and i dont see example image of product, why?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      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

  • @flepooo
    @flepooo ปีที่แล้ว

    How can i show the sale percentage insted of sale text ??

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      you can check this video out th-cam.com/video/YcwtRLqoqeo/w-d-xo.html

  • @GSRehvid
    @GSRehvid 10 หลายเดือนก่อน

    How can I used it to work with a search ?

    • @thecreativarena
      @thecreativarena  7 หลายเดือนก่อน

      you can watch this video for that th-cam.com/video/x6ySFzQ3ek0/w-d-xo.html

  • @mostafanoori1560
    @mostafanoori1560 ปีที่แล้ว

    How to mobile responsive this loop?

  • @1tezcom
    @1tezcom 8 หลายเดือนก่อน

    how to replace Sale ! by Percent Discount ? (Loop)

    • @thecreativarena
      @thecreativarena  8 หลายเดือนก่อน +1

      am working towards that and will make a video about it as soon as possible

    • @1tezcom
      @1tezcom 8 หลายเดือนก่อน

      @@thecreativarena Thanks ! I always look forward to it, this is a very useful thing

  • @martinslinhos
    @martinslinhos ปีที่แล้ว

    Add to cart ajax no work in product loop? Why?

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      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

  • @buddho5420
    @buddho5420 ปีที่แล้ว

    Loop girl option not available

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      can you make me understand what you mean so i can help you

    • @buddho5420
      @buddho5420 ปีที่แล้ว

      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

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      maybe this video can be of help th-cam.com/video/epsNhSJuCWw/w-d-xo.html

  • @hamzamughal9875
    @hamzamughal9875 ปีที่แล้ว

    hey where is a filter

    • @thecreativarena
      @thecreativarena  ปีที่แล้ว

      you can use this video to do that th-cam.com/video/6afFyYD4Qbo/w-d-xo.html