So filtern Sie WooCommerce-Produkte (Schritt-für-Schritt-Anleitung)

Nach der Zusammenarbeit mit unzähligen WooCommerce-Website-Besitzern haben wir gelernt, dass erfolgreiche Online-Shops ein wichtiges Merkmal gemeinsam haben: Sie machen es den Kunden leicht, genau das zu finden, was sie wollen.

Große Marktplätze wie Amazon verwenden Filter für Preis, Farbe, Größe und Sortierung nach Neuheiten, weil sie verstehen, wie Kunden einkaufen.

Produktfilterung ist entscheidend für das Wachstum eines E-Commerce-Geschäfts. Wenn Kunden nicht schnell finden, wonach sie suchen, verlassen sie den Shop oft ohne Kauf.

Deshalb haben wir diesen Schritt-für-Schritt-Leitfaden erstellt, der Ihnen hilft, effektive Produktfilter zu Ihrem WooCommerce-Shop hinzuzufügen.

Sie lernen, wie Sie attributbasierte Filter erstellen, die die Navigation in Ihrem Shop erleichtern und den Käufern mehr Freude bereiten.

Warum WooCommerce-Produkte nach Attribut filtern?

Filter machen es Ihren Kunden super einfach, Produkte in Ihrem WooCommerce-Shop zu durchsuchen.

Sie ermöglichen es Käufern, ihre Suche anhand verschiedener Attribute wie Farbe, Preisspanne, Stoff, Größe und mehr einzugrenzen.

Anstatt Ihre gesamte Produktauswahl zu durchsuchen, können Benutzer einfach die Produkte durchsuchen, an denen sie interessiert sind.

Das Hinzufügen von Filtern kann die Benutzererfahrung verbessern, die Suchfunktionalität verbessern und die Absprungraten in Ihrem Online-Shop reduzieren.

Sie können auch den Umsatz steigern, indem sie es den Kunden ermöglichen, alle verfügbaren Optionen für die Produkte anzuzeigen, an denen sie interessiert sind, und ihnen so helfen, fundiertere Kaufentscheidungen zu treffen.

Lassen Sie uns nun sehen, wie Sie Produkte in Ihrem WooCommerce-Shop einfach filtern können. Wir zeigen Ihnen, wie Sie WooCommerce-Produkte nach Attribut und benutzerdefiniertem Attribut filtern:

• WooCommerce-Produkte nach Attribut filtern
• WooCommerce-Produkte nach benutzerdefiniertem Attribut filtern
• Bonustipps zur Steigerung der WooCommerce-Verkäufe

WooCommerce-Produkte nach Attribut filtern

Wenn Sie nach einer schnellen und einfachen Möglichkeit suchen, WooCommerce-Produkte zu filtern, dann ist diese Methode genau das Richtige für Sie. Wir zeigen Ihnen, wie Sie mit einem WooCommerce-Produktfilter-Plugin einen einfachen Filter nach Attributen einrichten.

Zuerst müssen Sie das Plugin YITH WooCommerce Ajax Product Filter installieren und aktivieren. Weitere Anweisungen finden Sie in unserer Schritt-für-Schritt-Anleitung zum Thema Installieren eines WordPress-Plugins.

Nach der Aktivierung gehen Sie im WordPress-Dashboard zur Seite YITH » Ajax Product Filter.

Klicken Sie von hier aus auf die Schaltfläche '+ Neues Preset erstellen', um mit der Erstellung eines Filter-Presets zu beginnen.

Dort angekommen können Sie mit der Eingabe eines Namens für den Filter in das Feld „Preset name“ beginnen.

Beachten Sie, dass der Name der Voreinstellung nicht in Ihrem Shop angezeigt wird und nur zu Ihrer Information dient.

Wählen Sie als Nächstes einfach „Horizontal“ als voreingestelltes Layout und klicken Sie dann unten auf die Schaltfläche „+ Neuen Filter hinzufügen“.

Wenn Sie die kostenlose Version des Plugins verwenden, ist diese Option für Sie nicht verfügbar. Stattdessen haben Sie das Preset-Layout „Standard“.

Sie können jetzt mit der Erstellung eines Filters für Ihre WooCommerce-Produkte beginnen.

Filter für WooCommerce-Produkte erstellen

Zuerst müssen Sie einen Filternamen neben der Option „Filtername“ eingeben.

Wenn Sie beispielsweise einen Filter erstellen, der Kunden beim Sortieren von Produktkategorien hilft, können Sie ihn 'Nach Kategorie filtern' nennen.

