SearchWP Blog

WordPress-Tutorials, Tipps und Ressourcen, die Ihnen helfen, Ihr Geschäft auszubauen

So filtern Sie WooCommerce-Produkte nach Attributen

Wenn Sie Produkte mit unterschiedlichen Größen oder Farben verkaufen, wissen Sie, wie schwierig es für Kunden ist, genau das zu finden, was sie wollen. Oft müssen sie Dutzende von Seiten durchklicken, nur um zu sehen, ob ihre spezielle Größe überhaupt auf Lager ist.

Diese Frustration führt normalerweise dazu, dass sie Ihre Website verlassen, ohne etwas zu kaufen. Wir haben gesehen, wie viele Shop-Betreiber potenzielle Verkäufe verloren haben, nur weil die Einkaufserfahrung zu unübersichtlich war, um sie zu navigieren.

Die Lösung besteht darin, Besuchern zu ermöglichen, Produkte nach bestimmten Attributen wie Stoff, Größe oder Marke zu filtern. Es ist, als hätte man einen hilfreichen Verkäufer, der sie sofort zum richtigen Regal führt.

In diesem Artikel zeigen wir Ihnen, wie Sie WooCommerce-Produkte nach Attributen filtern können, ohne einen Entwickler einstellen zu müssen.

Warum Attributfilter zum WooCommerce-Shop hinzufügen?

Wir alle kennen das als Käufer. Sie besuchen einen Online-Shop, finden eine Kategorie, die Ihnen gefällt, aber Sie können nicht nach dem einen Kriterium filtern, das wichtig ist, wie Größe oder Farbe.

Wir haben unzählige E-Commerce-Websites besucht, auf denen wir zwanzig verschiedene Produkte anklicken mussten, nur um zu sehen, ob sie in Schwarz erhältlich waren. Das ist frustrierend und führt normalerweise dazu, dass wir die Website verlassen, um woanders zu kaufen.

Wenn Ihrem Shop Attributfilter fehlen, empfinden Ihre Kunden wahrscheinlich dieselbe Verärgerung. Kategorien sind großartig für breite Gruppen, aber sie versagen, wenn ein Benutzer spezifische Anforderungen hat.

Benutzer dazu zu zwingen, zwischen dem Katalog und den Produktseiten hin und her zu klicken, erzeugt Reibung. Es verwandelt einen unterhaltsamen Einkaufsbummel in eine lästige Pflicht.

Stellen Sie sich Attributfilter wie einen sachkundigen Mitarbeiter vor, der im Gang steht. Anstatt den Kunden ziellos suchen zu lassen, grenzen die Filter die Optionen sofort auf das ein, was ihren Bedürfnissen entspricht.

Wir haben festgestellt, dass die Behebung dieses spezifischen Problems die Verweildauer der Besucher auf der Website verlängert. Es glättet den Weg vom reinen Stöbern bis zum Checkout.

Nun wollen wir uns die Schritte ansehen, die Sie befolgen können, um diese Filter zu Ihrer Website hinzuzufügen.

WooCommerce-Produkte nach Attributen filtern

Der einfachste Weg, Ihre Produkte nach bestimmten Attributen zu filtern, ist die Verwendung eines Plugins wie WPFilters.

WPFilters - Bestes WordPress-Filter-Plugin

WPFilters ist das beste Filter-Plugin für WordPress, da es sofort mit WooCommerce funktioniert.

Normalerweise beinhaltet das Einrichten von Filtern komplizierte Einstellungen oder sogar Code-Änderungen.

WPFilters löst dies mit einer Zero-Code-Einrichtung, mit der Sie in wenigen Minuten funktionale Filter erstellen können.

Es ermöglicht Ihnen, Ihre vorhandenen Produktattribute in benutzerfreundliche Kontrollkästchen, Optionsfelder oder Dropdown-Menüs umzuwandeln. Sie müssen keinen Entwickler einstellen, um Ihren Shop professionell aussehen zu lassen.

