Vertrauenswürdige WordPress-Tutorials, wenn Sie sie am dringendsten benötigen.
Anfängerleitfaden für WordPress
WPB Tasse
25 Millionen+
Websites, die unsere Plugins verwenden
16+
Jahre WordPress-Erfahrung
3000+
WordPress-Tutorials von Experten

Wie ich WooCommerce-Produktfilter einrichtete & aufhörte, Kunden zu verlieren

Als ich zum ersten Mal Produktfilter in meinen WooCommerce-Shop einfügte, war es eine Katastrophe. Sie sahen aus, als wären sie 1999 entworfen worden, verwirrten meine Kunden mehr, als sie halfen, und das Schlimmste von allem, sie brachen meine Checkout-Seite. Ich musste sie innerhalb von Stunden wieder entfernen.

Aber ich wusste, dass mein Shop Filter brauchte. Wenn Sie Hunderte von Produkten haben, suchen Kunden nach einer Möglichkeit, ihre Auswahl schnell einzugrenzen. Ohne richtige Filterung werden sie überfordert und gehen, und nehmen ihr Geld mit.

Also krempelte ich die Ärmel hoch und testete jede wichtige WooCommerce-Filterlösung, die ich finden konnte. Nach wochenlangen Tests fand ich die besten Plugins: einfach einzurichten, schön anzusehen und vor allem helfen sie Kunden, das zu finden (und zu kaufen), was sie brauchen.

In diesem Leitfaden zeige ich Ihnen, wie ich meine WooCommerce-Produktfilter eingerichtet habe, damit auch Sie aufhören können, Leads zu verlieren.

Wie ich WooCommerce-Produktfilter eingerichtet und den Verlust von Kunden gestoppt habe

🧑‍💻 Zusammenfassung: Dieser Leitfaden zeigt Ihnen zwei Möglichkeiten, Produktfilter in WooCommerce hinzuzufügen. WPFilters ist großartig, wenn Sie moderne Filter im Amazon-Stil wünschen. Filter Everything ist eine einfache, kostenlose Option, wenn Sie nur grundlegende Filter benötigen.

Warum WooCommerce-Produktfilter hinzufügen?

Produktfilter erleichtern es Käufern, genau das zu finden, wonach sie suchen. Anstatt lange Produktlisten zu durchsuchen, können sie die Ergebnisse nach Preis, Größe, Farbe, Bewertung und mehr eingrenzen – mit nur wenigen Klicks.

Das ist wichtig, denn schlechte Navigation führt oft zu Warenkorbabbrüchen und Umsatzeinbußen. Wenn Besucher nicht schnell finden, was sie brauchen, verlassen viele sie, ohne etwas zu kaufen.

Außerdem können Filter in Ihrem WooCommerce-Shop Ihre Absprungraten erheblich senken. Kunden verbringen mehr Zeit mit dem Stöbern und schließen ihre Käufe tatsächlich ab.

Das Hinzufügen von Produktfiltern verbessert sowohl das Einkaufserlebnis als auch die Leistung Ihres Shops. Hier ist, wie:

  • ⏱️ Sparen Sie Ihren Kunden Zeit – Käufer können Hunderte von Produkten in Sekundenschnelle auf wenige passende reduzieren, was das Stöbern schneller und weniger frustrierend macht.
  • 📈 Umsatz steigern – Wenn Kunden das richtige Produkt schnell finden, fügen sie es eher ihrem Warenkorb hinzu und schließen den Bestellvorgang ab.
  • 🧑‍💻 Verweildauer erhöhen – Klare Filter halten Besucher dazu an, Ihren Shop zu erkunden, anstatt woanders zu suchen.
  • 📱 Verbessern Sie das mobile Einkaufen – Filter erleichtern es mobilen Nutzern erheblich, Ihren Katalog zu durchsuchen, ohne endlos auf einem kleinen Bildschirm scrollen zu müssen.
  • 🌟 Kundenvertrauen aufbauen – Ein sauberer, gut organisierter Shop zeigt, dass Sie Wert auf das Einkaufserlebnis legen, was hilft, Vertrauen in Ihre Marke aufzubauen.

In diesem Sinne führe ich Sie durch die Schritte zum Hinzufügen von WooCommerce-Produktfiltern. Hier ist alles, was ich in dieser Anleitung behandeln werde:

🛑 Wichtig: Produktfilter basieren auf Produktattributen. Stellen Sie sicher, dass Sie Ihren Produkten in WooCommerce tatsächlich Attribute wie Größe, Farbe oder Preis hinzugefügt haben. Wenn Sie dies noch nicht getan haben, lesen Sie unseren Leitfaden zum Hinzufügen von Produkt-Tags, Attributen und Kategorien.

