WooCommerce Produktvergleich: Tabellen nebeneinander

Wer sich zwischen drei ähnlichen Produkten entscheidet, stößt auf eine kleine, aber sehr reale Hürde. Preise, technische Daten und Lagerbestände muss man im Kopf behalten, während man zwischen den Seiten hin- und herklickt, oder man öffnet für jeden Kandidaten einen eigenen Tab und vergleicht sie mühsam mit den Augen. So oder so findet der Vergleich außerhalb Ihres Shops statt, im Arbeitsgedächtnis oder in einem Wust an Browser-Tabs, und genau dort versanden überlegte Käufe leise. Der Produktvergleich beseitigt diese Hürde, indem er die Kandidaten in einer einzigen Tabelle nebeneinander stellt, auf der Seite, auf der die Schaltfläche zum Warenkorb bereits liegt. Dieser Leitfaden erklärt, was der Produktvergleich in WooCommerce ist, warum er bei überlegten Käufen wichtig ist, was ein gutes Vergleichswerkzeug wirklich braucht und wie das kostenlose Plugin Versus genau das ergänzt.

Was der Produktvergleich ist

Der Produktvergleich ist eine Funktion, mit der Kundinnen und Kunden mehrere Produkte sammeln und gemeinsam in einer einzigen Tabelle nebeneinander betrachten können. Statt jedes Produkt in einem eigenen Tab zu öffnen und Preise, Eigenschaften und Verfügbarkeit mit bloßem Auge abzugleichen, sehen sie alle Kandidaten in Spalten aufgereiht, mit einer Zeile pro Information: das Bild, der Name, der Preis, die Artikelnummer, die Angabe, ob das Produkt vorrätig ist, eine kurze Beschreibung und eine Zeile für jede Produkteigenschaft wie Farbe, Größe oder Material.

Dieses Format leistet etwas, das eine Produktseite allein nicht kann. Eine Produktseite verkauft ein einzelnes Produkt gut, beantwortet aber die Frage schlecht, die ein vergleichender Kunde eigentlich stellt. Diese Frage lautet nicht “ist das gut?”, sondern “welches davon ist das richtige für mich?”. Eine Vergleichstabelle richtet die Seite an genau dieser Frage aus: Die Zeilen, auf die es ankommt, stehen direkt nebeneinander, die Werte unterscheiden sich sichtbar von Spalte zu Spalte, und die Wahl wird zu einem Blick statt zu einer Gedächtnisübung.

Warum er zählt

Der Vergleich ist vor allem bei überlegten Käufen wichtig: Elektronik, Werkzeuge, Haushaltsgeräte, alles mit technischen Daten, die die Entscheidung eher bestimmen als der Geschmack allein. Bei einem Spontankauf vergleicht niemand, da landet das Produkt direkt im Warenkorb. Bei einem überlegten Kauf wird immer verglichen, und die einzige Frage ist wo. Bietet Ihr Shop keine Möglichkeit dazu, geschieht es an einer Stelle, auf die Sie keinen Einfluss haben: über mehrere Tabs verteilt, in einer Tabellenkalkulation, auf der Seite eines Wettbewerbers, der eine Vergleichstabelle hat, oder im Kopf, während die Aufmerksamkeit abwandert.

Den Vergleich in Ihrem Shop zu halten, hat drei Effekte. Die Entscheidung bleibt auf der Seite, sodass die Schaltfläche zum Warenkorb nur einen Klick entfernt ist, sobald sich die Kundin entschieden hat. Die Unterschiede werden in Ihrer Darstellung präsentiert, mit den Zeilen, die Sie zeigen möchten. Und die Mühe des Vergleichens sinkt weit genug, dass mehr Menschen den Vergleich zu Ende führen, statt ihn halb fertig abzubrechen. Nichts davon erfordert Rabatte oder Überredung, es entfernt schlicht die Fleißarbeit zwischen “an mehreren interessiert” und “auf eines festgelegt”.

Hinweis: Bietet Ihr Shop keine Möglichkeit zum Vergleich, tun es die Kundinnen und Kunden an einer Stelle, auf die Sie keinen Einfluss haben: über mehrere Tabs verteilt, in einer Tabellenkalkulation oder auf der Seite eines Wettbewerbers, der eine Vergleichstabelle hat.