Hier sind einige weitere Funktionen, die Sie mit WPFilters erhalten:

  • Teilbare Filter-URLs: Jede Suche erstellt einen eindeutigen Link, sodass Kunden ihre spezifischen gefilterten Ergebnisse mit Freunden als Lesezeichen speichern oder teilen können.
  • Filter überall platzieren: Sie können Filter mit dem Gutenberg-Block oder einfachen Shortcodes problemlos auf jeder Seite oder Seitenleiste hinzufügen.
  • Vollständige Anpassung: Sie können genau steuern, wie Ihre Filter aussehen und funktionieren, ohne eine einzige Zeile CSS anfassen zu müssen.
  • Erweiterte Datenunterstützung: Damit können Sie über einfache Kategorien hinaus Inhalte nach benutzerdefinierten Feldern, Tags und mehr filtern.
  • Universelle Kompatibilität: Das Plugin funktioniert perfekt mit Beiträgen, Seiten und benutzerdefinierten Beitragstypen, sodass Sie es auf Ihrer gesamten Website verwenden können.

Damit wollen wir uns ansehen, wie Sie die Attributfilterung auf Ihrer Website einrichten können.

Schritt 1: WPFilters installieren und aktivieren

Um zu beginnen, müssen Sie die WPFilters-Website besuchen und sich für ein WPFilters-Konto anmelden.

Sobald Sie fertig sind, gehen Sie einfach zu Ihrem Kontodashboard und klicken Sie auf die Registerkarte Downloads.

WPFilters-Plugin-Zip-Dateien herunterladen

Drücken Sie als Nächstes die Schaltfläche WPFilters herunterladen und speichern Sie die ZIP-Datei auf Ihrem Computer. Wir empfehlen außerdem, Ihren Lizenzschlüssel sofort zu kopieren, da Sie ihn gleich zur Überprüfung des Plugins benötigen.

Nun müssen Sie die Datei auf Ihre Website hochladen und installieren. Wenn Sie eine Auffrischung benötigen, sehen Sie sich diese Schritt-für-Schritt-Anleitung an, wie man ein WordPress-Plugin installiert.

Nach der Aktivierung erscheint der Einrichtungsassistent auf Ihrem Bildschirm. Klicken Sie auf die Schaltfläche Los geht's und folgen Sie den Anweisungen auf dem Bildschirm, um die Einrichtung abzuschließen.

WPFilters-Einrichtungsassistent

Schritt 2: Ein neues Filterelement für Produktattribute hinzufügen

Als Nächstes müssen Sie ein neues Filterelement erstellen, mit dem Ihre Kunden interagieren.

Gehen Sie dazu einfach von Ihrem WordPress-Dashboard zu WPFilters » Elemente und klicken Sie auf die Schaltfläche Neu hinzufügen.

Neues Element in WPFilters hinzufügen

Danach können Sie oben einen Namen für Ihren Filter eingeben, z. B. „Produktfarbe“ oder „Größe“. Dieser interne Name hilft Ihnen, die Dinge organisiert zu halten, wenn Sie später weitere Filter zu Ihrem WooCommerce-Shop hinzufügen möchten.

Wählen Sie dann die Filterfelder aus den verfügbaren Optionen aus.

Für Produktattributfilter verwenden wir die Option Kontrollkästchen, da sie es Benutzern ermöglicht, mehrere Optionen gleichzeitig auszuwählen. Sie können jedoch auch ein Dropdown-Menü oder Optionsfelder wählen, je nach Design Ihres Shops.

Produktattribut-Filterfeld auswählen

Sobald Sie ein Layout ausgewählt haben, scrollen Sie zum Abschnitt Datenquelle, um Ihre Produktdaten zu verbinden. Hier teilen Sie WPFilters mit, nach welchen Informationen in Ihrem Shop gesucht werden soll.

Klicken Sie auf das Dropdown-Menü, um das Produktattribut auszuwählen, für das Sie einen Filter einrichten möchten.