Methode 1: Fügen Sie einen WooCommerce-Produktfilter im Amazon-Stil hinzu (empfohlen)

WPFilters ist das beste WooCommerce-Filter-Plugin – es ist anfängerfreundlich und sieht sofort gut aus. Sie müssen kein Entwickler sein, um es einzurichten, und es verleiht Ihrem Shop saubere Filter im Amazon-Stil, die es Kunden erleichtern, das Gesuchte zu finden.

Außerdem funktioniert es hervorragend mit jedem WooCommerce-Theme, was es zu einer sicheren Wahl macht, egal welches Theme Sie verwenden.

Weitere Einblicke in dieses Tool finden Sie in unserem detaillierten WPFilters-Testbericht.

Schritt 1: WPFilters installieren und aktivieren

Um mit der Produktfilterung zu beginnen, müssen Sie WPFilters installieren.

Zuerst müssen Sie sich auf der SearchWP-Website für ein WPFilters-Konto anmelden. SearchWP ist das Unternehmen hinter WPFilters und bietet zuverlässigen Support, falls Sie jemals Hilfe benötigen.

Klicken Sie auf die Schaltfläche WPFilters jetzt erhalten, wählen Sie einen Plan und folgen Sie den Schritten, um den Kauf abzuschließen.

Homepage von WPFilters

💡 Hinweis: SearchWP ist ein Premium-Plugin, das Ihnen die volle Kontrolle darüber gibt, wie die Suche auf Ihrer WordPress-Website funktioniert, einschließlich Filterfunktionen über WPFilters. Es gibt auch ein kostenloses Plugin namens SearchWP Live AJAX Search, mit dem Sie Live-Suchergebnisse hinzufügen können.

Sobald Sie sich angemeldet haben, loggen Sie sich in Ihr Konto-Dashboard ein und laden Sie die Plugin-ZIP-Datei herunter. Sie finden sie in Ihrem Konto-Downloadbereich.

Jetzt sind Sie bereit, das Plugin zu installieren und zu aktivieren. Gehen Sie in Ihrem WordPress-Admin-Dashboard zu Plugins » Plugin hinzufügen.

Das Untermenü "Plugin hinzufügen" unter Plugins im WordPress-Adminbereich

Klicken Sie auf dem nächsten Bildschirm auf „Plugin hochladen“, um den Datei-Uploader zu öffnen.

Klicken Sie dann auf die Schaltfläche „Datei auswählen“, wählen Sie die ZIP-Datei auf Ihrem lokalen Computer aus und klicken Sie auf „Jetzt installieren“.

Plugin-ZIP-Datei zum Hochladen und Installieren in WordPress auswählen

Vergessen Sie nicht, auf „Aktivieren“ zu klicken, um den Installationsprozess abzuschließen. Wenn Sie Hilfe benötigen, lesen Sie unseren Anfängerleitfaden zur Installation eines WordPress-Plugins.

Nach der Aktivierung startet WPFilters automatisch einen Einrichtungsassistenten, der Ihnen den Einstieg erleichtert. Klicken Sie einfach auf die Schaltfläche „Los geht’s“.

Der benutzerfreundliche Einrichtungsassistent von WPFilters

Dieser Assistent führt Sie dann durch die grundlegende Konfiguration und verbindet das Plugin mit Ihrem WooCommerce-Shop.

Befolgen Sie einfach die Anweisungen auf dem Bildschirm im Einrichtungsassistenten. Der Vorgang dauert nur ein oder zwei Minuten und stellt sicher, dass alles für Ihren Shop korrekt eingerichtet ist.

Schritt 2: Ein neues Filterelement für Ihre WooCommerce-Produkte erstellen

Jetzt, da WPFilters installiert ist, ist es an der Zeit, Ihr erstes Filterelement zu erstellen. Ein Filterelement ist einfach eine Filteroption, die Kunden verwenden können, z. B. das Filtern nach Farbe oder Größe.

Um zu beginnen, navigieren Sie zu WPFilters » Elemente in Ihrem WordPress-Admin-Dashboard. Klicken Sie dann oben auf der Seite auf die Schaltfläche „Neu hinzufügen“.

Hinzufügen eines neuen WPFilters-Elements

Zuerst müssen Sie einen Namen für Ihren Filter eingeben.

Dieser Name dient nur Ihrer Referenz im Admin-Bereich. Ich empfehle jedoch, etwas Beschreibendes wie „Farbe“ oder „Filter“ zu wählen, um die Organisation zu erleichtern.

Benennen des WPFilters-Elements

Als Nächstes wählen Sie den Filterfeldtyp aus, der bestimmt, wie Kunden mit diesem Filter interagieren.

