Plugin Variation Swatches for WooCommerce Pro - 2.3.0

Variation Swatches for WooCommerce – Pro ist eine kostenpflichtige Erweiterung des Plugins von Emran Ahmed (GetWooPlugins), die die Dropdown-Listen zur Variantenauswahl in einem WooCommerce-Shop durch anklickbare Muster ersetzt – Farbe, Bild, Button und Radio. Die Pro-Version fügt Swatches in der Produktliste, zweifarbige Muster und Gruppierung hinzu.

Farb-, Bild-, Button- und Radio-Swatches statt Dropdowns

Variation Swatches for WooCommerce – Pro ersetzt die standardmäßigen Dropdown-Listen zur Variantenauswahl durch anklickbare Muster in einem von vier Typen: Farbe, Bild, Button/Label und Radio. Der Typ wird global auf Attributebene oder separat pro Produkt festgelegt. Die Swatches erscheinen in runder oder eckiger Form, mit einem Text- oder Bild-Tooltip.

Vier Swatch-Typen und ihre Einstellung pro Attribut oder pro Produkt

Jedes für Varianten verwendete Attribut lässt sich als einer von vier Swatch-Typen darstellen. Der globale Typ wird in den Attributeinstellungen festgelegt (Products → Attributes). Die Pro-Version geht weiter und ermöglicht es, diese Wahl für ein einzelnes Produkt zu überschreiben.

• Farb-Swatches – ein einzelnes Feld, das mit der dem Variante zugewiesenen Farbe (Hex) gefüllt ist, am häufigsten in Modeshops verwendet.
• Bild-Swatches – eine Miniaturansicht des Fotos oder der Textur anstelle des Variantennamens, gut lesbar bei Stoffen und Mustern.
• Button-Swatches – ein Textlabel in Form eines Buttons, naheliegend für Größen wie S, M, L.
• Radio-Swatches – ein klassisches Einfachauswahlfeld für Attribute, die keine Grafik benötigen.

Nach der Aktivierung ersetzt das Plugin die Dropdown-Listen sofort durch Buttons. Die genaue Festlegung des Typs auf Farbe oder Bild ist eine Frage von zwei Einstellungen. In der Pro-Version können innerhalb eines Produkts unterschiedliche Typen vorkommen – Größe als Radio und Farbe als Bild im selben Variable Product.

Form, Größe und Tooltips der Swatches

Die Swatches erscheinen in runder oder eckiger Form, die global eingestellt wird, wobei die Pro-Version das Mischen beider Formen innerhalb eines Produkts erlaubt. Die Größe der Swatches – Höhe, Breite und Schriftgröße – wird separat für die Produktseite gesteuert. In der Pro-Version zusätzlich unabhängig davon für die Produktliste.

Beim Überfahren einer Swatch mit der Maus erscheint ein Tooltip. Die Basisversion bietet einen Text-Tooltip, die Pro-Version fügt einen Bild-Tooltip mit größerer Vorschau hinzu – nützlich dort, wo der Kunde vor der Auswahl die Materialstruktur sehen möchte.

Kennzeichnung nicht verfügbarer Varianten (Kreuz, Weichzeichnung, Ausblenden)

Als nicht verfügbar gekennzeichnete Varianten stellt das Plugin in einem von drei Modi dar: Durchstreichen mit einem Kreuz, Weichzeichnung der Swatch oder vollständiges Ausblenden. Der Kunde sieht dann, dass eine bestimmte Farbe oder Größe existiert, aber vorübergehend ausverkauft ist – oder sieht sie je nach Einstellung gar nicht.

Hinweis: Die kostenlose Version unterstützt die Kennzeichnung nicht verfügbarer Varianten bis zu 30 Varianten pro Produkt. Variation Swatches for WooCommerce – Pro hebt diese Grenze auf. In Katalogen mit einer großen Anzahl an Kombinationen wird jede nicht verfügbare Variante korrekt gekennzeichnet.

Swatches auf der Shop-Seite, in der Quick View und Gruppierung der Varianten

Variation Swatches for WooCommerce – Pro zeigt Swatches nicht nur auf der Produktseite, sondern auch in der Produktliste – auf der Shop-Seite, in Kategorien und in den Suchergebnissen –, sodass der Kunde die Variante bereits beim Durchstöbern auswählt. Die Pro-Version fügt außerdem Swatches in der Quick View, zweifarbige Muster, die Gruppierung von Varianten sowie den Link „MORE” hinzu, der die Anzahl der Muster in der Liste begrenzt.

Anzeige der Swatches im Archiv und Auswahl eines einzelnen Attributs

