Aus dem Kasten heraus zeigt WooCommerce Produktvariationen als einfache Dropdown-Menüs. Wählen Sie eine Größe, wählen Sie eine Farbe aus, alles aus einem grauen Auswahlfeld, das verbirgt, wie die Optionen tatsächlich aussehen. A WooCommerce Variation Swatches Plugin Behebt das Es tauscht diese Dropdowns gegen anklickbare Farbkreise, Bild-Miniaturansichten und beschriftete Tasten, sodass ein Käufer das rote Hemd oder das XL auf einen Blick sieht, anstatt ein Textmenü zu dekodieren.
Diese kleine Änderung bewegt die Nadel, denn die Leute kaufen, was sie sehen können. Diese Anleitung vergleicht 8 der besten Swatches-Plugins und die Installation jedes einzelnen ist kostenlos aus dem offiziellen WordPress.org-Verzeichnis, sodass Sie sie in Ihrem eigenen Shop ausprobieren können, bevor Sie sich verpflichten. Zuerst jedoch ein Plugin, das zu jedem Elementor-Store gehört, bevor Sie überhaupt über Swatches nachdenken: Master-Addons für Elementor. Es handelt sich nicht um ein Swatches-Plugin, sondern es erstellt die Produktseite, auf der Ihre Swatches leben, sodass es den Spitzenplatz einnimmt.
Was sind WooCommerce-Variations-Swatches?
Variations-Swatches ersetzen die Attribut-Dropdowns auf einem variablen Produkt durch visuelle Selektoren, statt eines “Farb” - Dropdowns erhält man eine Reihe von Farbquadraten, statt eines “Größe” - Dropdowns erhält man anklickbare Tasten: S, M, L, XL.
Sie werden normalerweise vier Swatch-Typen sehen:
- Farbmuster Für Attribute wie Rot, Marine oder Oliv
- Bildausschnitte Die ein kleines Foto jeder Variation zeigen, sei es ein Muster, eine Textur oder das Produkt in dieser Farbe
- Tasten- oder Etikettenmuster Für Größen, Materialien oder andere Textattribute
- Funkuhren Für eine aufgeräumtere Version des Standards wählen Sie
Die besseren Plugins verschieben auch Swatches auf die Shop- und Kategorieseiten, nicht nur auf die einzelne Produktseite, sodass Käufer ihre Optionen erkennen, während sie noch surfen.
So fügen Sie Farbmuster in WooCommerce hinzu
Das Setup ist hier in jedem Plugin nahezu identisch:
- Installieren und aktivieren Sie WooCommerce und das von Ihnen gewählte Swatches-Plugin.
- Gehe zu Produkte > Attribute Und erstellen Sie ein Attribut wie Farbe und fügen Sie dann seine Begriffe hinzu (Rot, Blau, Grün).
- Legen Sie den Swatch-Typ jedes Terms fest. Wählen Sie für Farbe den Hex-Wert; Laden Sie für das Bild eine Miniaturansicht hoch.
- Öffnen Sie ein variables Produkt, fügen Sie das Attribut unter der Registerkarte Attribute hinzu und generieren Sie Variationen.
- Speichern und Vorschau Der Dropdown ist jetzt eine Reihe von Swatches.
Kein Code irgendwo in dieser Liste Wenn Ihre variablen Produkte noch nicht eingerichtet sind, sortieren Sie das zuerst mit dem Beamten WooCommerce variable Produktdokumentationten, die durch Attribute und Variationen geht Für die Seitengestaltung um die Swatches, unsere Zusammenrundung der Beste Elementor-Addons für WooCommerce Zeigt, wie man eine benutzerdefinierte Einzelproduktvorlage erstellt.
Schneller Vergleich: Beste WooCommerce Swatches Plugins
| Plugin | Aktive Installationen | Bewertung | Shop-Seiten-Swatches (kostenlos) | Am besten für |
|---|---|---|---|---|
| Master-Addons für Elementor | 30.000+ | 4,5 – 4 | n/a (Werkzeugkasten) | Aufbau der Produktseite selbst |
| Variation Swatches für WooCommerce (Emran Ahmed) | 300.000+ | 4,8 – 4 | Pro | Der sichere Standard-Pick |
| Variation Swatches für WooCommerce (CartFlows) | 200.000+ | 4,6 – 4 | Pro | Astra / CartFlows-Filialen |
| WCBoost Variation Swatches | 50.000+ | 4,8 – 4 | Ja | Schnelle No-Nag-Option |
| Produktvariations-Swatches (VillaTheme) | 10.000+ | 4.7 – 4 | Ja | Swatches + Galerie-Bildtausch |
| Variations-Swatches (RadiusTheme) | 10.000+ | 4.7 – 4 | Ja | Rundum mit Katalog-Swatches |
| WPC-Variations-Swatches | 7.000+ | 4.3 – 4 | Ja | WPClever Ökosystembenutzer |
| Intelligente Variationen Bilder und Swatches | 1.000+ | 4.7 – 4 | Partiell | Variationsbildvertauschung |
| Variation Swatches für WooCommerce (Woosuite) | 50.000+ | 3.7 3.7 | Ja | Langfristige kostenlose Katalog-Swatches |
1. Master Addons für Elementor (die Stiftung)
Lassen Sie mich im Voraus sein: Master-Addons für Elementor Ist kein Variation-Swatches-Plugin, und es sitzt immer noch auf Platz eins Hier ist die Logik Swatches verdienen ihren Keep nur auf einer Produktseite, die tatsächlich für den Verkauf gebaut ist, und auf dieser Seite kommt Master Addons rein Es ist das leichte Elementor-Toolkit, das die Vorlage entwirft, dann lässt jedes untenstehende Swatch-Plugin seine Farb - und Bildselektoren hineinfallen.
Auf 30.000+ Seiten verwendet und in Version 3 so umgebaut, dass es etwa 3 x schneller läuft, bietet Ihnen Master Addons eine vollständige Themenbauer Für benutzerdefinierte Einzelprodukt-, Shop- und Archivvorlagen. Anstatt also das Layout Ihres Themes zu akzeptieren, entwerfen Sie die Produktseite, fügen die Swatches hinzu und steuern genau, wo sie landen.
Warum es für einen Elementor-Shop an erster Stelle steht:
- Themenbauer Um das einzelne Produkt zu erstellen und Vorlagen zu kaufen, werden Ihre Swatches angezeigt
- Ausgewähltes Produkt-Widget Produkt, Preis und Add-to-Cart-Taste auf eine Zielseite zu legen
- Popup-builder Angebote zum Verkauf, Gutschein und Ausstiegsabsichten, die den Warenkorbwert heben
- Mega-Menü für eine kaufbare Navigation mit Produktkategorien
- 80+ Widgets und Erweiterungen In einem leichten Paket, so dass Sie nicht stapeln fünf Plugins, um eine Seite zu bauen
Installieren Sie dies zuerst, um den Store aufzubauen, und wählen Sie dann eines der folgenden Swatches-Plugins aus, um die Variationsanzeige zu verarbeiten. Durchsuchen Sie das Ganze Widgets und Erweiterungen Liste oder überprüfen Sie die PreisbildungUnd holen Sie sich die kostenlose Version aus dem WordPress.org Plugin Seite.
2. Variation Swatches für WooCommerce (von Emran Ahmed)
Dies ist das am häufigsten installierte Swatches-Plugin auf WordPress.org, mit 300.000+ aktiven Installationen und einer Bewertung von 4,8 aus mehr als 900 Bewertungen. Möchten Sie die Option, der die meisten Geschäfte bereits vertrauen? Starten Sie hier.
Beste Eigenschaften:
- Farb-, Bild- und Schaltflächen-/Etiketten-Swatch-Typen
- Attribut-Tooltips auf hover
- Pro-Attribut und pro Produkt-Swatch-Überschreibungen
- Kontrolle darüber, wie sich Abweichungen außerhalb des Lagerbestands verhalten, anklickbar oder verschwommen sind
- Breite Theme-Kompatibilität, so dass es auf den meisten WooCommerce-Themen ohne viel Aufhebens funktioniert
Die kostenlose Version geht gut mit der einzelnen Produktseite um Katalog - und Shop-Page-Swatches, plus Variation-Bildergalerien sind Teil des Pro-Upgrades Schnappen Sie es sich aus dem WordPress.org Plugin Seite.
3. Variation Swatches für WooCommerce (von CartFlows)
Dieser stammt vom Team hinter Astra und CartFlows, und er hat 200.000+ Installationen mit einer Bewertung von 4,6 aufgenommen Es ist leicht, sauber und ein einfacher Anruf, wenn Sie bereits andere Brainstorm Force-Produkte ausführen.
Beste Eigenschaften:
- Farb-, Bild-, Knopf-/Etikett- und Funk-Swatch-Typen
- Tooltips für Attribute
- Globales Styling mit Überschreibungen pro Attribut
- Leichter Code, der Ihrem Theme aus dem Weg geht
- Unterstützt von einem bekannten WordPress-Anbieter
Wenn Ihr Geschäft auf Astra läuft oder Sie mit CartFlows Trichter bauen, bleibt alles in einem Haus Installieren Sie es aus dem WordPress.org Plugin Seite.
4. WCBoost Variation Swatches
WCBoost ist die No-Nonsense-Auswahl, und es tut etwas, wofür die beiden größeren Plugins Sie bezahlen lassen: Es zeigt Swatches auf Shop- und Archivseiten in der kostenlosen Version an. Fügen Sie eine Bewertung von 4,8 hinzu und installieren Sie 50.000+ und es verdient seinen Platz.
Beste Eigenschaften:
- Farb-, Bild-, Tasten- und Funkschalter
- Tooltips zum Attribut-Hover
- Einstellbare Swatch-Form (gerundet oder quadratisch) und Größe
- Shop - und Archivseitenanzeige, kostenlos
- Keine ständigen Upsell-Nags im Admin
Für ein schnelles, sauberes Plugin, das Ihnen Katalog-Swatches ohne Paywall gibt, ist WCBoost einer der preiswertesten Picks auf dieser Liste Laden Sie ihn aus dem WordPress.org Plugin Seite.
5. Produktvariationen Swatches für WooCommerce (von VillaTheme)
VillaTheme ist schon lange im WooCommerce-Bereich und sein Swatches-Plugin kombiniert visuelle Selektoren mit Variationsbildaustausch. Klicken Sie auf eine Farbe und die Hauptgalerie wechselt zu den Fotos dieser Variation.
Beste Eigenschaften:
- Farb-, Bild-, Tasten-, Radio- und Dropdown-Swatch-Typen
- Tooltips für jedes Attribut
- Katalog- und Shop-Seiten-Swatches
- Variationsbildtausch in der Produktgalerie
- Styling-Steuerelemente pro Attribut
Wenn man Dinge verkauft, bei denen die Galeriefotos genauso wichtig sind wie der Swatch (Mode, Möbel, Kunstdrucke), ist dieser Bildtausch der Grund, ihn auszuwählen Holen Sie ihn sich aus dem WordPress.org Plugin Seite.
6. Variation Swatches für WooCommerce (von RadiusTheme)
Von RadiusTheme, den Leuten hinter The Post Grid und ShopBuilder, ist dies ein stetiger Allrounder mit 10.000+ Installationen und einer Bewertung von 4,7. Es deckt die Kern-Swatch-Typen ab und schiebt sie auch auf Katalogseiten.
Beste Eigenschaften:
- Farb-, Bild-, Tasten- und Funkschalter
- Attribut-tooltips
- Shop - und Archivseiten-Swatches
- Einstellungen pro Attribut und pro Produkt
- Unterstützt von einem aktiven WooCommerce-Plugin-Anbieter
Es ist eine zuverlässige Mittelwegwahl, und diese Einstellungen pro Produkt verdienen ihren Lebensunterhalt, wenn eine Handvoll Produkte anders gestaltete Swatches als die anderen benötigen Installieren Sie es aus dem WordPress.org Plugin Seite.
7. WPC Variation Swatches für WooCommerce
WPClever betreibt eine große Familie von WooCommerce-Plugins, und dieses Swatches-Plugin greift direkt ein Wenn Sie bereits WPC-Produkte wie Smart Compare oder Linked Variation verwenden, wird es sich wie zu Hause anfühlen.
Beste Eigenschaften:
- Farb-, Bild-, Schaltflächen- und Beschriftungs-Swatch-Typen
- Tooltip-unterstützung
- Swatch-Zuweisung auf Termebene
- Kleiner Fußabdruck
- Funktioniert mit der breiteren WPClever-Suite
Die Bewertung ist eine Nuance niedriger und die Bewertungsanzahl ist dünn, also testen Sie es bei der Inszenierung, bevor Sie es versenden Für WPClever-Benutzer ist es jedoch die offensichtliche Passung Laden Sie es aus dem herunter WordPress.org Plugin Seite.
8. Smart Variations Bilder & Swatches für WooCommerce
Dieser lehnt sich stark an Bilder an. Er zeigt, versteckt und tauscht automatisch Produktgaleriefotos basierend auf der Variation aus, die ein Käufer auswählt. Dies ist ideal, wenn der visuelle Unterschied zwischen Variationen die gesamte Tonhöhe beträgt.
Beste Eigenschaften:
- Bildausschnitte gebunden an Variationsfotos
- Automatische Galerieanzeige, - ausblendung und - austausch pro Variation
- Intelligentes Bild, das Attribute verknüpft
- Spielt schön neben einem anderen Swatch-Plugin, wenn man schon eines ausführt
- 142 Bewertungen bei einer Bewertung von 4,7, großes Engagement für seine Größe
Es geht weniger um Button-Styling, sondern mehr um die Reaktion der Galerie auf den Klick, wenn der Bildtausch bei Ihnen im Vordergrund steht, ist dies der Spezialist Holen Sie sich den von der WordPress.org Plugin Seite.
9. Variation Swatches für WooCommerce (von Woosuite)
Dies ist eines der ältesten Swatches-Plugins im Repository, das bereits 2017 gelistet wurde, und läuft immer noch in 50.000+ Filialen. Die Auslosung besteht aus kostenlosen Katalogseiten-Swatches und einem vollständigen Satz von Swatch-Typen ohne Upsell-Wand.
Beste Eigenschaften:
- Farb-, Bild-, Etiketten-/Text- und Radio-Swatches
- Tooltips für Attribute
- Archiv - und Katalogseiten-Swatches in der kostenlosen Version
- Konfiguration pro Attribut
- Eine lange Erfolgsbilanz in WooCommerce-Filialen
Eine ehrliche Einschränkung: seine Bewertung von 3,7 ist die schwächste hier, also überfliegen Sie die letzten Bewertungen und testen Sie es mit Ihrem Thema, bevor Sie sich darauf stützen Installieren Sie es aus dem WordPress.org Plugin Seite.
Auch einen Blick wert
Ein paar weitere sind auf WordPress.org und könnten für ein bestimmtes Setup geeignet sein, auch wenn sie die Hauptliste nicht geknackt haben. YITH-Farb- und Etikettenvariationen Gibt Ihnen kostenlos Farb - und Beschriftungs-Swatches und hält Bild-Swatches für Pro zurück. QODE-Variations-Swatches ist eine neuere, leichtere Option, die sich noch immer Bewertungen aufbaut.
So wählen Sie das richtige Swatches-Plugin aus
Ordnen Sie das Plugin dem zu, was Ihr Shop tatsächlich benötigt:
- Sie wollen die sicherste, am meisten getestete Variante: Variation Swatches für WooCommerce von Emran Ahmed.
- Sie möchten Shop-Seiten-Swatches ohne Bezahlung: WCBoost oder das Woosuite-Plugin.
- Ihre Galeriebilder verändern sich stark zwischen den Variationen: VillaThema oder Smart Variations Bilder.
- Sie leben im Astra/CartFlows - oder WPClever-Ökosystem: Wählen Sie das passende Plugin (CartFlows oder WPC).
Worauf auch immer Sie landen, behalten Sie die Leistung im Auge Swatch-Skripte erhöhen das Gewicht Ihrer Produktseiten, also kombinieren Sie sie mit den Tipps in unserem Leitfaden auf So beschleunigen Sie Elementor-Websites. Und wenn Ihre Produkte mehr als Swatches benötigen, denken Sie an benutzerdefinierte Felder, Add-ons oder Gravuren Extra Produktoptionen für WooCommerce Die an der Kasse festzuhalten.
Aufbau des Ladens um diese Swatches? Master Addons bleibt locker 80+ Widgets und Erweiterungenund seine Themenbauer Lassen Sie die einzelne Produktvorlage entwerfen, auf der Ihre Swatches sitzen Überprüfen Sie die Preisbildung Wenn Sie das ganze Toolkit wollen.
Häufig gestellte Fragen
Was ist das beste kostenlose WooCommerce Variation Swatches Plugin?
Variation Swatches for WooCommerce by Emran Ahmed ist die sicherste kostenlose Wahl, mit 300.000+ Installationen und einer Bewertung von 4,8. Wenn Sie Shop-Page-Swatches kostenlos benötigen, ist WCBoost Variation Swatches eine starke Alternative, die keine Katalog-Swatches hinter Pro gattert.
Wie füge ich Farbmuster in WooCommerce hinzu?
Installieren Sie ein Swatches-Plugin, gehen Sie zu Produkte > Attribute, erstellen Sie ein Color-Attribut und setzen Sie für jeden Term einen Hex-Wert. Fügen Sie dann das Attribut zu einem variablen Produkt hinzu und generieren Sie Variationen. Der Dropdown wird zu einer Reihe anklickbarer Farbmuster, kein Code erforderlich.
Kann ich Variations-Swatches ohne Plugin hinzufügen?
Nicht einfach.wooCommerce hat keine integrierte swatch-option, also bräuchten sie benutzerdefinierten code und css, um die dropdowns selbst zu konvertieren ein dediziertes swatches-plugin macht es mit ein paar klicks und bleibt kompatibel durch wooCommerce-updates, weshalb fast jeder store eine.
Werden Variations-Swatches auf Shop - und Kategorieseiten angezeigt?
Es kommt auf das Plugin an Viele zeigen Swatches nur auf der einzelnen Produktseite in ihrer kostenlosen Version an WCBoost, VillaTheme, RadiusTheme, und das Woosuite Plugin zeigen sie kostenlos auf Shop - und Archivseiten an, während andere das für Pro speichern.
Wird ein Swatches-Plugin meinen Store verlangsamen?
Ein gut gebautes fügt nur wenig CSS und JavaScript hinzu Leichte Optionen wie WCBoost halten die Auswirkungen gering Führen Sie nicht zwei Swatch-Plugins auf einmal aus und überprüfen Sie Ihre Seitengeschwindigkeit vor und nach der Installation, damit Sie wissen, wo Sie stehen.
Einpacken
Das beste WooCommerce-Variations-Swatches-Plugin für Ihren Shop besteht eigentlich aus zwei Fragen: Benötigen Sie Shop-Seiten-Swatches kostenlos und wie stark ändern sich Ihre Galeriebilder zwischen den Variationen? Für die meisten Geschäfte sind Variation-Swatches für WooCommerce von Emran Ahmed der sichere Anfang, WCBoost ist der beste kostenlose Weg, Swatches zu katalogisieren, und VillaTheme oder Smart Variations Images gewinnen, wenn die Fotos verkauft werden.
Installieren Sie ein paar der kostenlosen Versionen, testen Sie sie anhand Ihres Themas und behalten Sie die passende Version. Dann bauen Sie den Laden um sie herum auf: Entdecken Sie das Ganze Master Addons Widgets und Erweiterungen Oder schneller mit fertig beginnen Vorlagenkits.
Verwandte Lektüre: Beste Elementor-Addons für WooCommerce, Zusätzliche Produktoptionen für WooCommerce, und 100 beste Elementor-Addons.