WPFilters bietet mehrere Optionen:

  • Kontrollkästchen – Ermöglicht Kunden die gleichzeitige Auswahl mehrerer Optionen
  • Radio – Erlaubt nur eine Auswahl auf einmal
  • Dropdown – Zeigt Optionen in einem Dropdown-Menü an, um Platz zu sparen
  • Dropdown (Mehrfachauswahl) – Der Dropdown-Typ, der mehrere Auswahlen ermöglicht
  • Suche – Fügen Sie eine Suchleiste hinzu, damit Kunden eingeben können, wonach sie suchen
  • Schieberegler – Perfekt für Preisspannen oder numerische Werte
  • Zurücksetzen – Fügt eine Schaltfläche hinzu, um alle ausgewählten Filter zu löschen

Für die meisten Produktattribute wie Farbe, Größe oder Marke empfehle ich die Verwendung der Kontrollkästchen-Option. Dies ist die einfachste Methode für Kunden und ermöglicht ihnen, mehrere Auswahlen zu kombinieren.

Auswählen des Produktfilterfelds in WPFilters

Nachdem Sie Ihren Filtertyp ausgewählt haben, müssen Sie eine Datenquelle hinzufügen. Dies teilt WPFilters mit, nach welchen Produktinformationen gefiltert werden soll, z. B. Produktkategorien, Tags oder benutzerdefinierte Attribute.

Klicken Sie auf das Dropdown-Menü für die Datenquelle und wählen Sie das Attribut aus, nach dem Sie filtern möchten. Wenn Sie Produktattribute in WooCommerce eingerichtet haben, werden diese in dieser Liste angezeigt.

Auswahl der Datenquelle für das WPFilters-Element
Schritt 3: Ihren WooCommerce-Produktfilter anpassen

Mit Ihrem erstellten Filter-Element können Sie nun anpassen, wie es in Ihrem Shop aussieht und sich verhält. WPFilters bietet Ihnen verschiedene Optionen, um den Filter an Ihre Marke anzupassen und die Benutzererfahrung zu verbessern.

Sie können damit beginnen, die Einstellungen im Abschnitt „Container“ anzupassen, wo Sie:

  • Titel anzeigen – Um den Namen des Filters über den Optionen anzuzeigen oder auszublenden.
  • Aufklappbar – Nützlich, wenn Sie mehrere Filter auf einer Seite haben. Kunden können jeden Filter erweitern oder zuklappen, um das Layout übersichtlich zu halten.
  • Mehr anzeigen/weniger – Begrenzen Sie die Anzahl der Optionen, die zunächst angezeigt werden, und lassen Sie die Kunden die Liste erweitern, wenn sie mehr sehen möchten. Dies verhindert, dass lange Filterlisten die Seite dominieren.
  • Horizontal – Filteroptionen in einer Zeile anstelle einer Spalte anzeigen. Dies funktioniert gut für einfache Filter mit nur wenigen Auswahlmöglichkeiten, wie z. B. Größen.

Hier sind meine Anpassungen der „Container“-Einstellungen:

Konfiguration des Containers des Elements

Gehen Sie als Nächstes zum Abschnitt „Elementeinstellungen“.

  • Artikelanzahl – Zeigt an, wie viele Produkte zu jeder Option passen. Kunden sehen zum Beispiel Blau (15) oder Rot (8), damit sie wissen, was verfügbar ist, bevor sie klicken.
  • Leer – Blendet Optionen aus, die keine passenden Produkte haben. Das hält Ihre Filter übersichtlich und vermeidet Sackgassen.
  • Hierarchisch – Gruppiert zusammengehörige Optionen, sodass Kunden von einer Hauptkategorie in Unterkategorien navigieren können. Dies ist perfekt für größere Shops.

Nachdem Sie diese Einstellungen vorgenommen haben, klicken Sie auf „Änderungen speichern“, um Ihre Konfiguration zu sichern.

Konfiguration der Element-Einstellungen

WPFilters aktualisiert dann die Live-Vorschau in diesem Builder.

Wenn etwas nicht ganz richtig aussieht, können Sie zurückgehen und die Einstellungen anpassen, bis alles perfekt ist.

Live-Vorschau des Farbfilters im WPFilters-Builder
Schritt 4: Den Filter in Ihrem Shop einbetten

Jetzt, da Ihr Filter bereit ist, ist es an der Zeit, ihn zu Ihrem Online-Shop hinzuzufügen. WPFilters bietet Ihnen flexible Optionen, wo Sie Ihre Filter anzeigen möchten.

Sie können Filter direkt auf Ihrer Shop-Seite hinzufügen, auf der Kunden Produkte durchsuchen, oder sie in Ihrer Seitenleiste platzieren, um sie auf jeder Seite leicht zugänglich zu machen.

