In meinen letzten beiden WooCommerce-Blogposts habe ich über das Anlegen von Produkteigenschaften (Attributen), die Ausprägungen dieser Attribute und die Verwendung von Attributen für das Anlegen von Artikelvarianten geschrieben. Dieser Post beschreibt, wie Sie mit diesen Artikelattributen eine Filternavigation in Ihrem Shop bauen können, die es Ihren Kunden erleichtert, die gesuchten Produkte über das Einschränken der Eigenschaften zu finden.
Inhalt
Was bisher geschah
Ich bleibe einfach mal bei meinem Beispiel eines Online-Shops für Autos. In den vergangenen beiden Posts habe ich ja bereits die Attribute Farbe und Kraftstoff-Typ angelegt. Um die Filterfunktion im Frontend eines Shops zu veranschaulichen, habe ich außerdem noch die Attribute Hersteller und Modell mit folgenden Ausprägungen angelegt:
Hersteller: Audi, VW, Opel
Modell: A3, A4, Astra, Kadett, Käfer, Polo
Welche Filter sind relevant?
Um eine Filternavigation anzulegen, sollte man zunächst einmal überlegen, welche Filtermöglichkeiten überhaupt Sinn machen. Welche Zugangswege benötigen Ihre Nutzer zu den von Ihnen angebotenen Produkten? Welche Filter sind überflüssig? Wenn Sie z.B. einen Spezialshop für eine ganz bestimmte Marke betreiben, macht ein Filter Marke / Hersteller natürlich nur wenig Sinn.
Beim Aufsetzen eines eigenen Shops können Sie sich zunächst gut an der Konkurrenz orientieren und über einen Benchmark herausfinden, welche Filtermöglichkeiten in anderen Shops angeboten werden. Mit der Zeit sollten Sie dann aber in das eigene Tracking-System schauen, um nachzuvollziehen, welche Filter überhaupt von den usern genutzt werden und ggf überflüssige auch wieder ausbauen.
Da ich einen Shop für Autos als Beispielshop aufgesetzt und unterschiedliche Marken und Modelle angelegt habe, machen alle von mir definierten Attribute als Filter Sinn. Insofern wird meine Filternavigation aus den Filtern Hersteller, Modell, Kraftstoff und Farbe bestehen. Zusätzlich habe ich mich auch für eine Filterung nach Preis entschieden.
Um eine Filternavigation anzeigen zu können, benötigt man zunächst einmal eine linke Sidebar (man kann die Sidebar natürlich auch rechts einbinden, was aber aus Usability-Sicht für einen Online-Shop eher unüblich ist). Da das Erstellen einer Sidebar Theme abhängig ist, will ich hier nicht weiter darauf eingehen.
Ich habe mich aus verschiedenen Gründen für das Theme Bazar entschieden, insofern kann es durchaus sein, dass ich in meinen Beiträgen Funktionalitäten demonstriere, die in anderen Themes nicht zur Verfügung stehen.
WooCommerce Widget Ajax Layered Nav
Die Erstellung der Filternavigation ist recht simpel: Unter Design > Widgets findet man die WooCommerce Widgets Preisfilter und Ajax Layered Nav, die Sie einfach in Ihre Shop-Sidebar einfügen müssen.
Das Ajax Layered Nav Widget bietet folgende Konfigurationsmöglichkeiten:
Title: Hier trägt man am besten die Filterbezeichnung ein.
Attribute: Das Widget greift auf alle von mir angelegten Attribute zu, so dass hier sämtliche Produkteigenschaften auswählbar sind.
Display Type: Sehr schön ist, dass das Widget unterschiedliche Arten von Filtern mitbringt. Die gängigste ist natürlich die Liste. Zusätzlich dazu kann ich die Filtertypen Color Selector für Farben, Size / Amount Selector für Größen (z.B. bei Kleidung) und Checkbox wählen. Letztere wäre in meinem Fall sehr sinnvoll, wenn ich z.B. ein weiteres Attribut Ausstattung angelegt hätte und dort dann Auswahlmöglichkeiten wie Ledersitze, Freisprechanlage oder Alufelgen anbieten würde. In diesem Fall wäre eine Mehrfachauswahl für den Nutzer hilfreich, damit er sämtliche Ausstattungsmerkmale auswählen kann, die er gern für sein Auto hätte.
Query Type: Hier kann ich zwischen And und Or wählen. Auch das ist eine sehr schöne Funktion, da der Nutzer bei der Einstellung „Or“ die Möglichkeit der Mehrfachauswahl hat.
Sind alle Einstellungen konfiguriert, ist das Ergebnis und die Funktionsweise im Shop sichtbar. Der Preisfilter wird bei diesem Theme als Slider dargestellt und die Farbauswahl über Kacheln realisiert.
Schwächen der Filternavigation in WooCommerce
Zum Abschluss will ich noch kurz die Schwächen der Filternavigation ansprechen, die m.E. aber zu vernachlässigen sind:
- da ich für jedes Produkt ein Standardbild festlegen muss, ein Produkt aber mehrere Varianten haben kann, kommt es natürlich vor, dass ein Kunde bei der Auswahl eines Filters nicht die entsprechende Variante angezeigt bekommt. Das kann durchaus verwirrend sein, ist aber ohne Entwicklungsaufwand meines Erachtens nicht änderbar. Ein Beispiel: ich habe den VW Käfer in den Varianten rot und weiß in meinem Shop-Backoffice angelegt und als Standardbild den roten Käfer definiert. Da das Filterwidget auf die Varianten zugreift, kann ein Nutzer die Farbe weiß auswählen und bekommt den roten Käfer im Ergebnis angezeigt. Grundsätzlich ist das natürlich richtig, da es den Käfer ja auch in weiß gibt. Verwirrend kann hier aber sein, dass genau das nicht sofort ersichtlich ist, sondern erst, wenn der Nutzer auf der Artikel-Detailseite die Varianten auswählen kann.
- An dem Autobeispiel ist ganz gut ersichtlich, dass es durchaus Sinn machen würde, Abhängigkeiten von Filtern darstellen zu können. Der Filter Modell macht eigentlich erst Sinn, wenn der Nutzer bereits einen Hersteller ausgewählt hat. Aus Usability-Sicht wäre das auch besser, da dann die Anzahl der Auswahlmöglichkeiten begrenzt ist und dem Nutzer keine ewig lange Liste mit Modellen angezeigt wird. Das ist bei einer eingeschränkten Anzahl an Produkten nicht unbedingt ein Problem, kann aber mit steigender Artikelanzahl schnell unübersichtlich werden.
14 Kommentare. Wir freuen uns über Ihren Kommentar
Super Guide.
Hätten da mal eine themenverwandte Frage: Wir suchen eine Filter der auf die Größen von Kleidungsstücken spezialisiert ist.
Im Shop haben wir die Grundeinstellung: „Nicht vorrätige Artikel werden nicht im Katalog angezeigt“ aktiv. Das funktioniert bestens, besonders weil die Größen ja als Variationen eingepflegt sind. Auf Artikeldetailseiten werden dann auch nur die Größen angezeigt die tatsächlich vorrätig sind.
Wir hätten nun gerne einen Filter, der folgendes kann:
Anzeige der einzelnen Größen als Widget, also XS S M usw.. Klicke ich jetzt auf z. B. die Größe „S“ dann soll mir der Shop nur Artikel aus dieser Rubrik anzeigen wo die Größe „S“ auch tatsächlich vorrätig ist. Ist eine größe nicht vorrätig, dann soll die garnicht erst angezeigt werden.
Diese Art von Funktion geht weder mit den YITH-Filtern (laut Support im Chat) noch mit irgend welchen anderen… es sei denn Du wüsstest hier vielleicht Rat?
Als Hoverfunktion auf Vorschaubilder z. B. auf der Startseite wäre das auch optimal, also Bild berühren und es werden die tatsächlich vorhandenen Größen eingeblendet.
Hast Du vielleicht eine Idee? Kostenfrei oder bezahlt spielt hier keine Rolle, funktionieren muss es.
Vielen Dank im voraus und ein gesundes erfolgreiches Jahr.
Moin Stefan,
die Beantwortung Deiner Frage, bedarf leider einer entsprechend aufwendigen Recherche (ohne dabei zu wissen, ob es eine Lösung gibt), weswegen wir Dir hier leider keine Lösung anbieten können.
Ahoi!
Thorsten
Hallo, ich habe dieselbe Problemstellung wie Stefan. Gibt es hierzu inzwischen eine Lösung? Ich habe selber bei mir festgestellt, dass wenn ich bei jedem Produkt jeweils die Grössen, die nicht mehr vorrätig sind aus den Eigenschaften des jeweiligen Produkts rauslösche, der Grössenfilter funktioniert aber das ist eine recht aufwendige Variante. Eine Lösung die den Lagerbestand auf Variantenebne spiegelt wäre sensationell. Vielen Dank für Hilfe…. auch entgeltliche :-)
Wunderschönen guten Morgen,
Danke für die tolle Beschreibung – habe auch schon meine Eigenschaften erstellt und im Shop-Widget eingefügt.Funktioniert auch soweit einwandfrei.
Ein Problem ist bei mir aber aufgetreten: Auf der Produktseite wird die Auswahl der Layer-Navigation nicht mehr angezeit. Wäre aber für mich wichtig, damit der Nutzer weiß, welche Auswahl er getroffen hat und den Filter evtl. auch wieder aufheben kann.
Ist das ein prinzipielles Problem oder liegt das an meinem Theme?
Liebe Grüße!
Auch Ihnen einen wunderschönen guten Morgen!
Es hört sich ganz nach einem individuellem Problem auf Grund des Themes an, sodass wir leider nicht weiterhelfen können.
Ahoi!
Die Elbnetz-Redaktion
Ich hatte es befürchtet, dann muss ich wohl mal einige Themes durchprobieren….
Schönes Wochenende ;-)
Hallo,
wie habt ihr das mit der Farbauswahl hinbekommen… Habe das Widget Ajax Layered Nav Widget nicht in meinen Widgets drin (trotz WooCommerce Installation)…
Ist es ein zusätzliches add on oder vielleicht ein eigenständiges Plug In?
Wäre auch nice, wenn Ihr eventuell mal eine richtige Installationsanleitung mit Vergabe von Attributen einstellen könntet, die die Farbfilter mit berücksichtigen. Gruß und danke für den tollen Beitrag
Hallo Elbnetzer.
Danke für den Beitrag
Genau damit beschäftgie ich mich gerade und noch mehr, vielleicht habt ihr dazu ja auch eine Lösung parat?:
Das Ergebnis des Filtern ergibt z.B. 4 Produkte.
Ich möchte, dass Nutzre nach dem Filtern auf irgendeins der 4 Produkte klicken kann und dass es jetzt auf der Produktseite möglch ist mit z.B. Pfeillen durch alle 4 Produkte durchzuklicken. Oder vielleicht auch eine Paginierung für die Ergebnisse, bei vielen Treffern.
Habt ihr damit schonmal zu tun gehabt?
Danke und ein dicken Gruß aus Altona!
Moin,
schön, dass wir Dir schon weiterhelfen konnten.
Leider haben wir mit dem beschriebenen Fall noch nichts zutun gehabt, sodass wir keine schnelle Lösung haben.
Grüße zurück!
Hallo, danke für den Beitrag… Ist es eigentlich möglich, für jede Shop Kategorie eine eigene Filternavigation zu erstellen. Ich denke daran an Produkte, die sich sehr voneinander unterscheiden… z.B.: Bilderrahmen (größe, abmessung, format, farbe) und meinetwegen Smartphone (Hersteller, Displaygröße, Gewicht, Speicher ect.) …Ich weiß, ist ein merkwürdiges Beispiel, aber mir ist gerade nichts besseres eingefallen…
Hey, bin gerade dabei einen Onlineshop aufzubauen mit Woocommerce und bin auf Ihren Beitrag gestoßen. Ich finde den Beitrag super! Vielen Dank dafür!
Hallo,
wie hast Du es möglich gemacht, die Listen einzuklappen?
Also das mit dem +-Zeichen.
Ich würde das auch gerne so machen, damit es ordentlich aussieht.
Beste Grüße
Regina
Hallo Regina,
diese Funktion ist vom verwendeten Theme abhängig.
Beste Grüße,
Dein Elbnetz-Team
Hallo !
meine Webseite bietet nur 4 Produkte an. Das liegt daran, dass ich diese Produkte nur verleihe. Jedes der 4 Produkte habe insg. nur 3mal. Also:
Produkt A -> 3mal auf Lager
Produkt B -> 3mal auf Lager
Produkt C -> 3mal auf Lager
Produkt A kann man nicht ohne einen Adapter ausleihen. Es gibt 8 Adapter, die jeweils 2mal vorhanden sind. Also:
Produkt A -> 3mal auf Lager plus 2mal Adapter A,B,C,D,E,F,G,H
Produkt B ist optional mit 1 Erweiterung möglich, die 2mal vorhanden ist
Meine aktuelle Webseite (WordPress/Woocommerce) schafft derzeit nur den 1.Absatz.
Aber ist das auch anders lösbar ?
Außerdem kann alles gebucht werden. Das läuft derzeit über einen Serviceanbieter, soll aber zukünftig über Booking Pro laufen. Scheint ganz gut zu sein.
Was meinst Du ?
Schöne Grüße
Thomas