Beitrag

 
Filternavigation Online-Shops

Filternavigation für Ihren Online-Shop in WooCommerce erstellen

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.

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.

Preisfilter

Das Ajax Layered Nav Widget bietet folgende Konfigurationsmöglichkeiten:

Filter-Widget

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.

Filter-Frontend

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.

Autor:

Elbnetz ist ein Team enthusiastischer WordPress-Fans. Wir sind davon überzeugt, dass niemand überkandidelte, komplizierte Websites braucht. Mit WordPress ist es möglich, grandiose Websites zu entwickeln.

  • Thomas

    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

    Antworten
  • Regina

    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

    Antworten
    • Elbnetz Redaktion

      Hallo Regina,

      diese Funktion ist vom verwendeten Theme abhängig.

      Beste Grüße,
      Dein Elbnetz-Team

      Antworten
  • Momo

    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!

    Antworten
  • Carsten

    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…

    Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?