Als Nächstes können Sie die Parameter für den Filter aus dem Dropdown-Menü „Filtern nach“ auswählen. Beachten Sie, dass die kostenlose Version des Plugins nur Filter für Produktkategorien und -tags bietet.

Um mehr über die Unterschiede zwischen diesen Optionen zu erfahren, können Sie unseren Leitfaden lesen: So fügen Sie Tags, Attribute und Kategorien zu WooCommerce hinzu.

Wenn Sie einen Filter erstellen, um Produkte nach verschiedenen Preisspannen zu sortieren, müssen Sie die Option „Preisspanne“ wählen. Wenn Sie Produkte nach Beliebtheit oder durchschnittlicher Bewertung sortieren möchten, müssen Sie die Option „Sortieren nach“ wählen.

Sie können auch die Option „Taxonomie“ wählen, wenn Sie Produkt-Tags, Kategorien, Farben, Größen, Materialien, Stile und mehr filtern möchten. Für dieses Tutorial werden wir diese Option wählen.

Nachdem Sie dies getan haben, müssen Sie aus den Taxonomieoptionen für den Filter auswählen. Wenn Sie beispielsweise Produkte nach Farbe filtern möchten, müssen Sie diese Option aus dem Dropdown-Menü auswählen.

Da wir einen Filter für Produktkategorien erstellen, wählen wir die Option „Product Categories“ aus.

Als Nächstes müssen Sie alle Produktkategorien auf Ihrer Website im Abschnitt „Begriffe auswählen“ eingeben.

Danach können Sie im Dropdown-Menü „Filtertyp“ auswählen, wie der Filter im Frontend Ihres Shops angezeigt werden soll.

Sie können den Filter als Kontrollkästchen, Dropdown-Menü, Text, Farbfelder und mehr anzeigen. Für dieses Tutorial wählen wir die Option „Auswählen“, um ein Dropdown-Menü hinzuzufügen.

Schalten Sie als Nächstes den Schalter „Show Search Field“ um, wenn Sie ein Suchfeld im Dropdown-Menü aktivieren möchten.

Sie können den Filter, den Sie erstellen, auch als Umschalter anzeigen, indem Sie den Schalter 'Als Umschalter anzeigen' aktivieren. Dann können Kunden den Filter ein- und ausschalten.

Sobald Sie dies getan haben, wählen Sie einfach eine Standardreihenfolge für die gefilterten Begriffe aus dem Dropdown-Menü 'Sortieren nach'. Die Filterkategorien werden in der von Ihnen gewählten Reihenfolge angezeigt.

Sie können die Filterkategorien nach Name, Anzahl der Begriffe oder Slug sortieren. Sie können auch den „Sortierungstyp“ für die gefilterten Begriffe in aufsteigender (ASC) oder absteigender (DESC) Reihenfolge wählen.

Klicken Sie abschließend unten auf die Schaltfläche 'Filter speichern', um Ihren Filter zu speichern.

Wiederholen Sie nun den Vorgang, um mehrere Filter zu erstellen.

Nachdem Sie dies getan haben, gehen Sie zurück zum Anfang und wechseln Sie zum Tab „Allgemeine Einstellungen“, um einige Einstellungen zu konfigurieren.

Allgemeine Einstellungen konfigurieren

Hier müssen Sie zunächst eine Option „Filtermodus“ auswählen. Sie können auswählen, ob Sie Filter in Echtzeit mit AJAX anwenden möchten oder ob Sie eine Schaltfläche „Filter anwenden“ auf Ihrer Website anzeigen möchten.

Als Nächstes müssen Sie auch zwischen der Anzeige einer Speicher-Schaltfläche oder der sofortigen Anzeige der Filterergebnisse wählen.

Sobald Sie dies getan haben, wählen Sie aus, ob Sie die Filterergebnisse per AJAX auf derselben Seite anzeigen möchten oder ob die Ergebnisse auf einer neuen Seite neu geladen werden sollen.

Scrollen Sie als Nächstes nach unten zur Option „Leere Begriffe ausblenden“ und aktivieren Sie den Schalter, wenn Sie keine leeren Filterbegriffe anzeigen möchten.

Zum Beispiel, wenn Sie in Ihrem WooCommerce-Shop eine Kategorie 'Tassen' hinzugefügt haben, diese aber derzeit keine Artikel enthält, wird sie in der Liste 'Nach Kategorie filtern' nicht angezeigt.