Die Anzeige der Muster auf Archiv-, Shop- und Kategorieseiten ist die wichtigste Funktion, die von der Pro-Version freigeschaltet wird. Standardmäßig zeigt WooCommerce Varianten erst auf der Produktseite an. Hier sieht der Kunde die verfügbaren Farben bereits in der Liste und klickt sie an, ohne jedes Produkt einzeln aufrufen zu müssen.

Im Archiv lassen sich entweder alle Attribute oder nur ein hervorgehobenes anzeigen – zum Beispiel nur die Farbe, was das Raster übersichtlich hält. Bei Produkten mit vielen Varianten begrenzt der Link „MORE” die Anzahl der sichtbaren Muster und führt zur vollständigen Liste. Die in der Liste ausgewählte Variante bleibt auch nach dem Aufruf der Produktseite markiert.

Zweifarbige Swatches und Gruppierung bei einer großen Anzahl an Varianten

Zweifarbige Swatches (Dual/Multi Color) zeigen zwei Farben in einer Swatch, diagonal im 45-Grad-Winkel geteilt. Diese Lösung eignet sich für zweifarbige, gestreifte und Farbverlauf-Produkte – ein Nischenfall, den nur wenige Plugins nativ unterstützen.

Die Gruppierung der Swatches (Color Groups) ordnet die Muster bei einer großen Anzahl an Varianten in Kategorien. Die Gruppeneinstellungen befinden sich im Abschnitt GetWooPlugins. Dieser Mechanismus hilft, die Übersichtlichkeit dort zu bewahren, wo mehrere Dutzend Farben in einer Reihe sonst zu einem einzigen Fleck verschwimmen würden.

Quick View, Galeriewechsel nach Farbauswahl und Link zur Variante

Die Swatches funktionieren auch in Quick-View-Popups – zum Beispiel im Vorschaufenster, das im Theme Flatsome integriert ist –, sodass der Kunde die Variante auswählt, ohne die Liste zu verlassen. Die Produktgalerie reagiert auf die Auswahl eines einzelnen Attributs, ähnlich wie bei Amazon oder AliExpress: Ein Klick allein auf die Farbe wechselt die Fotos, ohne dass die vollständige Variantenkombination zusammengestellt werden muss.

Die Pro-Version generiert außerdem einen direkten Link zur ausgewählten Variantenkombination. Eine solche Adresse führt direkt zu einer bestimmten Farbe und Größe und lässt sich fertig an den Kunden senden oder teilen.

Was die Pro-Version gegenüber der kostenlosen Version freischaltet

Die Pro-Version von Variation Swatches for WooCommerce – Pro wird neben dem kostenlosen Plugin installiert und ergänzt es um Swatches auf der Shop-Seite, Quick View, Dual Color, Gruppierung sowie die Aufhebung der 30er-Grenze für nicht verfügbare Varianten aus der kostenlosen Version. Sie bringt außerdem eine vollständige Personalisierung pro Produkt mit – das Überschreiben der globalen Farbe, das Ändern des Swatch-Typs und das Mischen von Typen innerhalb eines Attributs.

Die 30er-Grenze für ausverkaufte Varianten in der Pro-Version aufgehoben

In der kostenlosen Version funktioniert die Kennzeichnung nicht verfügbarer Varianten – per Kreuz, Weichzeichnung oder Ausblenden – bis zu 30 Varianten pro Produkt. Oberhalb dieser Zahl wird ein Teil der Kombinationen nicht korrekt gekennzeichnet.

Die Pro-Version hebt diese Grenze vollständig auf. In Shops mit Produkten in vielen Farben und Größen übersteigt die Anzahl der Kombinationen leicht 30, und dann wird jede nicht verfügbare Variante in der gesamten Liste einheitlich dargestellt.

Personalisierung pro Produkt und Mischen von Swatch-Typen

Die Personalisierung pro Produkt erlaubt es, die globalen Einstellungen für ein einzelnes Produkt zu überschreiben. Eine global definierte Farbe oder ein Bild lässt sich durch eine andere ersetzen, der Swatch-Typ lässt sich nur für dieses eine Produkt ändern, und es lassen sich unterschiedliche Muster-Typen innerhalb eines Attributs anzeigen.

Das ist die Antwort auf die Situation, in der der Großteil des Katalogs die globalen Einstellungen nutzt, einzelne Produkte jedoch eine Ausnahme benötigen – einen anderen Farbton, ein Bild statt einer Farbe oder die Hervorhebung eines Attributs durch eine größere Darstellung.

Was das Plugin nicht macht (kein Optionskonfigurator und keine Aufpreise)

