Käufer, die WooCommerce-Produkte nach Farbe filtern möchten, stoßen in den meisten Shops auf die gleiche Hürde. Sie landen auf der Shop-Seite, sehen ein gemischtes Raster aller verfügbaren Farben und haben keine Möglichkeit, die Auswahl einzugrenzen, ohne jeden einzelnen Produkt anzuklicken.
WooCommerce enthält standardmäßig keinen Farbfilter für die Shop-Seite. Ohne einen zeigt Ihr Produkt-Raster alles auf einmal an, und ein Kunde, der nach einer bestimmten Farbe sucht, muss durch jedes einzelne Angebot scrollen, um es zu finden.
Ein Farbfilter löst dieses Problem, indem er es Käufern ermöglicht, eine Farbe anzuklicken und sofort nur die passenden Produkte anzuzeigen. Wir haben gesehen, dass diese einzelne Ergänzung Kunden länger auf der Seite hält und die Frustration reduziert, die sie zu einem Mitbewerber treibt.
In diesem Artikel zeigen wir Ihnen, wie Sie Ihrer WooCommerce-Shop eine Farbfilter hinzufügen, ohne eine einzige Zeile Code schreiben zu müssen.
Warum einen Farbfilter zu Ihrem WooCommerce-Shop hinzufügen?
Aus unserer Erfahrung verlieren Shops, die Produkte in mehreren Farben verkaufen, die meisten Verkäufe durch genau dieses Problem. Ein Käufer mit einer bestimmten Farbe im Sinn gibt auf, wenn das Raster ihn zwingt, danach zu suchen.
Stellen Sie es sich wie ein Bekleidungsgeschäft vor, in dem jedes Hemd, unabhängig von der Farbe, an derselben Stange hängt, ohne Möglichkeit zur Sortierung. Niemand möchte hundert gemischte Optionen durchsehen, um das eine rote Hemd zu finden, für das er gekommen ist.
Dies ist am wichtigsten für Geschäfte, die Kleidung, Heimdekoration, Accessoires oder Produkte verkaufen, bei denen die Farbe ein entscheidender Faktor ist. Wenn Kunden ihre Farbe nicht schnell finden können, gehen sie, und dieser Verkauf geht woanders hin.
Das Hinzufügen eines Farbfilters bringt die richtigen Produkte in Sekundenschnelle vor die richtigen Kunden. Vor diesem Hintergrund wollen wir uns ansehen, wie Sie einen in Ihren Shop einfügen.
Einen Farbfilter zu WooCommerce hinzufügen
Der einfachste Weg, einen Farbfilter zu WooCommerce hinzuzufügen, ist die Verwendung eines Plugins wie WPFilters.
WPFilters ist das beste Filter-Plugin für WordPress, entwickelt vom selben Team hinter SearchWP. Es ermöglicht Ihnen, Amazon-ähnliche Filter zu jedem WooCommerce-Shop hinzuzufügen, ohne eine einzige Zeile Code schreiben zu müssen.
WPFilters zieht Ihre Farbwerte direkt aus Ihren WooCommerce-Produktattributen und wandelt sie in klickbare Filteroptionen auf der Shop-Seite um. Sie können den Farbfilter auch mit anderen Filtertypen wie einem Preisregler, Kategorie-Checkboxes oder einem Stichwort-Suchfeld kombinieren, um ein noch präziseres Einkaufserlebnis zu erzielen.
Hier sind einige Dinge, die Sie mit WPFilters tun können:
- Nach beliebigen Produktattributen filtern: Farbwerte direkt aus Ihrem WooCommerce-Farbattribut ziehen und als Checkboxen anzeigen, die Kunden auswählen können.
- Mehrere Anzeigeformate: Farboptionen als Checkboxes, Dropdown oder Radio-Liste anzeigen, um zum Design Ihres Shops zu passen.
- Mit anderen Filtern kombinieren: Stapeln Sie den Farbfilter neben einem Größen-, Marken- oder Preisfilter, damit Kunden Ergebnisse aus mehreren Blickwinkeln gleichzeitig eingrenzen können.
- Sofortige AJAX-Aktualisierung: Das Produkt-Raster aktualisiert sich in dem Moment, in dem ein Kunde eine Farbe auswählt, ohne dass die Seite neu geladen werden muss.
Lassen Sie uns nun durchgehen, wie Sie einen Farbfilter in Ihrem WooCommerce-Shop einrichten.
Schritt 1: WPFilters installieren und aktivieren
Zuerst müssen Sie die SearchWP-Website besuchen und sich für ein WPFilters-Konto anmelden.
Sobald Sie ein Konto haben, melden Sie sich in Ihrem Kontobereich an und gehen Sie zum Tab Downloads.
Klicken Sie dann auf die Schaltfläche WPFilters herunterladen, um die ZIP-Datei des Plugins auf Ihrem Computer zu speichern. Wir empfehlen außerdem, Ihren Lizenzschlüssel von dieser Seite zu kopieren, da Sie ihn während der Einrichtung benötigen werden.
Laden Sie als Nächstes das Plugin auf Ihre WordPress-Seite hoch und installieren Sie es. Wenn Sie dies noch nicht getan haben, sehen Sie sich diese Anleitung an, wie man ein WordPress-Plugin installiert.
Nach der Aktivierung des Plugins erscheint der Einrichtungsassistent. Klicken Sie einfach auf die Schaltfläche Los geht's und folgen Sie den Anweisungen auf dem Bildschirm, um die Einrichtung abzuschließen.
WPFilters ist einsatzbereit! Bereiten wir nun Ihre WooCommerce-Produktdaten vor.
Schritt 2: Farbattribut in WooCommerce einrichten
Bevor Sie den Filter erstellen können, benötigen Sie ein Far product attribute, das in WooCommerce eingerichtet ist. WPFilters bezieht seine Werte direkt aus Ihren Produktattributen, daher ist dies ein erforderlicher Schritt, wenn Sie ihn noch nicht durchgeführt haben.
Hinweis: Wenn Sie bereits ein Farbattribut mit Begriffen haben, die Ihren Produkten zugewiesen sind, können Sie zu Schritt 3 springen.
Gehen Sie zunächst im WordPress-Dashboard zu Produkte » Attribute und fügen Sie Ihre Attribute hinzu.
Schritt-für-Schritt-Anleitungen finden Sie in dieser Anleitung, wie man Produkt-Tags, Attribute und Kategorien in WooCommerce richtig einrichtet.
Schritt 3: Ein Far Filter-Element in WPFilters erstellen
Navigieren Sie nun im WordPress-Dashboard zu WPFilters » Elemente und klicken Sie auf die Schaltfläche Neu hinzufügen.
Als Nächstes können Sie Ihrem Filter oben im Editor einen Namen geben, z. B. Filter nach Farbe.
Danach müssen Sie zum Abschnitt Filterfelder gehen und die Option Kontrollkästchen auswählen. Dies erstellt eine Liste von Kontrollkästchen für jede Farbe, die Kunden auswählen können, um das Produktgitter einzugrenzen.
Von hier aus können Sie zum Abschnitt Datenquelle scrollen und auf das Dropdown-Menü klicken.
Wählen Sie unter dem Abschnitt WooCommerce das in den vorherigen Schritt erstellte Attribut Produktfarbe (pa_color) aus. WPFilters ruft automatisch alle Ihre Farb-Begriffe ab und fügt sie dem Filter hinzu.
Schritt 4: Einstellungen für den Farbfilter anpassen
Nachdem die Datenquelle verbunden ist, können Sie feinabstimmen, wie der Filter für Ihre Käufer aussieht und sich verhält.
Scrollen Sie zum Abschnitt Container und aktivieren Sie den Schalter Titel anzeigen, um eine Beschriftung über den Kontrollkästchen anzuzeigen, und aktivieren Sie Einklappbar, wenn Besucher das Filter-Widget ausblenden können sollen, um Platz auf Mobilgeräten zu sparen.
Scrollen Sie als Nächstes zum Abschnitt Elemente.
Hier zeigt die Aktivierung der Option Elementanzahl den Kunden, wie viele Produkte für jede Farbe verfügbar sind, damit sie schnellere Entscheidungen treffen können.
Wenn Sie fertig sind, scrollen Sie nach oben und klicken Sie auf die Schaltfläche Speichern.
Sie sehen eine Live-Vorschau des Filters im linken Bereich.
Schritt 5: Fügen Sie den Farbfilter zu Ihrem WooCommerce-Shop hinzu
Nachdem Sie Ihren Filter gespeichert haben, besteht der letzte Schritt darin, ihn in Ihrem Shop zu platzieren. Wir empfehlen, ihn zum Widget-Bereich der Seitenleiste hinzufügen, wo er sichtbar bleibt, während Kunden scrollen, und zum Standard-WooCommerce-Layout passt.
Gehen Sie zunächst in Ihrem WordPress-Dashboard zu Darstellung » Widgets. Beachten Sie, dass dieser Schritt je nach verwendetem Theme anders aussehen kann.
Von hier aus müssen Sie den Seitenleistenbereich finden, den Ihre Shop-Seite verwendet (normalerweise WooCommerce-Seitenleiste), und auf die Schaltfläche + klicken, um einen neuen Block hinzuzufügen. Suchen Sie dann nach WPFilters Element und fügen Sie das Widget hinzu.
Sobald Sie den WPFilters Element-Widget-Block hinzugefügt haben, können Sie Ihre Farbfilter auswählen.
Öffnen Sie im Bereich Element-Einstellungen auf der rechten Seite das Dropdown-Menü Element auswählen und wählen Sie den Filter „Nach Farbe filtern“ aus.
Wenn Sie fertig sind, klicken Sie auf Aktualisieren.
Besuchen Sie nun Ihre Shop-Seite und testen Sie den Filter. Wählen Sie die Farbe Anthrazit und bestätigen Sie, dass nur Produkte im Raster angezeigt werden, die die zugewiesene Farbe haben.
FAQs zum Hinzufügen von Farbfiltern
1. Ruft WPFilters meine Farbwerte automatisch aus WooCommerce ab?
Ja. Sobald Sie den Filter mit Ihrem WooCommerce-Farbproduktattribut verbinden, ruft WPFilters automatisch alle Ihre Farb-Terme ab und zeigt jeden als Kontrollkästchen-Option an. Sie müssen die Farben nicht manuell im Plugin eingeben.
2. Kann ich den Farbfilter mit einem Preis- oder Kategorie-Filter kombinieren?
Ja. Sie können separate Filterelemente für Preis, Kategorie, Größe oder jedes andere Attribut in WPFilters erstellen und sie alle zur selben Seitenleiste hinzufügen. Kunden können dann Ergebnisse aus mehreren Blickwinkeln gleichzeitig eingrenzen, z. B. nach Rot und einer Preisspanne unter 50 € filtern.
3. Funktioniert der Farbfilter mit variablen WooCommerce-Produkten?
Ja. WPFilters funktioniert mit allen Standard-WooCommerce-Produkttypen, einschließlich variabler Produkte. Wenn ein Kunde nach einer Farbe filtert, zeigt WPFilters jedes Produkt an, das eine Variante hat, die dieser Farbe entspricht, auch wenn andere Variationen in verschiedenen Farben verfügbar sind.
4. Können Kunden mehr als eine Farbe gleichzeitig auswählen?
Ja. Der Feldtyp „Kontrollkästchen“ ermöglicht es Kunden, mehrere Farben gleichzeitig auszuwählen. Wenn ein Kunde sowohl Blau als auch Schwarz auswählt, zeigt WPFilters alle Produkte an, die in einer der beiden Farben erhältlich sind. Wechseln Sie zum Feldtyp „Radio“, wenn Sie Kunden auf eine Auswahl gleichzeitig beschränken möchten.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie WooCommerce-Produkte nach Farbe filtern können. Möglicherweise möchten Sie auch unsere Anleitungen zum Filtern von WooCommerce-Produkten nach Attributen und zum Filtern von WooCommerce-Produkten nach Tags lesen.
Sind Sie bereit, Ihren Kunden eine schnellere Möglichkeit zu bieten, Produkte nach Farbe zu finden? Sie können hier mit WPFilters loslegen.