Danach können Sie den Schalter 'Nicht vorrätige Produkte ausblenden' aktivieren, wenn Sie nicht vorrätige Produkte in den Ergebnissen anzeigen möchten.

Sie können die anderen Einstellungen als Standard belassen oder sie nach Ihren Wünschen konfigurieren.

Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche „Optionen speichern“, um Ihre Änderungen zu speichern, und wechseln Sie oben zum Tab „Anpassung“.

Anzeigeeinstellungen konfigurieren (nur Premium-Plugin)

Hinweis: Der Tab 'Anpassung' ist nicht verfügbar, wenn Sie die kostenlose Version des Plugins verwenden.

Von hier aus können Sie die Farbe des Label-Stils Ihres WooCommerce-Filters, die Farbe des Textbegriffs, die Größe der Farbmuster, die Farbe des Filterbereichs und mehr wählen.

Das Hinzufügen von Farben kann dazu beitragen, dass Ihr WooCommerce-Filter ästhetisch ansprechender aussieht und zum Branding Ihres E-Commerce-Shops passt.

Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche „Save Options“ und wechseln Sie zum Tab „SEO“ von oben.

Konfigurieren Sie die SEO-Einstellungen

Sobald Sie dort sind, schalten Sie den Schalter „SEO-Option aktivieren“ um, um die Einstellungen zu aktivieren.

Jetzt können Sie Metatags aus dem Dropdown-Menü hinzufügen, die auf Ihren gefilterten Seiten verwendet werden sollen. Dies wird die SEO Ihrer Website verbessern.

Für weitere Details lesen Sie vielleicht unseren Artikel über WordPress-Metadaten und Meta-Tags.

Sie können auch automatisch das nofollow-Attribut zu allen gefilterten Ankern hinzufügen, indem Sie den Schalter „‚nofollow‘ zu Filter-Ankern hinzufügen“ aktivieren. Dies teilt Suchmaschinen mit, die Filter-Anker nicht für das Ranking Ihrer Seite zu verwenden.

Wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche 'Optionen speichern', um die Einstellungen zu speichern.

Fügen Sie den WooCommerce-Filter zur Produktseite hinzu

Um die gerade erstellten Filter zu Ihrer WooCommerce-Produktseite hinzuzufügen, müssen Sie oben zum Tab „Filter-Voreinstellungen“ wechseln.

Sobald Sie dort sind, kopieren Sie einfach den Shortcode des Filter-Presets, das Sie gerade erstellt haben.

Öffnen Sie als Nächstes einfach Ihre WooCommerce-Produktseite im Block-Editor über das WordPress-Dashboard.

Dort angekommen, klicken Sie auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke, um den Shortcode-Block zu finden.

Fügen Sie nun einfach den kopierten Shortcode des Filter-Presets in den Shortcode-Block ein.

Klicken Sie abschließend auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Änderungen zu speichern.

Sie können nun Ihre WordPress-Website besuchen, um den WooCommerce-Benutzerdefinierten-Attribut-Filter in Aktion zu sehen.

WooCommerce-Produkte nach benutzerdefiniertem Attribut filtern

Wenn Sie einen WooCommerce-Produktfilter mit benutzerdefinierten Attributen erstellen möchten, dann ist diese Methode genau das Richtige für Sie.

Benutzerdefiniertes Attribut erstellen

Um ein benutzerdefiniertes Attribut zu erstellen, müssen Sie die Seite Produkte » Attribute im WordPress-Dashboard aufrufen.

Sobald Sie dort sind, geben Sie zunächst einen Namen und einen Slug für das benutzerdefinierte Taxonomieattribut ein.

Wenn Sie beispielsweise einen Filter für ein bestimmtes Produktmaterial erstellen möchten, können Sie dem Attribut den Namen „Nach Material filtern“ geben.

Als Nächstes müssen Sie das Kontrollkästchen „Archive aktivieren“ aktivieren, wenn Sie alle Elemente anzeigen möchten, die dieses Attribut gemeinsam haben, auf einer einzigen Seite. 

Klicken Sie danach auf die Schaltfläche „Attribut hinzufügen“ unten.

Sobald das Attribut erstellt wurde, klicken Sie auf den Link „Configure Terms“, um dem Attribut Begriffe hinzuzufügen.

Dies führt Sie zu einem neuen Bildschirm, auf dem Sie einen Begriff in das Feld „Name“ eingeben müssen.