Variation Swatches for WooCommerce – Pro ist eine Präsentationsebene für Varianten, kein Produktkonfigurator. Das Plugin fügt weder Textfelder noch Aufpreise für Optionen noch eine Preislogik hinzu, die einer einzelnen Swatch zugeordnet wäre – dafür dienen Lösungen der Klasse „WooCommerce Product Options”.

Es funktioniert außerdem ausschließlich bei variablen Produkten mit Attributen, die als für Varianten verwendet eingestellt sind. Bei einfachen Produkten gibt es keine Dropdown-Liste, die sich durch Swatches ersetzen ließe.

Für welche Shops Swatches am meisten Sinn ergeben

Variation Swatches for WooCommerce – Pro bewährt sich am besten in Bekleidungs- und Schuhgeschäften, bei Stoffen und Polstermöbeln, bei zweifarbigen Produkten sowie in großen Katalogen, in denen der Kunde Listen durchstöbert und Farben sehen möchte, ohne jede Produktseite einzeln aufzurufen. Es funktioniert ausschließlich bei variablen WooCommerce-Produkten – bei einfachen Produkten gibt es nichts zu ersetzen.

Mode, Stoffe und zweifarbige Produkte

In Bekleidungs- und Schuhgeschäften zeigen Farb-Swatches und Größenlabels das gesamte Angebot auf einmal, und die Pro-Version überträgt die Farbmuster auch auf die Produktliste. Bei Stoffen, Polstermöbeln und Oberflächen geben Bild-Swatches die tatsächliche Materialstruktur wieder statt einer Bezeichnung wie „Graphit meliert”, und der Bild-Tooltip bietet eine größere Vorschau.

Zweifarbige Produkte sind eine eigene Nische – Schnürsenkel, Accessoires oder Verpackungen in Kombinationen aus zwei Farben. Die Dual-Color-Funktion zeigt beide Farben in einer Swatch. Das löst das Problem, eine Variante „Schwarz-Rot” als ein einziges anklickbares Element darzustellen.

Große Kataloge mit Durchstöbern in der Produktliste

In umfangreichen Katalogen, in denen der Kunde hauptsächlich Kategorien durchstöbert, verkürzen Swatches im Archiv den Weg zur Variantenauswahl. Die Anzeige nur eines Attributs (zum Beispiel der Farbe), der Link „MORE” bei Produkten mit vielen Varianten sowie das Beibehalten der Auswahl nach Aufruf der Produktseite halten die Liste übersichtlich.

Dieses Szenario umfasst auch Multi-Vendor- und Print-on-Demand-Shops – die erklärte Kompatibilität mit Dokan, Printful und AliDropship erweitert die Funktion der Swatches auf Marketplace und Dropshipping. Unter den Lösungen dieser Kategorie legt die Pro-Version dieses Entwicklers besonderen Wert auf die Interaktion mit den Mustern in der Produktliste sowie auf Dual Color und Gruppierung.

Wann die kostenlose Version ausreicht und wann Swatches nicht sinnvoll sind

Werden Swatches ausschließlich auf der Produktseite benötigt – ohne Archiv, Quick View, Dual Color, Gruppierung und mit nicht mehr als 30 nicht verfügbaren Varianten –, deckt die kostenlose Version den Bedarf, und die Pro-Version wäre überdimensioniert.

Für wen Variation Swatches for WooCommerce – Pro am besten geeignet ist:

• Bekleidungs- und Schuhgeschäfte mit Produkten in vielen Farben und Größen.
• Shops mit Stoffen, Polstermöbeln und Oberflächen, bei denen die Materialstruktur zählt.
• Shops mit zweifarbigen und mehrfarbigen Produkten.
• Große Kataloge, in denen der Kunde die Variante beim Durchstöbern der Liste auswählt.
• Agenturen und Umsetzer, die ein Plugin mit breiter Theme-Kompatibilität suchen.

Für wen Variation Swatches for WooCommerce – Pro nicht die beste Wahl ist:

• Shops ohne variable Produkte, die ausschließlich auf einfachen Produkten basieren.
• Shops, die einen Optionskonfigurator mit Textfeldern und Aufpreisen für Optionen benötigen.
• Shops, denen Swatches nur auf der Produktseite genügen (dann reicht die kostenlose Version).

Integrationen mit Buildern, Mehrsprachigkeit und WooCommerce-Plugins

Variation Swatches for WooCommerce – Pro arbeitet mit Elementor zusammen (mit eigenem Tutorial), mit der Mehrsprachigkeit WPML (Datei wpml-config.xml ab Version 2.1.0) und Polylang sowie mit FacetWP, das Produkte nach einem Attribut mit Farb-Swatch filtert. Erklärt wird außerdem die Kompatibilität mit Dokan, Printful, AliDropship sowie WooCommerce Product Bundles und Composite Products.