Zum Beispiel wählen wir für dieses Tutorial das Attribut „Produktfarbe“.

Datenquelle für Produktattribute auswählen

Wenn Sie noch kein Produktattribut hinzugefügt haben, lesen Sie bitte diese Anleitung, wie Sie Produkt-Tags, Attribute und Kategorien zu WooCommerce hinzufügen.

Schritt 3: Ihre Filtereinstellungen anpassen

Nachdem Sie Ihre Quelle ausgewählt haben, können Sie Ihren Produktattributfilter feinabstimmen und anpassen, indem Sie zum Abschnitt Container scrollen.

Hier können Sie die Option „Titel anzeigen“ aktivieren, ihn einklappbar machen und die Inhaltselemente horizontal anordnen.

Container-Einstellungen für Attributfilter bearbeiten

Scrollen Sie als Nächstes einfach nach unten zum Abschnitt Elemente , um Ihren Filter weiter anzupassen.

Sie können beispielsweise die Anzahl der Elemente aktivieren und Besucher sehen lassen, wie viele Produkte verfügbar sind, bevor sie klicken.

Bearbeite die Elementeeinstellungen für Filter

Wenn Sie mit den Einstellungen zufrieden sind, scrollen Sie einfach nach oben und klicken Sie auf die Schaltfläche Speichern , um Ihre Änderungen zu speichern.

Sie werden eine praktische Vorschau auf der rechten Seite des Bildschirms bemerken, die sich in Echtzeit aktualisiert, während Sie Änderungen vornehmen.

Produktattributfilter speichern

Schritt 4: Filter in Ihrem WooCommerce-Shop anzeigen

Jetzt, da Ihr Filter fertig ist, ist der letzte Schritt, ihn auf Ihrer Website zu platzieren, damit Kunden ihn tatsächlich nutzen können.

Wir lieben WPFilters, weil es Ihnen ermöglicht, diese Filter überall mit dem WordPress-Blockeditor zu platzieren.

Es verfügt auch über eine integrierte Option, um den Filter direkt auf Ihrer bevorzugten Seite einzubetten. Klicken Sie einfach auf die Option Einbetten im Elementeditor.

Produktattributfilter einbetten

Als Nächstes öffnet sich ein Popup-Fenster, in dem Sie den Einbettungsmodus und die Zielseite auswählen können.

WPFilters bietet 3 Einbettungsmodi, darunter einen Gutenberg-Block, einen Shortcode oder PHP-Code.

In diesem Tutorial zeigen wir Ihnen, wie Sie den Produktattributfilter zur WooCommerce-Shop-Seite und zur Seitenleiste Ihres Online-Shops hinzufügen.

1. Produktattributfilter im WooCommerce-Shop anzeigen

Zuerst können Sie einfach die Option Gutenberg-Block auswählen und dann auf die Schaltfläche „Vorhandene Seite auswählen“ klicken.

Bette Filter in eine Seite ein

Danach müssen Sie den Namen der Seite eingeben und sie aus dem Dropdown-Menü auswählen.

Sobald das erledigt ist, klicken Sie einfach auf die Schaltfläche Los geht’s.

Produktfilter auf der Shop-Seite einbetten

Auf dem nächsten Bildschirm sehen Sie Ihren Produktfilter bereits zum WordPress-Editor hinzugefügt.

Alternativ können Sie auch den Block WPFilters-Element auf Ihrer WooCommerce-Shop-Seite hinzufügen und den gerade erstellten Filter im Einstellungsbereich auf der rechten Seite auswählen.

Produktattributfilter im Inhaltseditor anzeigen

Schließlich können Sie auf die Schaltfläche Speichern oder Veröffentlichen klicken.

Sie können jetzt Ihren Live-Shop besuchen, um den Filter zu testen und sicherzustellen, dass er Ihre Produkte korrekt sortiert.

Produktfilter in der Vorschau anzeigen

2. Produktattributfilter in der Seitenleiste anzeigen