Was ein gutes Vergleichswerkzeug braucht

Nicht jedes Vergleichswerkzeug ist gleich gebaut, und ein nachlässiges kann mehr kosten, als es einbringt. Nutzen Sie das Folgende als Checkliste, egal ob Sie selbst entwickeln, kaufen oder installieren:

• Eine übersichtliche Tabelle nebeneinander. Bild, Name, Preis, Artikelnummer, Verfügbarkeit und eine kurze Beschreibung, dazu eine Zeile für jede Produkteigenschaft, sodass die Unterschiede auf einen Blick erkennbar sind und nichts Wichtiges untergeht.
• Hervorhebung von Unterschieden. Zeilen mit abweichenden Werten sollten hervorstechen, idealerweise mit einer Umschaltung, die alles ausblendet, was die Produkte gemeinsam haben, sodass nur die entscheidenden Faktoren auf dem Bildschirm bleiben.
• Eine sinnvolle Obergrenze für Produkte. Eine Tabelle, die unbegrenzt wächst, wird auf dem Smartphone unleserlich. Eine konfigurierbare Obergrenze hält die Spalten überschaubar.
• Unterstützung für Gäste und Kunden. Auch nicht angemeldete Besucher sollten einen Vergleich aufbauen können, und diese Liste sollte ihnen beim Anmelden ins Konto folgen, statt zu verschwinden.
• Keine Leistungseinbußen. Der Vergleich sollte nicht auf jeder Shop-Listenseite umfangreiches JavaScript laden. Reines JavaScript ohne jQuery-Abhängigkeit, das nur dort geladen wird, wo es gebraucht wird, hält den Shop schnell.
• Barrierefreiheit. Die Vergleichselemente sollten echte Schaltflächen mit korrektem Zustand sein, per Tastatur bedienbar, und Änderungen sollten an assistive Technologien gemeldet werden, statt stillschweigend zu geschehen.
• Daten, die bleiben, wo sie sind. Ein Vergleich besteht aus Produktdaten aus Ihrem eigenen Katalog. Diese haben auf einem fremden Server nichts verloren.

Beachten Sie, was nicht auf dieser Liste steht: Cleverness. Eine Vergleichstabelle braucht keine Animationen oder Spielereien. Sie muss korrekt, schnell und lesbar sein und dann aus dem Weg gehen, sobald die Kundin sich entschieden hat.

Wie Versus das umsetzt

Versus for WooCommerce ist ein kostenloses Vergleichs-Plugin mit offenem Quellcode (GPLv2), das um genau diese Eigenschaften herum aufgebaut ist. Es ergänzt eine Vergleichsschaltfläche in den Shop- und Archiv-Listen Ihres WooCommerce sowie auf der Produktseite, und von dort aus bauen Kundinnen und Kunden eine Vergleichstabelle nebeneinander auf, wobei alle Produktdaten in Ihrem Shop bleiben.

Die Vergleichstabelle im Shop stellt die Kandidaten in Spalten, sodass Kundinnen und Kunden die Unterschiede auf einen Blick erfassen.

Die Tabelle zeigt Produktbild, Name, Preis, Artikelnummer, Verfügbarkeit und Kurzbeschreibung, dazu eine Zeile für jede Produkteigenschaft wie Farbe, Größe oder Material. Zeilen mit zwischen den Produkten abweichenden Werten werden hervorgehoben, und eine einzige Umschaltung blendet alles aus, was identisch ist, sodass die tatsächlichen Unterschiede hervorstechen. Der Vergleich selbst öffnet sich für angemeldete Kunden im Tab “Vergleich” unter Mein Konto oder unter einer eigenen Vergleichs-URL für Gäste.

Gäste und Kunden

Ein nicht angemeldeter Besucher baut einen Vergleich auf, der in einem First-Party-Cookie im eigenen Browser gespeichert und sechs Monate lang aufbewahrt wird, sodass er den Shop verlassen und zurückkehren kann, ohne seine Auswahl zu verlieren. Ein angemeldeter Kunde erhält einen Tab “Vergleich” unter Mein Konto. Meldet sich ein Gast an, wird die Gästeliste mit dem Konto zusammengeführt, sodass ein vor der Anmeldung begonnener Vergleich nicht an der Tür verworfen wird. Der Gästevergleich lässt sich vollständig abschalten, falls Sie ihn nur für Kontoinhaber anbieten möchten.

