Online-Shopping sollte sich einfach anfühlen. Aber wenn ein Geschäft Dutzende oder Hunderte von Produkten auf einer einzigen Seite zusammengepfercht hat, fühlt sich das Finden des richtigen Artikels eher wie das Durchwühlen eines Kleiderstapels auf einem Flohmarkt an, als wie das Stöbern in einem gut organisierten Geschäft.
Das ist ein Problem, auf das viele WooCommerce-Shop-Besitzer stoßen. Die Produkte sind alle da, der Shop sieht gut aus, aber die Kunden finden trotzdem nicht schnell genug, was sie brauchen.
Und wenn das passiert, gehen sie. Ein Dropdown-Filter behebt dies, indem er es den Käufern ermöglicht, Produkte nach Kategorie, Größe, Farbe, Preis oder jedem anderen Attribut mit nur einem Klick einzugrenzen.
In diesem Tutorial zeigen wir Ihnen, wie Sie einen Dropdown-Filter für WooCommerce-Produkte erstellen.
Warum Ihr WooCommerce-Shop einen Dropdown-Filter benötigt
Stellen Sie sich vor, Sie betreten ein Bekleidungsgeschäft, in dem nichts organisiert ist. Hemden, Hosen, Schuhe und Jacken sind alle auf demselben Kleiderständer gemischt. Sie suchen eine blaue Jacke in Größe Medium, aber der einzige Weg, sie zu finden, ist, jeden einzelnen Artikel einzeln durchzugehen. Die meisten Leute würden sofort wieder gehen.
Genau das passiert in einem WooCommerce-Shop ohne Dropdown-Filter.
Wenn Kunden auf Ihrer Shop-Seite landen und eine Wand von Produkten ohne Sortiermöglichkeit sehen, macht sich schnell Frustration breit.
Sie wollen nicht zehn Seiten mit Artikeln durchklicken, nur um das eine zu finden, für das sie gekommen sind. Die meisten werden sich nicht die Mühe machen. Sie werden den Tab schließen und bei einem Konkurrenten kaufen, dessen Shop einfacher zu navigieren ist.
Wir haben dies in Geschäften beobachtet, die großartige Produkte, aber schlechte Filterfunktionen haben. Der Traffic ist da, aber die Verkäufe stimmen nicht überein. Kunden landen auf der Shop-Seite und verlassen sie, ohne etwas zu kaufen. Ein Dropdown-Filter ist oft das fehlende Stück.
Hier ist, was Dropdown-Filter zu einer so praktischen Lösung macht. Sie bieten den Käufern eine saubere, vertraute Möglichkeit, die Ergebnisse einzugrenzen.
Anstatt 200 Produkte zu durchsuchen, kann ein Kunde ein Dropdown öffnen, „Groß“, „Rot“ oder „Unter 50 €“ auswählen und sofort nur die Produkte sehen, die übereinstimmen. Es ist die Art von Erlebnis, die Leute länger auf Ihrer Website hält und sie näher an die Kasse bringt.
Ohne dies lassen Sie viele Verkäufe liegen. Und die gute Nachricht ist, dass die Einrichtung keinen Entwickler oder technisches Know-how erfordert. Sehen wir uns an, wie Sie Ihrem WooCommerce-Shop ganz einfach einen Dropdown-Filter hinzufügen können.
So zeigen Sie einen Dropdown-Filter in WooCommerce an
Der einfachste Weg, einen Dropdown-Filter zu WooCommerce hinzuzufügen, ist die Verwendung eines Plugins wie WPFilters.
WPFilters ist das beste Filter-Plugin für WordPress, mit dem Sie Amazon-ähnliche Filter zu Ihrem WooCommerce-Shop hinzufügen können, ohne eine einzige Zeile Code zu schreiben.
Es wird vom selben Team entwickelt, das auch hinter SearchWP steht, daher wissen wir, dass es zuverlässig funktioniert und Ihre Produktdaten effizient verarbeitet.
Mit WPFilters können Sie Dropdown-Menüs erstellen, mit denen Kunden Produkte nach Kategorie, Tag, Produktattribut oder einer beliebigen benutzerdefinierten Taxonomie filtern können. Sie können Dropdown-Filter auch mit anderen Filtertypen wie Preisreglern, Kontrollkästchen oder einer Stichwortsuchleiste kombinieren.
Einige der Dinge, die Sie mit WPFilters tun können:
- Erstellen Sie Dropdown-Filter für Produktkategorien, Tags, Attribute und benutzerdefinierte Felder
- Mehrere Filter zusammen in der Seitenleiste oder über dem Produktgitter anzeigen
- Passen Sie Beschriftungen, Platzhaltertext und Anzeigeoptionen an, ohne Code zu berühren
- Filtern Sie Ergebnisse in Echtzeit ohne Seitenneuladung
Lassen Sie uns nun durchgehen, wie Sie einen Dropdown-Filter in Ihrem WooCommerce-Shop einrichten.
Schritt 1: WPFilters installieren und aktivieren
Als Erstes müssen Sie die Website von SearchWP besuchen und sich für ein WPFilters-Konto anmelden. Sobald Sie Ihr Konto erstellt haben, melden Sie sich an und klicken Sie auf die Registerkarte Downloads in Ihrem Kontodashboard.
Klicken Sie von dort 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.
Als Nächstes müssen Sie das Plugin auf Ihrer WordPress-Site hochladen und installieren. Wenn Sie dies noch nie zuvor getan haben, können Sie dieser Anfängeranleitung folgen, wie Sie ein WordPress-Plugin installieren.
Sobald das Plugin aktiv ist, erscheint der WPFilters-Einrichtungsassistent auf Ihrem Bildschirm. Klicken Sie auf die Schaltfläche ‘Los geht’s’ .
Jetzt können wir mit der Erstellung Ihres ersten Dropdown-Filters fortfahren.
Schritt 2: Ein neues Filterelement hinzufügen
Jetzt, da WPFilters läuft, ist es an der Zeit, Ihren Dropdown-Filter zu erstellen.
Navigieren Sie dazu in Ihrem WordPress-Dashboard zu WPFilters » Elemente und klicken Sie auf die Schaltfläche Neu hinzufügen .
Oben auf dem Bildschirm sehen Sie ein Feld, in dem Sie Ihrem Filter einen Namen geben können.
Es ist ratsam, hier etwas Beschreibendes zu verwenden, wie z. B. „Produktkategorien“ oder „Nach Tags filtern“, insbesondere wenn Sie später weitere Filter hinzufügen möchten. Ein klarer Name erleichtert die Organisation erheblich.
Als Nächstes können Sie den Abschnitt Filterfelder direkt unter dem Namen betrachten. Hier wählen Sie aus, wie der Filter in Ihrem Shop aussehen und funktionieren soll.
WPFilters bietet Ihnen hier mehrere Optionen, darunter Kontrollkästchen, Optionsfelder, Schieberegler und mehr.
Da wir einen Dropdown-Filter erstellen, wählen Sie die Option Dropdown .
Sie werden feststellen, dass eine Live-Vorschau des Filters im rechten Bereich angezeigt wird, sobald Sie Ihre Einstellungen speichern.
Schritt 3: Den Filter mit einer WooCommerce-Datenquelle verbinden
Nachdem der Dropdown-Filtertyp ausgewählt wurde, besteht der nächste Schritt darin, WPFilters mitzuteilen, woher es seine Informationen abrufen soll. Dies ist das, was den Filter für Ihre Käufer tatsächlich nützlich macht.
Scrollen Sie zum Abschnitt Datenquelle und klicken Sie auf das Dropdown-Menü. Sie sehen eine Liste der verfügbaren Datenquellen, aus denen Sie wählen können. Da wir mit einem WooCommerce-Shop arbeiten, sollten Sie eine WooCommerce-spezifische Option aus der Liste auswählen.
Sie können zum Beispiel Produktkategorien auswählen, wenn Kunden nach Kategorie filtern sollen, oder Produkt-Tags, wenn Sie Ihre Produkte mit Tags versehen haben.
Sie können auch bestimmte Produktattribute wie Farbe, Größe oder Material auswählen, wenn Sie diese in WooCommerce eingerichtet haben.
Sobald Sie dies getan haben, ruft WPFilters automatisch die relevanten Daten ab und verbindet sie mit Ihrem Dropdown-Filter.
Schritt 4: Einstellungen für den Dropdown-Filter anpassen
Nachdem Ihr Filter nun mit einer Datenquelle verbunden ist, ist es an der Zeit, ihn genau richtig für Ihren Shop aussehen und sich anfühlen zu lassen. WPFilters bietet Ihnen eine gute Auswahl an Anpassungsoptionen, ohne Sie mit Einstellungen zu überfordern.
Sie können zuerst zum Abschnitt Container scrollen. Hier steuern Sie das allgemeine Verhalten des Filters.
Sie können die Option Titel anzeigen aktivieren, damit Besucher genau wissen, wofür das Dropdown-Menü bestimmt ist.
Sie sehen auch eine Option, um den Filter einklappbar zu machen. Dies ist praktisch, wenn Sie mehrere Filter zu Ihrer Seitenleiste hinzufügen möchten, da es die Dinge übersichtlich hält und verhindert, dass die Seite überladen wirkt.
Es gibt auch eine horizontale Option, wenn Sie die Filteroptionen lieber nebeneinander als übereinander anzeigen möchten.
Scrollen Sie als Nächstes etwas weiter nach unten zum Abschnitt Elemente. Hier können Sie Optionen wie Anzahl der Elemente aktivieren, die den Käufern zeigt, wie viele Produkte für jede Option im Dropdown-Menü verfügbar sind.
Wenn Sie mit dem Aussehen im Live-Vorschau auf der rechten Seite zufrieden sind, scrollen Sie zurück nach oben und klicken Sie auf die Schaltfläche Speichern, um Ihre Änderungen zu sichern.
Schritt 5: Fügen Sie den Dropdown-Filter zu Ihrem WooCommerce-Shop hinzu
Nachdem Ihr Dropdown-Filter gespeichert ist, ist es an der Zeit, ihn dort zu platzieren, wo Ihre Kunden ihn tatsächlich nutzen können. WPFilters bietet Ihnen verschiedene Möglichkeiten, dies zu tun.
1. Hinzufügen des Dropdown-Filters zur Shop-Seite
Die Shop-Seite ist einer der besten Orte, um einen Dropdown-Filter hinzuzufügen, da hier die meisten Ihrer Kunden stöbern werden. Klicken Sie dazu auf die Schaltfläche Einbetten in der oberen rechten Ecke der Filter-Element-Seite.
Ein Popup-Fenster wird mit einigen Einbettungsoptionen angezeigt. Sie können zwischen einem Gutenberg-Block, einem Shortcode oder PHP-Code wählen. Für die meisten Shop-Besitzer ist der Gutenberg-Block die einfachste Option.
Wählen Sie die Option Gutenberg-Block und klicken Sie dann auf Vorhandene Seite auswählen.
Geben Sie von dort den Namen Ihrer Shop-Seite ein und wählen Sie ihn aus dem Dropdown-Menü aus. Sobald Sie auf die Schaltfläche Los geht's klicken, lädt WPFilters Ihre Shop-Seite im WordPress-Content-Editor mit dem bereits hinzugefügten Filterblock.
Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf die Schaltfläche Aktualisieren, um Ihre Änderungen zu speichern.
2. Hinzufügen des Dropdown-Filters zu Ihrer Seitenleiste (Empfohlen)
Das Hinzufügen des Filters zu Ihrer Seitenleiste ist eine weitere großartige Option, die wir den meisten WooCommerce-Shop-Besitzern empfehlen. Das liegt daran, dass er sichtbar bleibt, während Kunden verschiedene Seiten in Ihrem Shop durchsuchen.
Gehen Sie dazu in Ihrem WordPress-Dashboard zu Darstellung » Widgets. Beachten Sie, dass dieser Schritt je nach verwendetem WordPress-Theme leicht abweichen kann.
Suchen Sie den Seitenleistenbereich für Ihren WooCommerce-Shop und klicken Sie auf die Schaltfläche +, um einen neuen Block hinzuzufügen. Suchen Sie nach dem WPFilters Element Widget-Block und fügen Sie ihn hinzu.
Sobald der Block hinzugefügt wurde, schauen Sie sich das Einstellungsfenster auf der rechten Seite an.
Klicken Sie einfach auf das Dropdown-Menü Element auswählen und wählen Sie den Dropdown-Filter aus, den Sie gerade erstellt haben. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Aktualisieren, um alles zu speichern.
Schritt 6: Testen Sie Ihren Dropdown-Filter
Jetzt, da der Filter in Ihrem Shop live ist, ist es wichtig sicherzustellen, dass alles wie gewünscht funktioniert. Das Testen dauert nur eine Minute, erspart Ihnen aber, dass Kunden später auf Probleme stoßen.
Besuchen Sie Ihren WooCommerce-Shop im Frontend Ihrer Website. Gehen Sie zu der Seite oder Seitenleiste, auf der Sie den Dropdown-Filter hinzugefügt haben, und sehen Sie sich an, wie er für Ihre Besucher angezeigt wird.
Von hier aus können Sie auf das Dropdown klicken und eine der verfügbaren Optionen auswählen. Wenn Sie beispielsweise den Filter zum Sortieren nach Produkt-Tags eingerichtet haben, wählen Sie einen Tag aus der Liste aus.
Die Produkte auf der Seite sollten sich sofort aktualisieren, um nur die Artikel anzuzeigen, die Ihrer Auswahl entsprechen.
Wenn der Filter korrekt funktioniert, sehen Sie, wie sich das Produktgitter auf die relevanten Ergebnisse verkleinert.
FAQs zu Dropdown-Filtern für WooCommerce
1. Kann ich mehrere Dropdown-Filter gleichzeitig hinzufügen?
Ja. Sie können so viele Filter-Elemente erstellen, wie Sie benötigen, und sie am selben Ort platzieren. Sie könnten zum Beispiel ein Dropdown „Nach Kategorie filtern“ mit einem Dropdown „Nach Farbe filtern“ und einem Preisbereichsregler stapeln, damit Kunden die Ergebnisse aus mehreren Blickwinkeln gleichzeitig eingrenzen können.
2. Funktioniert der Dropdown-Filter mit Produktvarianten?
Ja. WPFilters funktioniert mit allen Standard-WooCommerce-Produkttypen, einschließlich variabler Produkte. Wenn Sie nach einem Produktattribut wie Farbe oder Größe filtern, zeigt WPFilters Produkte an, die passende Variationsoptionen haben.
3. Erfolgt die Filterung sofort oder wird die Seite neu geladen?
Die Filterung erfolgt in Echtzeit ohne Seitenaktualisierung. Wenn ein Kunde eine Option aus dem Dropdown-Menü auswählt, aktualisiert sich die Produktliste sofort, was das Einkaufserlebnis schnell und reibungslos gestaltet.
4. Kann ich dies mit einer benutzerdefinierten Taxonomie verwenden, die ich selbst hinzugefügt habe?
Ja. WPFilters unterstützt benutzerdefinierte Taxonomien zusätzlich zu den integrierten WooCommerce-Produktkategorien und -attributen. Wenn Sie eine benutzerdefinierte Taxonomie für Ihre Produkte registriert haben, wird diese als Option im Dropdown-Menü "Datenquelle" angezeigt, wenn Sie den Filter konfigurieren.
Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen Dropdown-Filter für WooCommerce-Produkte erstellen. Möglicherweise möchten Sie auch unsere Anleitungen zum Erstellen einer Suchfeld-Filterung für eine WooCommerce-Produktliste und zum Erstellen von Bereichsfiltern in WordPress lesen.
Sind Sie bereit, Ihren Kunden eine bessere Möglichkeit zu bieten, Produkte zu finden? Sie können hier mit WPFilters beginnen.