Wenn Sie beispielsweise ein Attribut namens 'Nach Material filtern' erstellt haben, können Sie die einzelnen Materialien als Begriffe hinzufügen, z. B. Wolle. Sie können einem Attribut beliebig viele Begriffe hinzufügen.

Sobald Sie fertig sind, klicken Sie auf die Schaltfläche „Neuen Filter nach Material hinzufügen“, um den Begriff zu speichern.

Fügen Sie das benutzerdefinierte Attribut zu einem Produkt hinzu

Nach dem Erstellen eines Attributs müssen Sie es einzelnen WooCommerce-Produkten hinzufügen.

Öffnen Sie dazu die Produktseite, die Sie bearbeiten möchten. Scrollen Sie von hier aus zum Abschnitt „Produktdaten“ und wechseln Sie zum Tab „Attribute“.

Öffnen Sie als Nächstes einfach das Dropdown-Menü „Benutzerdefiniertes Produktattribut“ und wählen Sie das gerade erstellte benutzerdefinierte Attribut aus.

Klicken Sie nun auf die Schaltfläche 'Hinzufügen'.

Nachdem das benutzerdefinierte Attribut hinzugefügt wurde, suchen Sie einfach nach dem Begriff, der dem Produkt entspricht, in der Option „Begriffe auswählen“.

Wenn Sie beispielsweise ein Attribut für Material erstellt haben und das bearbeitete Produkt aus Wolle besteht, müssen Sie aus dem Dropdown-Menü „Wolle“ auswählen.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche 'Attribute speichern'.

Klicken Sie als Nächstes oben auf die Schaltfläche „Aktualisieren“ oder „Veröffentlichen“, um Ihre Änderungen zu speichern.

Sie müssen nun den Vorgang für alle Produkte wiederholen, die dasselbe Attribut teilen.

Erstellen Sie einen benutzerdefinierten Attributfilter mit einem Plugin

Installieren und aktivieren Sie als Nächstes das YITH WooCommerce Ajax Product Filter Plugin. Weitere Anweisungen finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.

Hinweis: Sie können die kostenlose oder Premium-Version des Plugins verwenden, um einen benutzerdefinierten Attributfilter für WooCommerce zu erstellen.

Nach der Aktivierung gehen Sie im WordPress-Dashboard zur Seite YITH » Ajax Product Filter .

Klicken Sie von hier aus auf die Schaltfläche „+ Neuen Preset erstellen“.

Geben Sie als Nächstes einen Namen für die von Ihnen erstellte Voreinstellung in das Feld „Preset name“ ein.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „+ Neuen Filter hinzufügen“ unten, um mit der Erstellung eines benutzerdefinierten WooCommerce-Attributfilters zu beginnen.

Geben Sie zuerst einen Namen in das Feld „Filter Name“ ein.

Wenn Sie beispielsweise einen Filter erstellen, der Kunden beim Sortieren nach verschiedenen Materialoptionen hilft, können Sie ihn 'Nach Material filtern' nennen.

Wählen Sie als Nächstes einfach 'Taxonomie' aus dem Dropdown-Menü 'Filtern nach'. Wenn Sie die kostenlose Version des Plugins verwenden, ist diese Option standardmäßig für Sie ausgewählt.

Nun ist das von Ihnen erstellte benutzerdefinierte Attribut im Dropdown-Menü neben der Option „Taxonomie auswählen“ verfügbar.

Wählen Sie das benutzerdefinierte Attribut aus der Dropdown-Liste aus und geben Sie die Attributbegriffe in das Feld „Begriffe auswählen“ ein.

Als Nächstes müssen Sie im Dropdown-Menü „Filtertyp“ auswählen, wie der Filter im Frontend Ihres Shops angezeigt werden soll.

Der Filter kann als Kontrollkästchen, Dropdown-Menü, Text, Farbfelder und mehr angezeigt werden.

Sobald Sie dies getan haben, wählen Sie eine Standardreihenfolge für die gefilterten Begriffe aus dem Dropdown-Menü „Sortieren nach“.

Sie können die Filterkategorien nach Namen, Begriffanzahl oder Slug sortieren. Sie können auch den „Order type“ für die gefilterten Begriffe in aufsteigender (ASC) oder absteigender (DESC) Reihenfolge auswählen.

Klicken Sie abschließend unten auf die Schaltfläche „Filter speichern“, um Ihren benutzerdefinierten Attributfilter zu speichern.

