Es gibt kein Master Addons WooCommerce Produktkarussell Widget Das ist die ehrliche Antwort im Voraus, und es erspart Ihnen eine Installation.
Was funktioniert, sind drei Routen Das Loop Carousel von Elementor Pro ist das einzige, das eine Live-Produktabfrage ausführt. Wählen Sie es also aus, wenn der Streifen Ihrem Katalog folgen sollte. Das kostenlose Quadrant Paged Catalogue-Design bietet Ihnen eine handkuratierte Showcase mit neun Artikeln ohne Rückfrage dahinter. Und das Featured Product Widget von Master Addons beleuchtet ein Produkt, wobei das kostenlose Image Carousel die Produktfotografie abdeckt. Alle drei sitzen im weiteren Bereich Elementarkarussell-Widget Familie; wenn Sie einen ganzen Laden ausstatten, ist das Beste Elementor-Addons für WooCommerce Rondierung deckt den Rest ab.
Unten: wie jedes aufgebaut ist, dann der Teil, den die meisten Tutorials überspringen, wo ein Produktkarussell Sie aktiv den Umsatz kostet.
Welche Methode ausgewählt werden soll
- Sie haben Elementor Pro und der Streifen sollte Lagerbestand, Preis und Neuankömmlinge verfolgen → Schleifenkarussell Es ist die eigentliche Antwort.
- Sie möchten neun handgeschriebene Karten, die Sie bis zur letzten Kopierzeile kontrollieren → Quadrant Paged Catalogue, kostenlos.
- Sie möchten ein Produkt hart vorantreiben → Ausgewähltes Produkt, Pro.
- Man braucht nur Produktfotos auf einer Spur → Bild Karussell, kostenlos.
Methode 1: Schleifenkarussell von Elementor Pro
Elementor Pro löst das nativ, also fang hier an Die Schleifenkarussell Nimmt eine Loop Item Vorlage, eine Produktkarte, die Sie einmal entwerfen, und zeigt sie auf eine WooCommerce Abfrage Hinzufügen eines Produkts, ändern Sie einen Preis, ausverkauft von einer Größe, und das Karussell spiegelt es wider, ohne dass jemand den Editor öffnet Kein Addon beteiligt.
- Erstellen Sie die Loop-Elementvorlage. Vorlagen → Theme Builder → Loop Item, Quelle auf Produkt eingestellt Bild, Titel, Preis, Bewertung und Button mit dynamischen Tags anlegen.
- Lassen Sie das Loop Carousel-Widget auf der Seite fallen und wählen Sie diese Vorlage aus.
- Stellen Sie die Abfrage. Quelle ist, wo die eigentliche Arbeit passiert: alle Produkte, eine Kategorie, ein Tag, im Verkauf, vorgestellt, oder manuelle Auswahl Dann bestellen Sie nach Datum, Preis, Beliebtheit oder Menübestellung.
- Stellen Sie ein, wie viele geladen werden sollen. Das ist die Summe, die das Karussell fasst, nicht wie viele sichtbar sind Acht bis zwölf passt zu einem Streifen für verwandte Produkte. Laden Sie vier mit vier sichtbaren und es gibt nichts, worauf Sie scrollen können.
- Ausschließen, was nicht da sein darf. Nicht vorrätige Artikel, und auf einer einzigen Produktseite, das aktuelle Produkt Ein Strip für verwandte Produkte, der das Produkt enthält, das Sie bereits betrachten, liest sich als defekt.
- Setzen Sie Folien pro Ansicht pro Haltepunkt. Vier auf dem Desktop, drei auf dem Tablet, eineinhalb auf dem Handy.
Dass “eineinhalb auf dem Handy” kein Tippfehler ist Eine volle Karte plus die Hälfte der nächsten ist das stärkste Signal, das ein Streifen scrollt Eine Karte, die die Breite füllt, sieht aus wie ein statischer Block und die meisten Leute wischen nie darüber.
Der Haken ist die Lizenz. Loop Carousel ist nur Pro-only, ohne kostenloses Äquivalent im Elementorkern. Die Karussell-Plugin-Rundung Abfragesteuerungen und die kostenlosen Workarounds im Detail durchläuft.
Methode 2: Handkuratiert mit Quadrant Paged Catalogue (kostenlos)
Eine Live-Abfrage ist manchmal genau falsch Eine Homepage-Sammlung, bei der man jede Zeile selbst schreiben möchte, oder ein Produkt-Showcase auf einer Seite, auf der WooCommerce gar nicht läuft, will handverlesene Karten.
Der Quadrant Paged Catalogue ist einer der acht kostenlos importierbaren Kataloge Widget-builder Designs: ein Raster aus neun Artikelboxen, die jeweils drei Stück lang gepaged sind, mit einer Segmentschiene, die anzeigt, wo Sie sich befinden und zwischen den Seiten springt Jede Box enthält ein Bild, ein Kategorienetikett, einen Titel, eine Kopierzeile und einen Stat, alle von Hand eingegeben, was der Punkt ist.
Live-Demo Widget JSON herunterladen
Es importiert auf dem kostenlosen Plugin durch Master Addons → Widget Builder → Widget importieren, erscheint dann in Elementor unter Favoriten Der Rest des Sets, zwanzig Designs mit acht davon kostenlos, ist in der Kostenlose Elementor-Slider-Vorlagen Aufrundung.
Der ehrliche Vorbehalt: neun Artikel, behoben Es ist keine Produktabfrage Nichts verfolgt Lagerbestände, nichts aktualisiert einen Preis, und ein ausverkaufter Artikel steht da, bis Sie die Box bearbeiten Verwenden Sie ihn für ein kuratiertes Set, das Sie selten ändern Für alles, was dem Katalog folgen muss, gehen Sie zurück zu Methode 1.
Methode 3: Ausgewähltes Produkt und Bildkarussell für Fotos
Master Addons hat genau ein WooCommerce Widget, und es ist kein Karussell Die Ausgewähltes Produkt-Widget Pro ist, und es macht eine andere Arbeit: ein Produkt, gegebener Raum, mit Bild, Titel, Preis, Beschreibung und einem Kaufknopf, der als Block und nicht als Karte in einem Streifen ausgelegt ist.
Das ist ja oft sowieso die bessere Form Ein einzelnes Produkt mit Platz drumherum wandelt sich härter um als das gleiche Produkt wie eine von vier Karten, an denen jemand vorbeiscrollen muss Benutze es für einen Launch, einen Bestseller, oder den einen Gegenstand, um den eine Landingpage gebaut ist.
Für Produktfotografie auf einer Spur (sechs Winkel derselben Jacke, ein Lookbook, ein Materialstreifen) ist die kostenlose Bild Karussell Handhabt es Lightbox, Bildunterschriften, Dias pro Gerät-per-View Wenn einige dieser Winkel Clips und keine Standbilder sind, wird die Videokarussell und Galerie-Schieberegler Deckt die Widgets ab, die die Wiedergabe verarbeiten.
Mach dir klar, was es nicht ist: Du fügst die Bilder selbst ein und sie verlinken nicht auf Produkte, es sei denn, du setzt die Links von Hand Es handelt sich um ein Fotokarussell, nicht um einen Shop-Feed.
Wo ein Produktkarussell hingehört
Welche Methode Sie auch verwenden, vier Positionen funktionieren zuverlässig:
- Verwandte Produkte auf einer einzigen Produktseite. Diese Kategorie interessiert den Besucher bereits Ein Schiebestreifen aus vier Alternativen ist ein Service.
- Cross-Sells und “komplettieren Sie den Look” Zubehör unter einem Hauptprodukt Niemand braucht alle zwölf zu sehen; sie müssen wissen, dass zwölf existieren.
- Eine vorgestellte oder saisonale Sammlung auf der Homepage. Kuratiert, nicht erschöpfend.
- Kürzlich angesehen. Klein, persönlich, und ein Karussell ist die natürliche Form dafür.
Was diese teilen: Die Produkte sind Optional. Die Seite funktioniert trotzdem, wenn niemand den Streifen berührt.
Wo es Sie Umsatz kostet
Stellen Sie niemals ein Karussell auf eine Shop - oder Kategorieseite.
Das ist diejenige, die richtig liegt Eine Kategorie-Seite existiert, damit die Leute vergleichen können: ein Gitter scannen, das gewünschte erkennen, klicken Ein Karussell zeigt vier Produkte und versteckt den Rest hinter einem Pfeil, was den Vergleich zu einer Gedächtnisübung macht Der Besucher muss Produkt zwei im Kopf halten, während er Produkt sechs betrachtet.
Auch eine Präsentation kostet Ein Karussell und ein Raster können den gleichen Aufschlag ausgeben, aber eine Kategorieseite, die sechs Artikel sichtbar anzeigt, liest sich als dünne Kategorie, sowohl für Käufer als auch für jeden, der die Tiefe der Seite beurteilt Ihre Shopseite sollte wie ein Shop aussehen.
Zweite schlechte Position: Über der Falte auf dem Handy. Ein Produktkarussell ist eine Abfrage, ein Template-Render und eine Schieberegistrierung, bevor etwas lackiert. Oben auf einer Telefonseite ist das Ihre größte zufriedenstellende Farbe, die Sie für einen Spinner ausgegeben haben. Setzen Sie dort einen statischen Helden ein und starten Sie das Karussell darunter.
In den Warenkorb: im Karussell oder nicht?
Zeige den Button für einfache Produkte Verstecke ihn für variable.
Ein einfaches Produkt mit AJAX-Add-to-Cart im Streifen ist eine echte Abkürzung: Ein Tippen, kein Seitenladen, Warenkorb-Updates. Lohnenswert zu haben.
Ein variables Produkt kann nicht hinzugefügt werden, ohne eine Größe oder Farbe auszuwählen, daher bewirkt die Schaltfläche entweder nichts oder springt den Käufer auf die Produktseite. Beide fühlen sich kaputt an. Machen Sie bei variablen Produkten die gesamte Karte zu einem Link und überspringen Sie die Schaltfläche.
Wenn Ihr Katalog beides mischt, führen Sie zwei Karussells mit unterschiedlichen Abfragen aus und nicht ein Kompromisslayout.
Verkaufsabzeichen und Preisanzeige
Sale-Badge zeigen Es ist das kontrastreichste in einer Produktkarte und es ist der Grund, warum die Leute aufhören zu scrollen.
Zeigen Sie den Preis, einschließlich der durchprägten Original-On-Sale-Artikel, denn der Vergleich ist die Überzeugung.
Variable Produkte zeigen eine Bandbreite an (“£20 to £45”).Langstrecken-Wrap-and-Break-Kartenausrichtung, und falsch ausgerichtete Karten in einem horizontalen Streifen sind weitaus besser sichtbar als in einem Raster Entweder eine feste Höhe in der Preisreihe festlegen oder “Ab £20” anzeigen
Kartendesign, das nicht amateurhaft aussieht
Drei Dinge sind wichtiger als der Rest.
Gleiche Kartenhöhen. Produkttitel variieren stark in der Länge, und ein zweizeiliger Titel neben einem einzeiligen Titel drückt die Preisreihe in unterschiedliche Höhen Legen Sie eine feste Titelhöhe mit Kürzungen fest oder schalten Sie die automatische Höhe ein, damit sich die Reihe selbst levelt.
Ein Bildseitenverhältnis. Porträt - und quadratische Produktfotos im selben Streifen sind der häufigste Grund, warum ein Produktkarussell billig aussieht Stellen Sie ein Verhältnis ein und lassen Sie es zuschneiden.
Lücke zwischen den Karten. 16 bis 24 px. Null Lücke lässt Produkte zusammen bluten; zu viel und vier Karten hören auf, als Satz zu lesen.
Autoplay für Produkte?
Nein, und diese hier ist keine Vorliebe Die Autoplay-regel Anders bei einem Helden-Slider, bei dem nichts anklickbar ist und die Rotation nichts kostet.
Produktkarten sind anklickbar Autoplay bedeutet, dass sich eine Karte bewegen kann, wenn jemand danach greift, und ein Käufer, der auf das falsche Produkt tippt, geht normalerweise nicht zurück und versucht es erneut. Sie gehen. Der Desktop für die Pause-on-hover-Abdeckungen; Beim Anfassen gibt es überhaupt keinen Schwebeflug, und auf dem Handy sind die meisten Ihrer Käufer.
Schalten Sie es aus.
Leistung: was ein Produktkarussell eigentlich kostet
Jedes Produkt in der Abfrage ist ein Datenbanklesevorgang plus ein Vorlagen-Rendering, und das Schieberegler-Skript kann erst initialisieren, wenn dieses Markup vorhanden ist. Drei praktische Grenzen:
- Die Abfrage auf zwölf kappen. Darüber hinaus stellen Sie Karten dar, die niemand erreicht.
- Lazy-load alles außer der ersten Reihe sichtbarer Bilder. Das eifrige Laden von Objektträgern außerhalb des Bildschirms ist die übliche Ursache für eine langsame Produktseite.
- Servieren Sie das Kartenbild in Kartengröße. Ein 2000 px Produktfoto, das zu einer 300 px Karte skaliert wurde, ist der am häufigsten verschwendete Download auf einer WooCommerce-Website.
Ein Karussell pro Seitenabschnitt ist eine angemessene Decke Drei gestapelte Karussells auf einer Homepage sind drei Schieberegler, die auf einem Telefon um den Hauptthread konkurrieren.
Schema: nicht von Hand rollen
WooCommerce gibt bereits Produktstrukturierte Daten auf einzelnen Produktseiten aus, und da will Google es Ein Karussell von Produktkarten auf einer Homepage oder Landingpage braucht kein eigenes Produkt-Markup, und das Hinzufügen per Hand ist eine gute Möglichkeit, um am Ende Preis - oder Verfügbarkeitsdaten zu erhalten, die der echten Produktseite widersprechen.
Wenn die Karussellkarten auf die Produktseiten verlinken, und das sollten sie, ist der Crawl-Pfad intakt und die strukturierten Daten leben da, wo sie hingehören Lass es.
Häufig gestellte Fragen
Verfügt Master Addons über ein WooCommerce-Produktkarussell-Widget?
No. Master Addons hat ein WooCommerce-Widget, Featured Product, und es beleuchtet ein einzelnes Produkt, anstatt durch mehrere zu gleiten Für ein echtes Produktkarussell verwenden Sie das Loop Carousel von Elementor Pro mit einer Produkt-Loop-Artikelvorlage. Für eine handkuratierte Vitrine auf dem kostenlosen Plugin importieren Sie das Quadrant Paged Catalogue-Design und füllen Sie die neun Kartons selbst aus.
Hat WooCommerce ein Produktkarussell?
Nicht nativ WooCommerce gibt Produkte in Grids aus: Shopseite, Kategoriearchive, verwandte Produkte Ein Schiebekarussell benötigt entweder das Loop Carousel von Elementor Pro mit einer Produktvorlage, oder ein Widget von Drittanbietern, das eine hinzufügt.
Wie mache ich ein Produktkarussell in Elementor kostenlos?
Free Elementor hat kein dynamisches Produktkarussell, daher ist der ehrliche freie Weg ein handkuratierter: Importieren Sie das Quadrant Paged Catalogue-Design durch Master Addons → Widget Builder → Importieren Sie Widget und geben Sie die neun Elemente ein oder verwenden Sie das kostenlose Image Carousel für Produktfotografie mit manuellen Links Alles, was den Katalog abfragt, benötigt automatisch Elementor Pro.
Soll ich ein Produktkarussell auf meiner Shopseite verwenden?
Nr. Kategorie - und Shopseiten existieren, damit die Leute Produkte auf einen Blick vergleichen können, und ein Karussell versteckt die meisten davon hinter einem Pfeil Verwenden Sie ein Raster auf den Seiten mit Auflistung und speichern Sie Karussells für verwandte Produkte, Cross-Sells und kuratierte Kollektionen.
Kann ein Produktkarussell Add-to-Cart-Tasten anzeigen?
Ja, wenn Sie die Karte selbst in einer Loop Item Vorlage bauen Legen Sie das Add-to-Cart in die Vorlage und jede Folie bekommt eine Zeige es für einfache Produkte mit AJAX Add-to-Cart; verstecken Sie es für variable Produkte, die eine Variation zuerst ausgewählt benötigen, so dass die Schaltfläche entweder ausfällt oder umleitet.
Wie viele Produkte sollten in einem Karussell enthalten sein?
Acht bis zwölf geladen, vier auf dem Desktop sichtbar Weniger als acht und es gibt kaum etwas zum Scrollen; mehr als zwölf und der Schwanz wird nie gesehen, wenn man mehr braucht, will der Inhalt ein Raster.
Warum haben meine Produktkarten unterschiedliche Höhen?
Produkttitel unterschiedlicher Länge drücken den Preis und Knopfreihen auf verschiedene Positionen Legen Sie eine feste Titelhöhe mit Kürzung fest, oder schalten Sie die automatische Höhe ein, damit die Reihe mit der höchsten Karte übereinstimmt Legen Sie auch ein festes Bildseitenverhältnis fest, denn gemischte Porträt - und quadratische Fotos verursachen das gleiche Problem.
Weiter
Ein Produkt aus sechs Winkeln drehen, anstatt sechs Produkte aufzulisten? das ist die Bild Karussell Tutorial, die die Lightbox- und Beschriftungsseite abdeckt.
Alles Karussellförmig, frei und Pro, ist auf der Karussell Widget Hub, und Die kostenlose versus Pro-Aufschlüsselung Zeigt genau an, was eine Lizenz hinzufügt.
Quadrant Paged Catalogue importiert kostenlos Die anderen zwölf Designs benötigen eine Lizenz und die Preisseite Zeigt an, unter welche Stufe jedes einzelne fällt.