Ich zeige Ihnen beide Methoden, damit Sie diejenige auswählen können, die am besten zu Ihrem Shop passt.

Option 1: Produktattributfilter auf der WooCommerce-Shop-Seite anzeigen

Wenn Sie ein Block-Theme verwenden (wie Divi oder Twenty Twenty-Five), können Sie Ihre Shop-Seite einfach im Site-Editor öffnen und den Filter-Block per Drag & Drop platzieren.

💡 Hinweis: Wenn Sie ein klassisches Theme verwenden, können Sie das Layout der Shop-Seite normalerweise nicht direkt bearbeiten, da WooCommerce es steuert. Für klassische Themes empfehle ich dringend, stattdessen das Filter-Widget zu Ihrer Seitenleiste hinzuzufügen (siehe Option 2).

Klicken Sie zuerst im WPFilters-Visual-Builder auf die Schaltfläche „Einbetten“.

Der Einbettungs-Button im WPFilters-Element-Builder

Wählen Sie dann die Methode Gutenberg Block aus den verfügbaren Optionen.

Als Nächstes wählen Sie aus, ob Sie eine neue Seite erstellen oder eine vorhandene auswählen möchten.

Einbettungs-Assistent mit Einbettungsmodus und Zielfeld

Wenn Sie bereits eine Shop-Seite eingerichtet haben, wählen Sie diese einfach aus dem Dropdown-Menü aus.

Klicken Sie auf „Los geht’s!“

Filter auf der Shop-Seite einbetten

Der Visual Builder öffnet dann Ihre Shop-Seite im Block-Editor.

Klicken Sie dann einfach auf das „+“-Symbol, um einen WPFilters-Element-Block hinzuzufügen.

Hinzufügen des WPFilters-Elements im Block-Editor

Wählen Sie im Einstellungsbereich des Blocks das gerade erstellte Filter-Element aus.

Sie sehen ihn sofort in Ihrem Content-Editor erscheinen.

Wählen Sie das WPFilters-Element zum Einbetten aus

Sie können diesen Vorgang für alle von Ihnen erstellten WPFilters-Elemente wiederholen.

Klicken Sie anschließend auf „Änderungen speichern“ oder „Aktualisieren“, um Ihren Filter zu veröffentlichen.

Das war's – Ihr WPFilters-Produktfilter ist jetzt auf Ihrer Shop-Seite live und kann von Kunden genutzt werden:

WPFilters-Filterelemente in einem Live-WooCommerce-Shop
Option 2:  Produktattributfilter in der Seitenleiste anzeigen

Das Hinzufügen von Filtern zu Ihrer Seitenleiste ist eine weitere großartige Option, insbesondere wenn Sie sie auf mehreren Seiten sichtbar haben möchten. Die Seitenleiste hält Ihre Filter zugänglich, ohne Platz in Ihrem Hauptinhaltsbereich einzunehmen.

Um einen Filter zu Ihrer Seitenleiste hinzuzufügen, navigieren Sie in Ihrem Admin-Bereich zu Darstellung » Widgets . Dies öffnet den Widget-Customizer, wo Sie Ihre Seitenleisteninhalte verwalten können.

Zugriff auf den Widgets-Editor

💡 Hinweis: Wenn Sie das Widgets-Menü nicht sehen, verwenden Sie wahrscheinlich ein Block-Theme. In diesem Fall verwenden Sie bitte Option 1, um Ihre Website-Vorlage direkt zu bearbeiten.

Von hier aus können Sie in der Liste der verfügbaren Widget-Bereiche nach der WooCommerce-Seitenleiste suchen. Klicken Sie darauf, um die Seitenleiste zu erweitern und zu sehen, welche Widgets sich derzeit dort befinden.

Klicken Sie als Nächstes auf das Plus-Symbol, um ein neues Widget hinzuzufügen, und fügen Sie dann das WPFilters Element-Widget hinzu.

Hinzufügen des WPFilters-Elements zur WooCommerce-Seitenleiste

Wählen Sie im erscheinenden Einstellungsbereich des Elements Ihren Filter aus dem Dropdown-Menü aus.

Sie können mehrere Filter-Widgets hinzufügen, um Kunden verschiedene Filteroptionen anzubieten.

Auswahl des WPFilters-Elements zum Hinzufügen

Nachdem Sie Ihren Filter ausgewählt haben, klicken Sie auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Seitenleistenänderungen zu speichern.

Ihr Filter wird nun auf allen WooCommerce-Seiten angezeigt, auf denen diese Seitenleiste erscheint:

Der WPFilters-Filter auf der Shop-Seite
Schritt 5: Ihren WooCommerce-Produktfilter testen