Elementor und Theme-Kompatibilität

Das Plugin erklärt die Kompatibilität mit Elementor, und der Hersteller stellt ein eigenes Tutorial zur Konfiguration der Swatches auf mit diesem Builder erstellten Seiten bereit. Der Changelog verzeichnet außerdem Kompatibilitätskorrekturen mit Elementor Pro und dem Divi Builder.

Bei den Themes nennt der Hersteller eine umfangreiche Liste: OceanWP, Astra, Flatsome, Avada, Storefront, Divi, WoodMart, Enfold, The7 und über hundert weitere. Bei Themes, die stark vom WooCommerce-Standard abweichen, kann ein kleiner CSS-Tweak oder das Überschreiben eines Templates erforderlich sein.

WPML, Polylang und mehrsprachige Shops

Die Kompatibilität mit WPML wird erklärt, und ab Version 2.1.0 liefert das Plugin die Datei wpml-config.xml zur Unterstützung der Übersetzung. Der Hersteller stellt eine Konfigurationsanleitung bereit, die String Translation und Custom Term Meta Translation umfasst. In der Praxis erfordert die Konfiguration der Attributübersetzungen das Setzen der Felder auf „Copy” und das Leeren des Caches.

Polylang wird in Übersichten mehrsprachiger Plugins als kompatibel aufgeführt. Ein Detail sollte man im Hinterkopf behalten: Die Umrechnung von Attribut-Aufpreisen in mehreren Währungen (WPML Multicurrency) erweist sich mitunter als unzuverlässig – siehe FAQ-Bereich.

FacetWP, Dokan, Printful und weitere Integrationen

FacetWP unterstützt dieses Plugin auf seiner Seite: Ein Facet vom Typ „Color” filtert Produkte nach einem Attribut mit Farb-Swatch, und die FacetWP-Dokumentation beschreibt die Unterstützung von Dual Color und Color Groups. Für Multi-Vendor- und Print-on-Demand-Shops wird die Kompatibilität mit Dokan, Printful und AliDropship erklärt.

Der Changelog verzeichnet außerdem zahlreiche Kompatibilitätskorrekturen mit WooCommerce Product Bundles und Composite Products sowie ab Version 2.3.0 mit YITH WooCommerce Waitlist. Das Plugin harmoniert mit gängigen Cache-Ebenen, darunter LiteSpeed Cache und WP Rocket.

Technische Anforderungen und Kompatibilität

Variation Swatches for WooCommerce – Pro benötigt WordPress 5.9 oder neuer, WooCommerce 8.5 oder neuer sowie PHP 7.4 oder neuer und setzt für den Betrieb das installierte und aktive kostenlose Basis-Plugin voraus, auf dem es aufbaut. Es unterstützt Multisite, HPOS und REST API, funktioniert in der Quick View und ist mit den wichtigsten Themes sowie mit Elementor kompatibel.

WordPress-, WooCommerce- und PHP-Versionen

Der Hersteller gibt als Minimum WordPress 5.9, WooCommerce 8.5 und PHP 7.4 an. Der Changelog bestätigt die aktuelle Kompatibilität mit dem Stack bis WordPress 7.0+ und WooCommerce 10.8+, sodass das Plugin mit den neuesten Plattform-Versionen Schritt hält.

Benötigtes kostenloses Basis-Plugin und Funktion als Erweiterung

Die Pro-Version ist kein eigenständiges Paket – sie wird neben dem kostenlosen Plugin woo-variation-swatches installiert und setzt dessen Aktivierung voraus. Beide Versionen müssen gleichzeitig aktiviert sein: Die kostenlose Version liefert den grundlegenden Swatch-Mechanismus, und die Pro-Version fügt darauf aufbauend Premium-Funktionen hinzu.

Das ist ein wichtiges Detail beim Kauf. Die Pro-Version allein funktioniert nicht, wenn das kostenlose Basis-Plugin nicht installiert und aktiv ist.

Multisite, HPOS und Theme-Kompatibilität

Das Plugin erklärt die Unterstützung von Multisite, die Kompatibilität mit HPOS (High-Performance Order Storage) ab Version 2.0.19 sowie die Unterstützung der REST API, einschließlich des Caches einzelner Produkte. Es funktioniert in Quick-View-Popups und ist auf Swatches im Archiv vorbereitet.

Hinweis zu Themes: Die Swatches werden korrekt angezeigt, sofern das Theme dem WooCommerce-Standard entsprechend codiert ist. Bei stark individualisierten Themes kann ein kleiner CSS-Tweak oder das Überschreiben des Templates content-product.php erforderlich sein.

Häufig gestellte Fragen