Plugin-Konfiguration
Schriftlicher Setup-Umfang für Shop, Theme und vorhandenen Plugin-Stack.
Konfiguration anfragenKostenlos, Open Source
Swatch
Variations-Swatches statt Dropdowns
Swatch ersetzt die standardmäßigen Variations-Dropdowns von WooCommerce durch visuelle, barrierefreie Swatches auf der Produktseite. Wählen Sie je Attribut einen Swatch-Typ, Farbpunkte oder Button- bzw. Beschriftungs-Pills, und legen Sie je Begriff eine Farbe oder Beschriftung fest. Die Swatches steuern das native Variationsformular, sodass Preis, Bestand und Warenkorb wie gewohnt aktualisiert werden.
Open Source GPLv2
Open Source, GPL-lizenziertKein Konto, keine KreditkarteKein jQuery, per Tastatur bedienbar
Funktioniert mit
WooCommerceGutenbergStorefrontAstraGeneratePressKadenceMultisite-kompatibel
So sieht es in der Praxis aus
Variations-Dropdowns sind schwer zu erfassen
Wer eine Farbe oder Größe aus einem Dropdown wählt, sieht nicht, wie die Variation aussieht. Das verlangsamt die Entscheidung und lässt den Shop weniger hochwertig wirken als Mitbewerber, die Swatches einsetzen.
- ✗ Farben und Größen versteckt in einem Dropdown
- ✗ Kundinnen und Kunden sehen die Variation vor der Wahl nicht
- ✗ Swatch-Plugins laden oft jQuery nach und bremsen den Shop
- ✗ Swatches ohne Tastatur- oder Screenreader-Unterstützung
Swatch zeigt Variationen als barrierefreie Swatches
- ✓ Farb- und Button- bzw. Beschriftungs-Swatches statt Dropdowns
- ✓ Swatch-Typ je Attribut unabhängig wählbar
- ✓ Natives Variationsformular, Preis, Bestand und Warenkorb wie gewohnt
- ✓ Darstellung in reinem JavaScript ohne jQuery
Das bietet die kostenlose Version
Alles, was Sie brauchen, um Variationen als Swatches anzuzeigen.
Farb- und Button-Swatches
Zwei Swatch-Typen, Farbpunkte und Button- bzw. Beschriftungs-Pills, je Attribut wählbar.
Typ je Attribut
Wählen Sie den Swatch-Typ auf der Seite für globale Attribute, unabhängig für jedes Attribut.
Farbe und Beschriftung je Begriff
Farbe gespeichert über sanitize_hex_color, eine eigene Beschriftung gespeichert als Term-Meta.
Natives Variationsformular
Swatches steuern das WooCommerce-Formular, Preis, Bestand und der Button zum Warenkorb-Hinzufügen aktualisieren sich wie bei den Dropdowns.
Per Tastatur bedienbar
Radiogroup-Semantik und Navigation per Pfeiltasten, mit Beschriftungen für Screenreader.
Barrierefreie Optik
Sichtbare Fokusringe, ausreichender Kontrast, rücksichtsvoll bei reduzierter Bewegung und ohne Layout-Verschiebung.
Sauberer Fallback
Ein Attribut ohne Swatch-Daten behält das Standard-Dropdown, nichts geht je kaputt.
Einstellungsseite
Aktivieren bzw. Deaktivieren und Standard-Swatch-Typ im WooCommerce-Menü.
In drei Schritten einsatzbereit
Swatches aktivieren und die erste Variation auf der Produktseite anzeigen.
01
Installieren
Aktivieren Sie Swatch zusammen mit WooCommerce.
02
Typen festlegen
Wählen Sie unter WooCommerce > Swatch den Standardtyp und legen Sie dann auf der Seite für globale Attribute einen Typ je Attribut fest.
03
Farben zuweisen
Legen Sie unter Produkte > Attribute für jeden Begriff eine Farbe oder Beschriftung fest und öffnen Sie dann die Seite eines variablen Produkts.
Für wen es gedacht ist
Wenn Produkte Farb- und Größenvariationen haben, eine klare Auswahl ohne schweres Plugin.
Mode und Bekleidung
Farben und Größen auf einen Blick sichtbar, kein Raten aus einem Dropdown.
- ✓ Farb-Swatches
- ✓ Größen-Beschriftungen
- ✓ Kein jQuery
Shops mit vielen Variationen
Swatch-Typ je Attribut, Farbe als Punkt, Größe als Beschriftung.
- ✓ Typ je Attribut
- ✓ Term-Meta
- ✓ Natives Formular
Shops ohne jQuery
Ein kleines Skript, das sich in Variationsereignisse einklinkt, statt einer Bibliothek auf jeder Seite.
- ✓ Reines JS
- ✓ ARIA-Radiogroup
- ✓ Null CLS
Was PRO ergänzt, und warum es zählt
Bildvarianten
Laden Sie je Attributbegriff ein Bild hoch, das auf der Produktseite als Miniaturansicht angezeigt wird.
Galerie pro Variation
Zusaetzliche Galeriebilder je Variation mit einem Miniaturstreifen unterhalb der Hauptgalerie.
Varianten in Archivseiten
Zeigen Sie Auswahlfelder in Shop-, Kategorie-, Schlagwort- und Suchlisten an, mit Verlinkung zum Produkt und zur gewaehlten Option.
Ausfuehrliche Tooltips
Zeigen Sie eine Vorschau des Farbfelds, der Bezeichnung oder des Variantenbilds beim Ueberfahren mit der Maus und bei Tastaturfokus auf Produkt- und Archivseiten.
Individuelle Groessen und Formen
Kleine oder grosse Auswahlfelder sowie runde, eckige, abgerundete oder Pillenformen je globalem Attribut.
Was du bekommst: FREE oder PRO
PRO behält alles aus dem kostenlosen Plugin und ergänzt die Module unten.
FunktionFREEPRO
Farb- und Button-Swatches✓✓
Typ je Attribut✓✓
Farbe und Beschriftung je Begriff✓✓
Natives Variationsformular✓✓
Per Tastatur bedienbar✓✓
Barrierefreie Optik✓✓
Sauberer Fallback✓✓
Einstellungsseite✓✓
Bildvarianten×✓
Galerie pro Variation×✓
Varianten in Archivseiten×✓
Ausfuehrliche Tooltips×✓
Individuelle Groessen und Formen×✓
Swatch vs Variation Swatches vs YITH Color & Label Variations
Wie Swatch im Vergleich zu den beliebten WooCommerce-Plugins für Variations-Swatches abschneidet.
| Swatch | Variation Swatches | YITH Color & Label | |
|---|---|---|---|
| Kostenlose Version | Ja | Ja | Ja |
| Farb- und Button-/Label-Swatches | Ja | Ja | Ja |
| Swatch-Typ pro Attribut | Ja | Ja | - |
| Farbe oder Label pro Begriff | Ja | Ja | Ja |
| Nutzt das native Variationsformular (kein Umbau) | Ja | - | - |
| Barrierefrei per Tastatur und Screenreader | Ja | - | - |
| Kein jQuery (schlank) | Ja | - | - |
| Open Source (GPLv2) | Ja | GPL-Kern | GPL-Kern |
| Preis des kostenpflichtigen Plans | ab €19/Jahr | $49/Jahr | Kostenlos + Premium |
Wettbewerberdaten und Preise Stand Juni 2026; aktuelle Preise auf den Websites der Anbieter prüfen.
Mehr nötig? Swatch PRO
FREE deckt Farb- und Button- bzw. Beschriftungs-Swatches ab. Swatch PRO ergänzt Bild-Swatches und Galeriestreifen je Variation.
- ✓ Bild-Swatches je Begriff (verfügbar)
- ✓ Galeriebilder je Variation (verfügbar)
- ✓ Archiv-Swatches in Shop-Schleifen (in PRO verfügbar)
- ✓ Reichhaltige Tooltips bei Hover und Fokus (in PRO verfügbar)
- ✓ Eigene Größen und Formen je Attribut (in PRO verfügbar)
Support und Ressourcen
Jedes Plugin hat eine eigene Dokumentation mit Einrichtungsanleitungen. Fehler und Fragen gehen in das öffentliche GitHub-Repository des jeweiligen Plugins, wir antworten offen.
Wartungsstatus
Dieses Plugin wird gepflegt. Wir haben kein Support-Ende angekündigt, und sobald wir das tun, steht es hier und in einem Release.
Benötigen Sie Hilfe über das Plugin hinaus?
Senden Sie den Shop-Kontext schriftlich. Sie erhalten einen Umfangsvorschlag ohne Verkaufsgespräch.
Kompatibilitätsprüfung
Prüfung mit Checkout, HPOS, Blocks, Theme und kritischen Integrationen.
Prüfung anfragenIndividuelle Integration
Ein definierter Connector oder eine Erweiterung für Ihren eigenen Prozess.
Integration beschreibenIhre E-Mail wird nur zur Beantwortung dieser Anfrage verwendet. Marketing erfordert eine separate ausdrückliche Einwilligung.
Häufig gestellte Fragen
Wird WooCommerce benötigt?
Ja. Swatch erweitert variable Produkte von WooCommerce und tut ohne WooCommerce nichts.
Was passiert mit Attributen, die ich nicht konfiguriert habe?
Sie behalten das Standard-Dropdown von WooCommerce. Farb-Swatches ohne gesetzte Farben greifen automatisch auf das Dropdown zurück, sodass nichts je kaputtgeht.
Verwendet Swatch jQuery?
Nein. Das Frontend ist reines JavaScript, das sich in die eigenen Variationsereignisse von WooCommerce einklinkt.
Sind die Swatches per Tastatur bedienbar?
Ja. Swatches nutzen Radiogroup-Semantik, funktionieren mit den Pfeiltasten und sind für Screenreader beschriftet.
Wo lege ich Farbe und Beschriftung fest?
Unter Produkte > Attribute, an jedem Begriff eines globalen Attributs. Die Farbe wird über sanitize_hex_color gespeichert und die Beschriftung als Term-Meta.
Ändern Swatches Preis und Bestand?
Ja. Swatches steuern das native Variationsformular von WooCommerce, sodass Preis, Bestand und der Button zum Warenkorb-Hinzufügen sich genauso aktualisieren wie bei Dropdowns.
Welche Swatch-Typen sind verfügbar?
Farbpunkte und Button- bzw. Beschriftungs-Pills, unabhängig für jedes Attribut wählbar.
Lässt sich Swatch mit Sizer und Shortlist kombinieren?
Ja. Sizer ergänzt eine Größentabelle auf der Produktseite und Shortlist eine Wunschliste. Swatch ergänzt die Variationsauswahl mit klaren Swatches.
Wie schneidet Swatch im Vergleich zu Variation Swatches und YITH Color & Label Variations ab?
Alle drei verwandeln Variations-Dropdowns in Farb- und Label-Swatches. Swatch nutzt das native Variationsformular, ist per Tastatur barrierefrei und kommt ohne jQuery aus, kostenlos und Open Source mit PRO ab 29 €/Jahr, gegenüber Variation Swatches Pro zu 49 $/Jahr. Preise Stand Juni 2026.
Variationen als Swatches anzeigen
Farb- und Beschriftungs-Swatches statt Dropdowns, barrierefrei und ohne jQuery. Die vollständige FREE-Edition unter GPL.
Auf WordPress.org holenFREE bietet vollständige Farb- und Beschriftungs-Swatches, PRO ergänzt Bild-Swatches, Galerien je Variation und Vorschauen in der Archiv-Schleife.