Bevor Sie fertig sind, nehmen Sie sich ein paar Minuten Zeit, um Ihre Filter zu testen. Öffnen Sie Ihren Shop in einem Inkognito-Fenster, damit Sie ihn so sehen, wie Ihre Kunden ihn sehen.

Probieren Sie verschiedene Filterkombinationen aus, um sicherzustellen, dass die Ergebnisse korrekt aktualisiert werden. Wählen Sie zum Beispiel „Grün“ und prüfen Sie, ob nur passende Produkte angezeigt werden.

Testen des Produktfilters von WPFilter

Es ist auch eine gute Idee, jedes hinzugefügte Attribut zu testen, um sicherzustellen, dass die Filterlogik reibungslos funktioniert. Achten Sie auch auf die Produktanzahlen neben jeder Option. Diese sollten sich ändern, wenn Sie Filter anwenden oder entfernen.

Wenn etwas nicht stimmt, überprüfen Sie Ihre Produktattribute in WooCommerce. Sobald alles reibungslos funktioniert, sind Ihre Filter einsatzbereit und das Einkaufen in Ihrem Shop ist gerade viel einfacher geworden.

Methode 2: Hinzufügen eines einfachen WooCommerce-Produktfilters (kostenlose Methode)

Wenn Sie nach einer einfacheren Alternative zu WPFilters suchen, ist Filter Everything eine gute Option. Ich habe dieses Plugin ausgewählt, weil es leichtgewichtig ist und eine kostenlose Version mit allen wichtigen Filterfunktionen bietet.

Beachten Sie, dass Filter Everything bei klassischen Themes besser funktioniert und aussieht. Es unterstützt keine Blöcke, sodass Sie einen Shortcode verwenden müssen, der in der Regel weniger flexibel ist.

Schritt 1: Das Plugin installieren und konfigurieren

Gehen Sie zuerst zu Plugins » Plugin hinzufügen in Ihrem WordPress-Adminbereich.

Das Untermenü "Plugin hinzufügen" unter Plugins im WordPress-Adminbereich

Verwenden Sie auf dem nächsten Bildschirm die Suchleiste, um das Plugin Filter Everything schnell zu finden.

Klicken Sie dann in den Suchergebnissen auf „Jetzt installieren“ und „Aktivieren“, um den Vorgang abzuschließen.

Filter Everything installieren

Hilfe finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Navigieren Sie nach der Aktivierung zu Filter Everything » Einstellungen , um einige wichtige Optionen zu konfigurieren. Diese Einstellungen steuern, wie sich Ihre Filter im Frontend Ihres Shops verhalten.

Einstellungen von Filter Everything konfigurieren

Zuerst können Sie das Verhalten auf Mobilgeräten und die AJAX-Einstellungen konfigurieren:

  • Mobilgeräte – Wählen Sie, ob Filter auf Mobilgeräten eingeklappt oder wie auf dem Desktop angezeigt werden sollen. Ich empfehle, sie eingeklappt zu lassen und sie nach oben zu verschieben, damit sie leichter zu finden sind und auf kleineren Bildschirmen nicht zu viel Platz beanspruchen.
  • AJAX – Wählen Sie, ob Filter Ergebnisse sofort aktualisieren oder die Seite nach jeder Auswahl neu laden. Sie sollten dies aktivieren, damit Produkte sofort aktualisiert werden, ohne dass die gesamte Seite neu geladen wird, was ein schnelleres Einkaufserlebnis schafft.

Sie sehen auch 'HTML-ID oder Klasse des Beitragscontainers'. Dies teilt dem Plugin mit, welcher Teil der Seite aktualisiert werden soll, wenn Filter angewendet werden. Standardmäßig ist es auf #primary eingestellt, und in den meisten Fällen können Sie es problemlos so belassen.

Mobile und AJAX konfigurieren

Gehen Sie schließlich zum Abschnitt 'Sonstiges', um einige visuelle und erweiterte Optionen fein abzustimmen:

  • Widget-Primärfarbe – Sie wirkt sich auf Filter-Schaltflächen und Kontrollkästchen aus. Wählen Sie also eine Farbe, die zum Farbschema Ihrer Marke passt.
  • Maximale Höhe des Filtercontainers, px – Legt eine maximale Höhe für den Filterbereich fest. Wenn die Liste zu lang wird, wird sie scrollbar, anstatt die Seite nach unten zu verschieben.
  • Integration ausgewählter Filter (Chips) – Ermöglicht die Anzeige aktiver Filter als kleine "Chips". Sie können wählen, wo sie erscheinen, indem Sie einen Ortsnamen hinzufügen, z. B. before_main_content.
  • Debug-Modus – Zeigt hilfreiche Meldungen an, wenn etwas nicht funktioniert, was bei der Einrichtung nützlich sein kann.

So sieht es auf meinem Bildschirm aus:

Den Abschnitt "Andere Einstellungen" überprüfen

Nachdem Sie diese Einstellungen vorgenommen haben, klicken Sie auf „Änderungen speichern“, um Ihre Konfiguration zu sichern.

Schritt 2: Ein Filterset erstellen

Jetzt ist es an der Zeit, ein Filterset zu erstellen, das einfach eine Gruppe mehrerer Filter ist, die zusammenarbeiten. Zum Beispiel könnten Sie Filter für Kategorien, Farben und Größen in einem einzigen Set haben.

Gehen Sie zu Filter Everything » Filter Sets in Ihrem WordPress-Dashboard. Hier organisieren und verwalten Sie alle Ihre Produktfilter.

Zum Abschnitt "Filter-Sets" gehen

Dies bringt Sie zum Filterset-Builder.

Klicken Sie auf die Schaltfläche „Neues Filterset hinzufügen“, um mit dem Erstellen Ihres ersten Sets zu beginnen.

Ein Filter-Set hinzufügen

Als Nächstes können Sie ihm einen beschreibenden Namen geben.

Dies dient nur zu Ihrer Information, aber ich empfehle, einen beschreibenden Namen wie „Produktfilter“ oder einfach „Filter“ zu verwenden, um die Organisation zu erleichtern.

Das Filter-Set benennen

Wählen Sie als Nächstes den Beitragstyp aus, den Sie filtern möchten – Seiten, Beiträge, Produkte oder benutzerdefinierte Beitragstypen.

Da Sie mit WooCommerce-Produkten arbeiten, wählen Sie „Produkt“ aus dem Dropdown-Menü und klicken Sie auf „Filter hinzufügen“.

"Produkt" als Beitragstyp auswählen und auf "Hinzufügen" klicken

Nun richten Sie Ihren ersten einzelnen Filter innerhalb dieses Sets ein:

  • Filtern nach – wählen Sie aus dem Dropdown-Menü „Produktkategorien“. Dies weist das Plugin an, Ihre Produkte zu filtern, basierend auf ihren zugewiesenen Kategorien.
  • Filtertitel – Verwenden Sie etwas wie Kategorien oder Produktkategorien, was auch immer am besten zu Ihrem Shop passt.
  • Variablenname für URL – dieses Feld wird automatisch mit etwas wie categories gefüllt. Es hilft, saubere, SEO-freundliche URLs zu erstellen, wenn Kunden Ihre Filter verwenden.
  • Im Widget anzeigen – ein Dropdown-Menü eignet sich gut für Kategorien, da Produkte zu vielen Kategorien gehören können und auch Unterkategorien leichter zu erkennen sind.

💡 Hinweis: Filter Everything bietet je nach Ihrem Plan mehrere Anzeigeoptionen:

  • Kontrollkästchen
  • Bereichsschieberegler
  • Listen
  • Suchfelder
  • Bewertung
  • Dropdown-Menüs

Sie können den Stil wählen, der am besten zum Design Ihres Shops und den Bedürfnissen Ihrer Kunden passt.

Einen Filter erstellen

Sie können diesem Set weitere Filter hinzufügen, indem Sie erneut auf „Filter hinzufügen“ klicken. Ich empfehle, Filter für Preis, Farbe, Größe oder andere Produktattribute hinzuzufügen, die Ihr Shop verwendet.

Sobald Sie alle benötigten Filter hinzugefügt haben, klicken Sie auf „Veröffentlichen“, um Ihr Filterset zu aktivieren.

Die Schaltfläche "Veröffentlichen" in Filter Everything
Schritt 3: Filter zu Ihrem WooCommerce-Shop hinzufügen

Mit Ihrer erstellten Filter-Sammlung können Sie diese nun in Ihrem WooCommerce-Shop anzeigen. Filter Everything bietet Ihnen flexible Optionen, wo Sie Ihre Filter platzieren können.

Ich zeige Ihnen, wie Sie Filter direkt in Ihrer Seitenleiste für einfachen Zugriff oder in den Inhalten Ihrer Shop-Seite mithilfe von Gutenberg-Blöcken hinzufügen können.

Option 1: Einfachen Produktfilter in der Seitenleiste anzeigen

Das Hinzufügen von Filtern zu Ihrer Seitenleiste ist schnell und funktioniert hervorragend, wenn Sie möchten, dass sie auf mehreren WooCommerce-Seiten sichtbar sind. Die Seitenleiste hält Ihre Filter zugänglich, ohne wertvollen Inhaltsbereich zu beanspruchen.

Navigieren Sie in Ihrem WordPress-Dashboard zu Darstellung » Widgets . Dies öffnet den Widget-Customizer, in dem Sie alle Ihre Seitenleisteninhalte verwalten.

Zugriff auf den Widgets-Editor