Um den WooCommerce-Produktattributfilter zur Seitenleiste Ihres Shops hinzuzufügen, können Sie von Ihrem WordPress-Dashboard aus zu Darstellung » Widgets navigieren.

Hinweis: Wir verwenden für dieses Tutorial das Astra WordPress-Theme. Die Schritte zum Hinzufügen des Widgets können je nach Theme, das Sie für Ihre Website verwenden, variieren.

Als Nächstes müssen Sie den Widget-Block WPFilters-Element unter dem Abschnitt WooCommerce-Seitenleiste hinzufügen.

WPFilters-Element-Widget-Block zur WooCommerce-Seitenleiste hinzufügen

Klicken Sie zunächst einfach auf die Schaltfläche + und fügen Sie den Block hinzu.

Danach müssen Sie den Produktattributfilter aus den Elementeinstellungen im Bereich auf der rechten Seite auswählen.

Wählen Sie Ihren Produktfilter aus den Widget-Einstellungen

Wenn Sie fertig sind, klicken Sie einfach auf die Schaltfläche „Aktualisieren“.

Besuchen Sie jetzt Ihren WooCommerce-Shop und sehen Sie die Filter in der Seitenleiste.

Produktfilter in der Seitenleiste anzeigen

Schritt 5: Testen Sie Ihren Produktattributfilter

Nachdem Sie den Filter in Ihrem WooCommerce-Shop eingebettet haben, besteht der nächste Schritt darin, ihn zu testen und zu sehen, ob er korrekt funktioniert.

Für dieses Tutorial haben wir einen Filter erstellt, mit dem Besucher Produkte nach Farbe sortieren können.

Als wir eine bestimmte Farbe im Filter auswählten, wurden die Produkte automatisch sortiert und der richtige Artikel angezeigt.

WooCommerce Produktattributfilter

Jetzt können Sie weitere Produktattributfilter für Ihren Shop hinzufügen. Sie können beispielsweise Marken, Größen, Materialien und andere Attribute im Filter anzeigen.

FAQs zu WooCommerce-Produktattributfiltern

1. Was ist der einfachste Weg, WooCommerce-Produkte nach Attributen zu filtern?

Der einfachste Weg, WooCommerce-Produkte nach Attributen zu filtern, ist die Verwendung eines Plugins wie WPFilters, das eine codefreie Einrichtung bietet, um in wenigen Minuten benutzerfreundliche Filteroptionen zu erstellen.

2. Kann ich Filter zu bestimmten Seiten hinzufügen oder nur zur Seitenleiste?

Ja, WPFilters ermöglicht es Ihnen, Filter überall auf Ihrer Website einzubetten, einschließlich bestimmter Seiten wie der WooCommerce-Shop-Seite oder in der Seitenleiste, über Gutenberg-Blöcke, Shortcodes oder PHP-Code.

3. Warum ist es wichtig, Attributfilter zu einem WooCommerce-Shop hinzuzufügen?

Das Hinzufügen von Attributfiltern verbessert das Einkaufserlebnis, indem es Kunden ermöglicht, Produkte zu finden, die spezifischen Kriterien wie Größe, Farbe oder Material entsprechen, wodurch Frustration reduziert und die Kaufwahrscheinlichkeit erhöht wird.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie WooCommerce-Produkte nach Attributen filtern. Möglicherweise möchten Sie auch unseren Leitfaden zum Hinzufügen einer intelligenten WooCommerce-Produktsuche und zum Suchen nach Produkt-SKUs in WooCommerce sehen.

Bereit, Ihren Online-Shop einfacher navigierbar zu machen? Sie können hier mit WPFilters loslegen.

Autor-Avatar
Aazim Akhtar

Erstellen Sie noch heute eine bessere WordPress-Sucherfahrung

Verlieren Sie nie wieder Besucher an unzureichende Suchergebnisse. SearchWP macht die Erstellung Ihrer eigenen intelligenten WordPress-Suche schnell und einfach.

Get SearchWP Now
Symbol für mehrere Suchmaschinen