Der er ingen Master Addons WooCommerce produkt karrusel widget. Det er det ærlige svar på forhånd, og det sparer dig for en installation.
Hvad virker er tre ruter. Elementor Pro's Loop Carousel er den eneste, der kører en live produktforespørgsel, så vælg den, hvis strimlen skal følge dit katalog. Det gratis Quadrant Paged Catalogue-design giver dig et håndkurateret ni-elements udstillingsvindue uden forespørgsel bag. Og Master Addons' Featured Product-widget sætter fokus på ét produkt, med den gratis Image Carousel, der dækker produktfotografering. Alle tre sidder inde i den bredere Elementorkarruselwidget familie; hvis du sætter en hel butik ud, bedste Elementor tilføjelser til WooCommerce roundup dækker resten.
Nedenfor: hvordan hver enkelt er bygget, så springer den del, de fleste tutorials over, som er hvor en produktkarrusel aktivt koster dig salg.
Hvilken metode at vælge
- Du har Elementor Pro, og striben skal spore lager, pris og nyankomne → Loop Karrusel. Det er det rigtige svar.
- Du vil have ni håndskrevne kort, du styrer, ned til den sidste kopieringslinje → Quadrant Paged Catalogue, gratis.
- Du vil presse et produkt hårdt → Udvalgt produkt, Pro.
- Du skal bare bruge produktfotos på et spor → Billede Karrusel, gratis.
Metode 1: Elementor Pro's Loop Carousel
Elementor Pro løser dette indfødt, så start her. Den Loop Karrusel tager en Loop Item skabelon, et produktkort du designer en gang, og peger det på en WooCommerce forespørgsel. Tilføj et produkt, ændre en pris, sælge ud af en størrelse, og karrusellen afspejler det uden nogen åbner editoren. Ingen addon involveret.
- Byg skabelonen Loop Item. Skabeloner → Tema Builder → Loop Vare, kilde indstillet til Produkt. Lay out billede, titel, pris, rating og knap ved hjælp af dynamiske tags.
- Drop Loop Carousel-widgetten på siden og vælg den skabelon.
- Indstil forespørgslen. Kilde er, hvor det virkelige arbejde sker: alle produkter, en kategori, et tag, på salg, featured, eller manuel udvælgelse. Derefter bestille efter dato, pris, popularitet eller menu ordre.
- Indstil hvor mange der skal indlæses. Dette er den samlede karrusellen holder, ikke hvor mange der er synlige. Otte til tolv passer til en stribe med relaterede produkter. Indlæs fire med fire synlige, og der er intet at rulle til.
- Udeluk det, der ikke burde være der. Ikke-på lager varer, og på en enkelt produktside, det aktuelle produkt. En relateret-produkter strimmel, der omfatter det produkt, du allerede ser på læser som brudt.
- Indstil dias-per-view pr. breakpoint. Fire på desktop, tre på tablet, halvanden på mobil.
At “halvanden på mobil” ikke er en tastefejl. Et fuldt kort plus halvdelen af den næste er det stærkeste signal en strimmel ruller. Et kort, der fylder bredden, ligner en statisk blok, og de fleste mennesker stryger det aldrig.
Fangsten er licensen. Loop Carousel er Pro-only, uden gratis ækvivalent i Elementor kerne. karrusel plugin roundup gennemgår forespørgselskontrollerne og de gratis løsninger i detaljer.
Metode 2: håndkurateret med Quadrant Paged Catalogue (gratis)
En live forespørgsel er nogle gange helt forkert. En hjemmeside samling, hvor du ønsker at skrive hver linje selv, eller et produkt showcase på et websted, der ikke kører WooCommerce overhovedet, ønsker håndplukkede kort.
Quadrant Paged Catalogue er et af de otte gratis importerbare Widget Builder designs: et gitter af ni varebokse side tre ad gangen, med en segmentskinne, der viser, hvor du er, og hopper mellem siderne. Hver boks indeholder et billede, en kategorimærke, en titel, en kopilinje og en stat, alt sammen indtastet i hånden, hvilket er punktet.
Live Demo Download Widget JSON
Det importerer på det gratis plugin gennem Master Addons → Widget Builder → Import Widget, vises derefter i Elementor under Favoritter. Resten af sættet, tyve designs med otte af dem gratis, er i gratis Elementor skyder skabeloner roundup.
Den ærlige advarsel: ni varer, fast. Det er ikke en produktforespørgsel. Intet sporer lager, intet opdaterer en pris, og en udsolgt vare sidder der, indtil du redigerer boksen. Brug den til et kurateret sæt, du sjældent ændrer. For alt, der skal følge kataloget, skal du gå tilbage til metode 1.
Metode 3: Udvalgt produkt og billedkarrusel til billeder
Master Addons har præcis én WooCommerce-widget, og det er ikke en karrusel. Den Udvalgt produktwidget er Pro, og det gør et andet job: et produkt, givet værelse, med billede, titel, pris, beskrivelse og en købsknap lagt ud som en blok i stedet for et kort i en strimmel.
Det er ofte den bedre form alligevel. Et enkelt produkt med plads omkring det konverterer hårdere end det samme produkt som et af fire kort, nogen skal rulle forbi. Brug det til en lancering, en bestseller eller det ene element, en landingsside er bygget op omkring.
Til produktfotografering på en bane (seks vinkler af samme jakke, en lookbook, en materialestrimmel) den frie Billedkarrusel håndterer det. Lightbox, billedtekster, per-enhed slides-per-view. Hvis nogle af de vinkler er klip snarere end stillbilleder, er video karrusel og galleri skyder guide dækker de widgets, der håndterer afspilning.
Vær klar over, hvad det ikke er: Du tilføjer billederne selv, og de linker ikke til produkter, medmindre du indstiller linkene i hånden. Det er en fotokarrusel, ikke et butiksfeed.
Hvor en produktkarrusel hører hjemme
Uanset hvilken metode du bruger, fungerer fire stillinger pålideligt:
- Relaterede produkter på en enkelt produktside. Den besøgende er allerede interesseret i denne kategori. En glidende strimmel af fire alternativer er en service.
- Cross-sælger og “fuldfør looket.” Tilbehør under et hovedprodukt. Ingen behøver at se alle tolv; de skal vide, at der findes tolv.
- En fremhævet eller sæsonbestemt samling på hjemmesiden. Kurateret, ikke udtømmende.
- Senest set. Lille, personlig og en karrusel er den naturlige form for det.
Hvad de deler: produkterne er valgfri. Siden virker stadig, hvis ingen rører striben.
Hvor det koster dig salg
Sæt aldrig en karrusel på en butik eller kategoriside.
Dette er den, der skal komme rigtigt. En kategoriside findes, så folk kan sammenligne: scanne et gitter, få øje på det, de vil have, klik. En karrusel viser fire produkter og skjuler resten bag en pil, hvilket gør sammenligning til en hukommelsesøvelse. Den besøgende skal holde produkt to i hovedet, mens han ser på produkt seks.
Der er også en præsentationsomkostning. En karrusel og et gitter kan udsende den samme markering, men en kategoriside, der synligt viser seks varer, læses som en tynd kategori, både for shoppere og for alle, der bedømmer sidens dybde. Din butiksside skal ligne en butik.
Anden dårlig position: over folden på mobil. En produktkarrusel er en forespørgsel, en skabelongengivelse og en skyderinitialisering før noget maler. Øverst på en telefonside er det din største indholdsmæssige maling brugt på en spinner. Sæt en statisk helt der og start karrusellen under den.
Læg i indkøbskurven: i karrusellen eller ej?
Vis knappen for simple produkter. Skjul den for variable.
Et simpelt produkt med AJAX add-to-cart i strimlen er en rigtig genvej: et tryk, ingen sideindlæsning, vognopdateringer. Værd at have.
Et variabelt produkt kan ikke tilføjes uden at vælge en størrelse eller farve, så knappen enten gør ingenting eller hopper shopperen til produktsiden. Begge føler sig brudt. For variable produkter skal du gøre hele kortet til et link og springe knappen over.
Hvis dit katalog blander begge, skal du køre to karruseller med forskellige forespørgsler i stedet for et kompromislayout.
Udsalgsmærker og prisvisning
Vis salgsmærket. Det er det med den højeste kontrast i et produktkort, og det er grunden til, at folk holder op med at rulle.
Vis prisen, inklusive den gennemstregede original på udsalgsvarer, fordi sammenligningen er overtalelsen.
Variable produkter viser en rækkevidde (“£ 20 til £ 45”). Lange områder wrap og bryde kortjustering, og forkert justerede kort i en vandret strimmel er langt mere synlige end i et gitter. Enten indstille en fast højde på prisrækken eller vise “Fra £ 20.”
Kortdesign, der ikke ser amatør ud
Tre ting betyder mere end resten.
Lige store korthøjder. Produkttitler varierer voldsomt i længden, og en titel på to linjer ved siden af en titel på én linje skubber prisrækken til forskellige højder. Indstil en fast titelhøjde med trunkering, eller slå autohøjde til, så rækken udjævner sig selv.
Et billedformatforhold. Portræt og firkantede produktfotos i samme strimmel er den mest almindelige årsag til, at en produktkarrusel ser billig ud. Indstil et forhold og lad det beskære.
Gab mellem kortene. 16 til 24px. Nul mellemrum gør produkter bløder sammen; for meget og fire kort stopper læsning som et sæt.
Autospil til produkter?
Nej, og den her er ikke en præference. Den autoplay regel er anderledes for en helte skyder, hvor intet er klikbart og rotation koster ingenting.
Produktkort er klikbare. Autospil betyder, at et kort kan flytte, når nogen rækker ud efter det, og en shopper, der trykker på det forkerte produkt, går normalt ikke tilbage og prøver igen. De forlader. Pause-on-hover dækker skrivebordet; ved berøring er der ingen hover overhovedet, og mobil er, hvor de fleste af dine shoppere er.
Sluk den.
Ydeevne: hvad et produkt karrusel faktisk koster
Hvert produkt i forespørgslen er en databaselæsning plus en skabelongengivelse, og skyderscriptet kan ikke initialiseres, før den pågældende opmærkning findes. Tre praktiske grænser:
- Cap forespørgslen på tolv. Ud over det gengiver du kort, ingen når.
- Lazy-load alt undtagen den første række af synlige billeder. Off-screen slides loading ivrigt er den sædvanlige årsag til en langsom produktside.
- Server kortbilledet i kortstørrelse. Et 2000px produktfoto skaleret til et 300px kort er den mest almindelige spildte download på et WooCommerce site.
En karrusel per sidesektion er et rimeligt loft. Tre stablede karruseller på en hjemmeside er tre skydere, der konkurrerer om hovedtråden på en telefon.
Skema: lad være med at håndrulle det
WooCommerce udsender allerede produktstrukturerede data på enkelte produktsider, og det er der, Google ønsker det. En karrusel med produktkort på en hjemmeside eller destinationsside behøver ikke sin egen produktmarkering, og tilføjelse af det i hånden er en god måde at ende med pris- eller tilgængelighedsdata, der modsiger den rigtige produktside.
Hvis karruselkortene linker til produktsiderne, og det skal de, er crawl-stien intakt, og de strukturerede data bor, hvor de hører hjemme. Lad det være.
Ofte stillede spørgsmål
Har Master Addons en WooCommerce produkt karrusel widget?
Nej. Master Addons har en WooCommerce widget, Udvalgte Produkt, og det spotlights et enkelt produkt snarere end at glide gennem flere. For en rigtig produkt karrusel, brug Elementor Pro s Loop Karrusel med et produkt Loop Item skabelon. For en håndkurateret udstillingsvindue på den gratis plugin, importere Quadrant Paged Catalogue design og udfylde de ni kasser selv.
Har WooCommerce en produktkarrusel?
Ikke indbygget. WooCommerce udlæser produkter i gitter: butiksside, kategoriarkiver, relaterede produkter. En glidende karrusel har brug for enten Elementor Pro's Loop Carousel med en produktskabelon eller en tredjeparts widget, der tilføjer en.
Hvordan laver jeg et produkt karrusel i Elementor gratis?
Free Elementor har ingen dynamisk produktkarrusel, så den ærlige gratis sti er en håndkurateret: Importer Quadrant Paged Catalogue-designet gennem Master Addons → Widget Builder → Importer widget og skriv i de ni varer, eller brug den gratis billedkarrusel til produktfotografering med manuelle links. Alt, der forespørger i kataloget, skal automatisk bruge Elementor Pro.
Skal jeg bruge en produktkarrusel på min shopside?
Nr. Kategori og butikssider findes, så folk kan sammenligne produkter med et øjeblik, og en karrusel skjuler de fleste af dem bag en pil. Brug et gitter på listesider og gem karruseller til relaterede produkter, krydssalg og kuraterede kollektioner.
Kan en produktkarrusel vise add-to-cart knapper?
Ja, hvis du selv bygger kortet i en Loop Item skabelon. Sæt tilføjelsen til vogn i skabelonen, og hver slide får en. Vis den for simple produkter med AJAX add-to-cart; skjul den for variable produkter, som har brug for en variation valgt først, så knappen enten fejler eller omdirigerer.
Hvor mange produkter skal der være i en karrusel?
Otte til tolv indlæst, fire synlige på skrivebordet. Færre end otte, og der er næsten ikke noget at rulle til; mere end tolv, og halen ses aldrig. Hvis du har brug for mere end det, vil indholdet have et gitter.
Hvorfor har mine produktkort forskellige højder?
Produkttitler af forskellig længde skubber prisen og knapperækkerne til forskellige positioner. Indstil en fast titelhøjde med trunkering, eller slå auto-højde til, så rækken matcher det højeste kort. Indstil også et fast billedformat, fordi blandede portræt- og firkantede fotos forårsager det samme problem.
Next
Optagelse af et produkt fra seks vinkler i stedet for at liste seks produkter? Det er billedkarrusel tutorial, som dækker lightbox og billedtekstsiden.
Alt karruselformet, gratis og Pro, er på karrusel widget hub, og den frie versus Pro opdeling viser præcis, hvad en licens tilføjer.
Quadrant Paged Catalogue importerer gratis. De andre tolv designs har brug for en licens, og den prissætning side viser hvilket niveau hver enkelt falder ind under.