💡 Hinweis: Wenn Sie dieses Menü nicht sehen, verwenden Sie wahrscheinlich ein modernes Block-Theme und sollten stattdessen die Editor-Methode (Option 2) verwenden.

Suchen Sie im Widget-Bereich nach Ihrem WooCommerce-Seitenleistenbereich.

Klicken Sie dann auf die Schaltfläche „+“, um das Widget „Filter Everything – Filter“ hinzuzufügen.

Das Widget "Filter Everything - Filter" hinzufügen

Die Widget-Einstellungen werden automatisch geöffnet. Dann können Sie auswählen, was angezeigt werden soll:

  • Titel – Zeigt den Filtertitel oben im Widget an.
  • Anzahl der gefundenen Beiträge – Zeigt an, wie viele Produkte den ausgewählten Filtern entsprechen.
  • Ausgewählte Begriffe (Chips) – Zeigt die aktiven Filter als kleine Chips an, damit Kunden auf einen Blick sehen können, was angewendet wurde.
  • Horizontales Layout – Zeigt die Filter in einer Reihe anstelle einer Spalte an, was gut für kompakte Layouts funktioniert.

Hier ist, was Sie auf dem Bildschirm sehen werden:

Anpassungsoptionen des Widgets "Filter Everything - Filter"

Sie können mit diesen Einstellungen experimentieren, um sie an das Design Ihres Shops anzupassen.

Wenn Sie fertig sind, klicken Sie auf „Aktualisieren“, um Ihr Widget zu veröffentlichen.

Das Widget aktualisieren

Das war's!

Ihre Filter werden nun in der Seitenleiste auf allen Seiten angezeigt, auf denen dieser Seitenleistenbereich vorhanden ist.

Der Produktfilter von Filter Everything in einer Seitenleiste
Option 2: Einfachen Produktfilter auf der WooCommerce-Shop-Seite anzeigen

Um Filter direkt zu Ihrer Shop-Seite hinzuzufügen, verwenden Sie den [fe_widget] Shortcode im Gutenberg-Editor.

Wenn Sie jedoch mehr als 1 Produktset haben, müssen Sie dessen ID in diesem Shortcode hinzufügen, z. B. [fe_widget id="123"]. Diese ID-Nummer finden Sie neben Ihrem Set-Namen auf der Seite Filter Everything » Filter Sets.

Um Ihren Produktfilter hinzuzufügen, navigieren Sie zu Seiten » Alle Seiten , um Ihre Shop-Seite im Block-Editor zu öffnen.

Die Shop-Seite bearbeiten

🧑‍💻 Profi-Tipp: Wenn Sie nicht sicher sind, welche Seite Ihre Shop-Seite ist, überprüfen Sie dies unter WooCommerce » Einstellungen » Produkte.

Fügen Sie im Gutenberg-Editor den zuvor kopierten Shortcode in einen normalen Absatzblock ein.

Den Shortcode von Filter Everything im Block-Editor hinzufügen

Wenn Sie sehen möchten, wie es aussieht, zeigen Sie Ihre Seite in der Vorschau an. Sie sollten genau dort erscheinen, wo Sie den Shortcode-Block platziert haben.

Wenn Sie mit der Platzierung zufrieden sind, klicken Sie auf „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.

Ihre Produktfilter sind jetzt auf Ihrer Shop-Seite live:

Bonus-Tipp: Intelligente WooCommerce-Produktsuche hinzufügen

Nachdem Sie Produktfilter hinzugefügt haben, gibt es eine weitere Funktion, die die Navigation Ihres Online-Shops auf die nächste Stufe heben kann: intelligente Produktsuche.

Während Filter Kunden helfen, nach bestimmten Attributen zu suchen, ermöglicht eine intelligente Produktsuchleiste ihnen, genau einzugeben, wonach sie suchen. Diese Kombination gibt Käufern die Flexibilität, Produkte nach Belieben zu finden.

Die intelligente WooCommerce-Produktsuche geht über die grundlegende WordPress-Suche hinaus. Sie versteht Produktattribute, Kategorien, SKUs und sogar Teilübereinstimmungen, um schnell relevante Ergebnisse anzuzeigen.

Eine intelligente Produktsuche erstellen

Wenn beispielsweise jemand nach „blaue Turnschuhe“ sucht, zeigt eine intelligente Suche alle blauen Schuhe in Ihrer Turnschuhkategorie an. Eine normale WordPress-Suche könnte Produkte übersehen, wenn der genaue Ausdruck nicht im Titel enthalten ist.

Das Hinzufügen von Filtern und intelligenter Suche bedeutet, dass Sie alle Möglichkeiten abdecken. Ihre Kunden können einkaufen, wie sie sich am wohlsten fühlen, was für Sie zu mehr abgeschlossenen Käufen führt.