Wechseln Sie als Nächstes zum Tab 'Allgemeine Einstellungen' von oben. Von hier aus können Sie einen Filtermodus auswählen, leere Begriffe ausblenden und andere Einstellungen nach Ihren Bedürfnissen konfigurieren.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche „Optionen speichern“, um Ihre Änderungen zu speichern, und wechseln Sie oben zum Tab „Anpassung“.

Hinweis: Wenn Sie die kostenlose Version verwenden, sind diese Anpassungseinstellungen nicht verfügbar.

Von hier aus können Sie anpassen, wie Ihr Filter-Preset auf der Vorderseite Ihrer Website angezeigt wird.

Zum Beispiel können Sie die Farbe des Label-Stils, die Farbe des Textbegriffs, die Größe der Farbmuster, die Farbe des Filterbereichs und mehr wählen.

Nachdem Sie Ihre Auswahl getroffen haben, klicken Sie auf die Schaltfläche „Optionen speichern“ und wechseln Sie oben zum Tab „SEO“.

Schalten Sie von hier aus den Schalter 'SEO-Option aktivieren' um, um die Einstellungen zu aktivieren.

Sie können Roboter-Meta-Tags aus dem Dropdown-Menü hinzufügen, die auf Ihren gefilterten Seiten verwendet werden sollen. Dies optimiert das SEO Ihrer Website.

Sie können auch den Schalter „‚nofollow‘ zu Filter-Ankern hinzufügen“ umschalten, um das nofollow-Attribut automatisch zu allen Filter-Ankern hinzuzufügen.

Wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche „Save Options“, um die Einstellungen zu speichern.

Benutzerdefinierten Attributfilter zu einer WooCommerce-Produktseite hinzufügen

Um den benutzerdefinierten Attributfilter zu einer WooCommerce-Shopseite hinzuzufügen, müssen Sie oben zum Tab „Filter-Voreinstellungen“ wechseln.

Kopieren Sie von hier aus den Shortcode des benutzerdefinierten Attributfilters.

Öffnen Sie als Nächstes Ihre Produktseite im Block-Editor über die Admin-Seitenleiste von WordPress.

Klicken Sie hier auf die Schaltfläche „Block hinzufügen“ (+) in der oberen linken Ecke, um den Shortcode-Block per Drag & Drop zu ziehen.

Fügen Sie danach einfach den Filter-Preset-Kurzcode, den Sie kopiert haben, in den Block ein.

Klicken Sie abschließend auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Änderungen zu speichern.

Sie können nun Ihre Website besuchen, um den WooCommerce benutzerdefinierten Attributfilter in Aktion zu sehen.

Bonustipps zur Steigerung der WooCommerce-Verkäufe

Abgesehen vom Hinzufügen von Suchfiltern ist eine weitere Möglichkeit, die Konversionen in Ihrem Online-Shop zu steigern, die Verbesserung der Geschwindigkeit Ihrer Website.

Ein WooCommerce-Shop, der schneller lädt, kann Kunden leichter binden und mehr Leads generieren.

Um die Ladezeit Ihres Shops zu verbessern, empfehlen wir den Wechsel zu SiteGround. Sie sind ein von WooCommerce empfohlener Hosting-Anbieter, der Ihre Website super schnell macht und erstaunliche Funktionen wie Ultrafast PHP, E-Commerce-Caching und mehr bietet.

Ein weiterer Tipp ist, Caching in Ihrem WooCommerce-Shop einzurichten.

Es ist eine Technik, die Ihre Website-Daten an einem temporären Ort speichert, um die Leistung zu verbessern. Sie können eines der besten WooCommerce-Caching-Plugins verwenden, um die Geschwindigkeit zu verbessern.

Darüber hinaus können Sie auch versuchen, Ihre Produktbilder optimieren, ein schneller ladendes WooCommerce-Theme wählen, die neueste PHP-Version verwenden, eine Firewall auf DNS-Ebene aktivieren und vieles mehr, um das Kundenerlebnis zu verbessern.

Für detaillierte Anweisungen lesen Sie unseren Leitfaden für Anfänger zum Thema Beschleunigung der WooCommerce-Leistung.

Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie WooCommerce-Produkte nach Attribut und benutzerdefiniertem Attribut filtern. Möglicherweise möchten Sie auch unseren Artikel darüber lesen, wie Sie einen Versandrabatt in WooCommerce anbieten und unsere Top-Auswahl für die besten WooCommerce-Themes.

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.