Hinweis: Meldet sich ein Gast an, wird seine Liste mit dem Konto zusammengeführt, sodass ein vor der Anmeldung begonnener Vergleich nicht an der Tür verworfen wird.

Auf Geschwindigkeit und Barrierefreiheit ausgelegt

Das Frontend-Skript des Plugins ist reines JavaScript ohne jQuery-Abhängigkeit, verzögert geladen im Footer, und CSS sowie JavaScript werden nur auf Seiten eingebunden, auf denen die Vergleichsschaltfläche oder die Tabelle tatsächlich erscheint. Das heißt, der Vergleich zieht keine Skript-Bibliothek auf jede Seite des Shops. Die Vergleichstabelle scrollt horizontal in ihrem eigenen Container, sodass zusätzliche Spalten nie den Seitenaufbau verschieben und keine Layoutverschiebung verursachen. Die Vergleichselemente sind echte Schaltflächen mit einem aria-pressed-Zustand, der über AJAX aktualisiert wird, eine Live-Region (aria-live=“polite”) meldet Änderungen am Vergleich an Screenreader, und die Schaltflächen sind vollständig per Tastatur bedienbar mit sichtbarem Fokus.

Das Hinzufügen oder Entfernen eines Produkts ist eine einzelne, per Nonce abgesicherte AJAX-Anfrage an Ihre eigene Seite, ohne vollständigen Seiten-Reload. Der Aufbau berücksichtigt auch die unscheinbaren Fälle: Er schützt vor doppeltem Absenden, aktualisiert die Tabelle nach dem Entfernen automatisch, verhält sich bei einem Netzwerkfehler gnädig und zeigt freundliche Ersatzanzeigen für fehlende Daten.

Die Einrichtung

Den Vergleich live zu schalten, dauert nur wenige Minuten:

1. Installieren Sie Versus über Plugins → Installieren, oder laden Sie es nach /wp-content/plugins/versus hoch. WooCommerce muss installiert und aktiv sein.
2. Aktivieren Sie es.
3. Öffnen Sie das Versus-Menü im wp-admin, um die zu vergleichenden Felder und die Position der Schaltfläche zu wählen.
4. Das war es. Die Vergleichsschaltfläche erscheint nun auf Ihren Shop- und Produktseiten, und Kundinnen und Kunden können den Vergleich von dort aus öffnen.

Die Versus-Einstellungsseite im wp-admin, auf der Sie die verglichenen Felder, die Position der Schaltfläche und die Obergrenze von 2 bis 6 Produkten festlegen.

Die Einstellungsseite läuft über eine WooCommerce-Berechtigung und trägt an jeder Einstellung eine eingebettete ”?”-Hilfe, angebunden über aria-describedby, sodass Sie während der Konfiguration nicht parallel in der Dokumentation nachschlagen müssen. Von dort aus können Sie:

• Den Vergleich aktivieren oder deaktivieren und festlegen, wie viele Produkte sich gleichzeitig vergleichen lassen, zwischen 2 und 6.
• Wählen, wo die Vergleichsschaltfläche erscheint, in den Listen und auf der Produktseite, und ob Gäste sie nutzen dürfen.
• Wählen, welche Standardfelder als Zeilen erscheinen, also Preis, Artikelnummer, Verfügbarkeit und Kurzbeschreibung, und ob Produkteigenschaften einbezogen werden.
• Die Hervorhebung von Unterschieden umschalten, die Ansicht nur für Unterschiede als Standard festlegen und die Bild-, Warenkorb- und Entfernen-Elemente in jeder Spaltenüberschrift steuern.
• Die Frontend-Texte anpassen, also Vergleichsschaltfläche, Entfernen-Schaltfläche, Vergleichslink, Unterschiede-Umschaltung, Alles-leeren-Schaltfläche und die Meldung für eine leere Liste, oder sie auf ihren übersetzten Standardwerten belassen.