Um dies einzurichten, lesen Sie unseren detaillierten Leitfaden, wie Sie eine intelligente WooCommerce-Produktsuche erstellen. Er führt Sie Schritt für Schritt durch den gesamten Prozess.

FAQs zur Einrichtung von WooCommerce-Produktfiltern

Wenn Sie noch Fragen zur Verwendung von Produktfiltern in WooCommerce haben, sollten diese schnellen Antworten helfen.

Gibt es ein zuverlässiges und SCHNELLES Plugin für die Produktfilterung?

Ja, WPFilters ist eines der zuverlässigsten und schnellsten Plugins für die WooCommerce-Produktfilterung. Es wurde speziell für Geschwindigkeit entwickelt und verwendet AJAX-Technologie, um Ergebnisse zu aktualisieren, ohne die Seite neu zu laden, und hält Ihren Shop reibungslos am Laufen.

Bester kostenloser Produktfilter für WooCommerce?

Die kostenlose Version von Filter Everything ist eine gute Option. Sie unterstützt grundlegende Filter wie Kategorien, Preise und Attribute, ohne Ihre Website zu verlangsamen. Der einzige Nachteil ist, dass sie am besten mit klassischen Themes funktioniert.

Wie filtere ich WooCommerce-Produkte nach benutzerdefinierten Attributen?

Zuerst müssen Sie Ihre Attribute unter Produkte » Attribute erstellen und sie Ihren Produkten zuweisen. Verwenden Sie dann ein WooCommerce-Filter-Plugin wie WPFilters, um diese Attribute als Filter auf Ihrer Shop-Seite anzuzeigen.

Wie erstelle ich eine WooCommerce-Shop-Seite mit mehreren Filtern?

Sie können Ihrer Shop-Seitenleiste mehrere Filter-Widgets hinzufügen oder ein Produktfilter-Plugin verwenden, mit dem Sie Filter wie Preis, Kategorie, Bewertung und Attribute in einem Panel kombinieren können.

Was ist der Produktfilter-Code in WooCommerce?

WooCommerce enthält keinen einzelnen Shortcode für erweiterte Filter. Die meisten Filterfunktionen stammen von Widgets oder Plugins, die ihre eigenen Shortcodes oder Blöcke generieren, die Sie überall auf Ihrer Website platzieren können.

Nächste Schritte zur Einrichtung Ihres WooCommerce-Shops

Jetzt, da Ihre WooCommerce-Produktfilter eingerichtet sind, möchten Sie vielleicht diese verwandten Anleitungen lesen, um Ihren WooCommerce-Shop noch weiter zu verbessern:

Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.

Offenlegung: Unsere Inhalte werden von den Lesern unterstützt. Das bedeutet, wenn Sie auf einige unserer Links klicken, können wir eine Provision verdienen. Sehen Sie, wie WPBeginner finanziert wird, warum das wichtig ist und wie Sie uns unterstützen können. Hier ist unser Redaktionsprozess.

Das ultimative WordPress-Toolkit

Erhalten Sie KOSTENLOSEN Zugang zu unserem Toolkit – eine Sammlung von WordPress-bezogenen Produkten und Ressourcen, die jeder Profi haben sollte!

Leserinteraktionen

1 CommentLeave a Reply

  1. Als ich WooCommerce zum ersten Mal sah, fiel es mir sehr schwer, mich zurechtzufinden und etwas einzurichten. Produktfilter waren eine Anforderung, die fast jeder hatte, der einen Online-Shop in Erwägung zog. Und es spielt keine Rolle, um welche Art von Produkten es sich handelt – ob Kleidung oder Baumaterialien. Produktfilter sind für einen Online-Shop einfach erwünscht, und ich war gestresst, weil ich nicht wirklich wusste, wie ich sie in WooCommerce implementieren sollte. Dank dieses Artikels habe ich gelernt, wie es geht, und jetzt habe ich endlich die Fähigkeit, nach der alle gefragt haben. Ich kann es von meiner To-Do-Liste der Dinge streichen, die ich noch über WooCommerce lernen muss. Es war ein glücklicher Tag, als ich diese Website fand, denn ich kam als Anfänger hierher und gehe mit so viel Gelerntem wieder weg.

Leave A Reply

Vielen Dank, dass Sie sich entschieden haben, einen Kommentar zu hinterlassen. Bitte beachten Sie, dass alle Kommentare gemäß unserer Kommentarrichtlinie moderiert werden und Ihre E-Mail-Adresse NICHT veröffentlicht wird. Bitte verwenden Sie KEINE Schlüsselwörter im Namensfeld. Lassen Sie uns ein persönliches und bedeutungsvolles Gespräch führen.