Alle Texte sind über die Textdomain versus übersetzbar, und eine Vorlage versus.pot liegt in /languages. Die Tabelle selbst lässt sich über CSS-Eigenschaften (Custom Properties) gestalten, mit fließender Größenanpassung, Unterstützung für den Dunkelmodus und reduzierte Bewegung sowie einem freundlichen Leerzustand, solange noch nichts hinzugefügt wurde. Beim Löschen des Plugins werden seine Optionen entfernt und die Vergleichstabelle sauber abgebaut.

Wo Ihre Daten liegen

Versus stellt keine ausgehende HTTP-Anfrage und bündelt kein SDK, keine Web-Schrift, kein CDN-Asset und keinen Analyse-Aufruf. Die IDs der verglichenen Produkte liegen in einer eigenen Tabelle in Ihrer eigenen Datenbank, die Einstellungen in einer WordPress-Option und die Auswahl eines Gastes in jenem First-Party-Cookie im eigenen Browser. Das Hinzufügen oder Entfernen eines Produkts ist ein Same-Origin-AJAX-Aufruf an Ihre eigene admin-ajax.php. Für eine Funktion, die jedes Produkt im Katalog berührt, ist es die richtige Voreinstellung, die Daten auf der eigenen Seite statt auf einem fremden Server zu halten.

Praktische Tipps für einen Vergleich, der konvertiert

Das Plugin liefert den Mechanismus, ein paar Entscheidungen sorgen dafür, dass er seine Aufgabe erfüllt:

• Halten Sie die Obergrenze niedrig bei Produkten mit vielen Eigenschaften. Sechs Spalten sind auf dem Desktop in Ordnung, auf dem Smartphone aber beengt. Eine Obergrenze von drei oder vier hält jede Spalte breit genug zum Lesen.

Tipp: Bei eng beieinanderliegenden Produkten ist die Ansicht nur für Unterschiede die nützlichste Einstellung überhaupt: Sie bringt die Kundin direkt zu dem, was sich zwischen den Produkten ändert, statt zu den Zeilen, die über alle identisch sind.

• Zeigen Sie nur die Zeilen, die den Kauf entscheiden. Jede Zeile ist eine weitere Sache, die gescannt werden muss. Preis, Verfügbarkeit und die zwei oder drei Eigenschaften, die die Produkte tatsächlich voneinander abheben, leisten meist mehr als jede jemals definierte Eigenschaft.
• Setzen Sie auf die Hervorhebung von Unterschieden. Die Voreinstellung “nur Unterschiede” sorgt dafür, dass die Kundin direkt bei dem landet, was sich zwischen den Produkten ändert, nicht bei den Zeilen, die über alle identisch sind. Bei eng beieinanderliegenden Produkten ist das die nützlichste Einstellung überhaupt.
• Räumen Sie zuerst Ihre Eigenschaften auf. Eine Vergleichstabelle ist nur so gut wie die Produktdaten dahinter. Uneinheitliche Eigenschaftsnamen oder fehlende Werte zeigen sich sofort als Lücken, daher lohnt es sich, die Eigenschaften aufzuräumen, bevor Sie den Vergleich einschalten.

Warnung: Eine Vergleichstabelle ist nur so gut wie die Produktdaten dahinter. Uneinheitliche Eigenschaftsnamen oder fehlende Werte zeigen sich sofort als Lücken, räumen Sie also Ihre Eigenschaften auf, bevor Sie den Vergleich einschalten.

• Weisen Sie Kundinnen und Kunden darauf hin. Eine kurze Zeile auf den Kategorieseiten, etwa “Vergleichen Sie diese nebeneinander”, macht aus der Vergleichsschaltfläche einen naheliegenden nächsten Schritt statt eines Elements, das niemand bemerkt.

Versus im Vergleich zu Standard-WooCommerce

WooCommerce verfügt über keinen integrierten Produktvergleich. Hier der Unterschied speziell für den Vergleich:

Funktion	Standard-WooCommerce	Versus
Vergleichstabelle nebeneinander	Nicht integriert	Bild, Preis, Artikelnummer, Verfügbarkeit, Kurzbeschreibung, Eigenschaften
Hervorhebung von Unterschieden	Nicht vorhanden	Ja, mit Umschaltung nur für Unterschiede und optionaler Voreinstellung
Platzierungen der Vergleichsschaltfläche	Nicht vorhanden	Shop- und Archiv-Listen sowie Produktseite, je einzeln umschaltbar
Vergleichslisten für Gäste	Nicht vorhanden	Ja, First-Party-Cookie für sechs Monate, beim Anmelden zusammengeführt
Vergleichsliste für Kunden	Nicht vorhanden	Vergleich-Tab unter Mein Konto
Produkt-Obergrenze	Nicht vorhanden	Konfigurierbar 2 bis 6
Konfigurierbare Zeilen und Beschriftungen	Nicht vorhanden	Felder wählbar, jeder Frontend-Text anpassbar
Frontend-Abhängigkeit	jQuery in vielen Themes	Reines JavaScript, kein jQuery, verzögert, nur dort geladen, wo gebraucht
Barrierefreiheit	entfällt	Echte Schaltflächen, aria-pressed, Live-Bereich, per Tastatur bedienbar
Externe Aufrufe	entfällt	Keine, Daten bleiben in Ihrer eigenen Datenbank
Kosten	Kostenlos (im Kern nicht vorhanden)	Kostenlos; PRO ergänzt Shortcode, fixierte Leiste, Export, Kategorievergleich

Kostenlos im Vergleich zu PRO

Die kostenlose Edition ist eine vollständige Vergleichsfunktion, kein Lockmittel: Vergleichsschaltfläche, Tabelle nebeneinander, Hervorhebung von Unterschieden, Gäste- und Kundenlisten, die Obergrenze von 2 bis 6, konfigurierbare Felder und anpassbare Beschriftungen sind allesamt enthalten. Versus Pro ist eine Erweiterung für Shops, die mehr Kontrolle darüber wünschen, wie und wo der Vergleich erscheint. Sie setzt voraus, dass das kostenlose Versus-Plugin installiert und aktiv ist, und wird über Freemius statt über das WordPress.org-Verzeichnis vertrieben.

PRO ergänzt einen Seiten-Shortcode [versus_compare], der den aktuellen Vergleich der Kundin als vollständige Tabelle mit erweiterten Zeilen rendert, einschließlich Gewicht und Abmessungen neben Preis, Artikelnummer, Lagerbestand, Beschreibung und Eigenschaften, direkt gespeist von den Vergleichsschaltflächen des kostenlosen Plugins. Es ergänzt konfigurierbare Vergleichszeilen unter Produkte → Versus Pro, eine fixierte Vergleichsleiste, die am unteren Rand von Shop-, Kategorie- und Produktseiten schwebt und direkt zum Vergleich verlinkt, den Export der Tabelle als CSV, PDF und Druck sowie einen auf Kategorien beschränkten Vergleich, der einen Vergleich auf Produkte derselben WooCommerce-Produktkategorie begrenzt, sodass Kundinnen und Kunden nur Gleiches mit Gleichem nebeneinanderstellen. Diese Funktionen sind ausschließlich in PRO verfügbar und bauen auf dem kostenlosen Fundament auf.

Die Kurzfassung

Der Produktvergleich verwandelt eine mühselige Aufgabe über viele Tabs und von Hand in eine einzige Tabelle nebeneinander in Ihrem Shop und verhindert so, dass überlegte Käufe an eine Stelle abwandern, auf die Sie keinen Einfluss haben. Ein gutes Vergleichswerkzeug braucht eine übersichtliche Tabelle, die Hervorhebung von Unterschieden, eine sinnvolle Obergrenze, Unterstützung für Gäste und Kunden, Barrierefreiheit und keine Leistungseinbußen, wobei die Daten auf der eigenen Seite bleiben. Das kostenlose Versus-Plugin liefert all das: eine Vergleichsschaltfläche und -tabelle in reinem JavaScript, die nur dort geladen wird, wo sie gebraucht wird, die hervorhebt, was sich unterscheidet, die für Gäste und Kunden gleichermaßen funktioniert und jede Produkt-ID in Ihrer eigenen Datenbank behält. PRO ergänzt einen Shortcode für die Vergleichsseite, eine fixierte Leiste, den Export und einen kategoriebezogenen Vergleich, wenn Sie noch weiter gehen möchten.