So filtern Sie WooCommerce-Produkte nach Attributen

Haben Sie WooCommerce-Produkte mit mehreren Attributen? Wenn ja, kann es sehr praktisch sein, Ihren Kunden zu erlauben, Produkte nach Attributen zu filtern und die Benutzererfahrung Ihres Shops zu verbessern. Wenn Sie nach einer Schritt-für-Schritt-Anleitung suchen, sind Sie bei uns genau richtig. In diesem Artikel zeigen wir, wie Sie einen Produktfilter hinzufügen können, um WooCommerce-Produkte nach Attributen zu filtern.

Aber zuerst schauen wir uns an, was Produktattribute sind und warum wir sie brauchen.

Was sind Produktattribute?

Produktattribute sind Werte, die jedem Produkt basierend auf seinen Eigenschaften zugewiesen werden. Ein Produkt kann mehrere Attribute haben. Wenn Sie beispielsweise einen Online-Shop betreiben, der Mobiltelefone verkauft, müssen Sie jedem verkauften Mobiltelefon Marke, Betriebssystem, Bildschirmgröße, Software und Android-Version hinzufügen.

Auf diese Weise haben Sie einen gut organisierten Shop und können den Besuchern ein besseres Erlebnis bieten. Die häufigsten Attribute, die Online-Shops verwenden, sind:

• Marke
• Farbe
• Größe
• Gewicht

usw.

Aber Sie können ganz einfach benutzerdefinierte Produktattribute aus Ihren WooCommerce-Einstellungen erstellen und ihnen Werte zuweisen.

Jetzt kennen Sie die Produktattribute. Lassen Sie uns als Nächstes sehen, warum Sie einen Produktfilter hinzufügen müssen, um Produkte nach Attributen zu filtern, und wie er hilfreich sein kann.

Warum müssen wir Produkte nach Attributen filtern?

Einige Kunden bevorzugen bestimmte Marken oder Stile aufgrund ihrer Qualität, ihres Stils oder ihres persönlichen Geschmacks. Sie suchen möglicherweise auch nach einer bestimmten Farbe, Größe, einem bestimmten Gewicht usw. Um ihnen zu helfen, das zu finden, wonach sie suchen, müssen wir mehrere Produktfilter anbieten, damit sie unerwünschte Ergebnisse einfach herausfiltern können. Lassen Sie uns Ihnen das an einem guten Beispiel erklären.

Nehmen wir an, wir haben einen WooComemrce-Laden, der Kleidung verkauft. Jetzt würden einige unserer Kunden nach bestimmten Arten von Kleidern suchen. Sie können Kleidung basierend auf Farbe, Größe, Stil oder sogar Klasse suchen.

Hier können die WooCommerce-Attribute hilfreich sein.

Indem wir den Produkten benutzerdefinierte Attribute hinzufügen, während wir sie auflisten (oder aktualisieren), haben wir eine bessere Chance, mehr Conversions zu erzielen und mehr Umsatz zu generieren. Sucht ein Kunde beispielsweise nach Kleidergröße Large (L) , kann er ganz einfach das Größenattribut verwenden. Sobald er die Größe Large auswählt, werden alle anderen Größen aus den Suchergebnissen oder der Shop-Seite weggelassen, und WooCommerce zeigt nur alle Produkte an, die unter dem Attribut Large zugewiesen sind.

Auf diese Weise wird der Kunde ein benutzerfreundliches Erlebnis haben, da er seine gewünschten Produkte ziemlich schnell finden kann. Wie bereits erwähnt, führt dies zu höheren Konversionsraten und geringeren Absprungraten.

Daher müssen Sie die Funktion zum Filtern von Produkten nach Attribut in Ihrem WooCommerce-Shop verwenden, wenn Sie das Beste aus Ihrem Online-Projekt herausholen möchten.

So filtern Sie WooCommerce-Produkte nach Attributen

Wir haben zwei Methoden, um einen Produktfilter hinzuzufügen, der WooCommerce-Produkte nach Attributen filtert.

• Standardfilter
• Ein dediziertes Plugin

Im Folgenden zeigen wir Ihnen beide Methoden. So können Sie Ihren bevorzugten Weg entsprechend den Anforderungen auswählen.

Lassen Sie uns ohne weiteres Umschweife loslegen.

1) Standardmethode

Hier zeigen wir Ihnen, wie Sie den Filter hinzufügen, ohne Plugins oder Tools von Drittanbietern zu verwenden. Melden Sie sich zunächst bei Ihrer WordPress-Installation an und stellen Sie sicher, dass Sie genügend Attribute erstellt und dem Produkt zugewiesen haben. Unter Produkte > Attribute sehen Sie alle verfügbaren Optionen.

Fügen Sie ein neues Attribut hinzu

Wenn Sie eine erstellen müssen, können Sie gerne den linken Bereich der Seite verwenden.

Unsere lokale WordPress-Installation hat einige Attribute erstellt und den Produkten zugewiesen. Wir brauchen also keine zusätzlichen Attribute und können gut vorankommen. Wenn Sie unseren Mustershop besuchen, können Sie alle unsere aufgeführten Produkte sehen.

Im nächsten Abschnitt zeigen wir Ihnen, wie Sie ein Widget anzeigen, mit dem Kunden Attribute filtern können.

Produktfilter-Widget konfigurieren und anzeigen

Gehen Sie zuerst zum WP Admin Dashboard und navigieren Sie zu Appearance > Widgets.

Wir werden das Widget im Widget-Bereich der rechten Seitenleiste hinzufügen. Suchen Sie also im Widget-Bereich nach Produkt nach Attribut filtern .

Fügen Sie das Widget dem Widgetbereich der rechten Seitenleiste hinzu.

Das Widget erfordert nur eine minimale Konfiguration. Sie müssen ein zu verwendendes Produktattribut auswählen. Das Widget zeigt alle in Ihrem WooCommerce-Shop verfügbaren Attribute an. In unserem Fall sind die beiden verfügbaren Attribute

1. Farbe
2. Größe

Wählen Sie die Attribute aus, und die endgültige Widget-Konfiguration sieht in etwa so aus.

Sie können auch die Blockkonfiguration auf der rechten Seite der Seite sehen.

Nachdem Sie das Widget geändert haben, aktualisieren Sie die Einstellungen.

Gehen Sie nun zum Frontend Ihrer Website und überprüfen Sie die rechte Seitenleiste.

Wie Sie im Screenshot sehen können, werden die Filter entsprechend Ihrer Anpassung im Frontend sichtbar sein. Wenn Sie also ein neues Attribut zum Store hinzugefügt haben und es dem Widget-Bereich hinzufügen möchten, müssen Sie das Widget erneut aufrufen und das neue Attribut auswählen, wie bereits erklärt, um das Widget zu aktualisieren. Sobald Sie das Widget neu konfiguriert haben, sehen Sie die neue Filteranzeige am Frontend.

Wenn Sie oder Ihr Kunde Attribute auswählen, wird das Shop-Ergebnis entsprechend angepasst. Hier setzen wir das Attribut Farbe auf Schwarz, wodurch zwei unserer Produkte angezeigt werden, die der Farbe Schwarz entsprechen.

Das ist es!

So können Sie WooCommerce-Produkte nach Attributen filtern, ohne Tools von Drittanbietern oder zusätzliche Codes zu verwenden.

2) Plugin-Methode

Wenn Sie es vorziehen, ein Plugin zu verwenden, um den Filter zu Ihrem WooCommerce-Shop hinzuzufügen, ist dieser Abschnitt für Sie. Hier zeigen wir Ihnen, wie Sie ein Plugin verwenden, um diese Aufgabe zu verwalten. Es stehen mehrere Plugins zum Filtern von WooCommerce-Produkten zur Verfügung. Wenn Sie nach dem besten Produktfilter-Plugin suchen, haben wir einen speziellen Beitrag mit den besten Plugins, um Ihnen bei der Arbeit zu helfen.

Für die Demonstration wählen wir Themify – Produktfilter. Es ist ein kostenloses und funktionsreiches WordPress-Plugin, das kostenlos im WordPress-Repository verfügbar ist.

Installieren und aktivieren Sie das Plugin

Als erstes müssen Sie das Produktfilter-Plugin auf Ihrer WordPress-Seite installieren und aktivieren. Gehen Sie zu Plugins > Neu hinzufügen und suchen Sie nach dem Plugin. Wenn Sie das richtige gefunden haben, klicken Sie auf die Schaltfläche Jetzt installieren, um es zu installieren.

Nachdem Sie das Plugin installiert haben, klicken Sie auf Aktivieren , um es auf Ihrer Website zu aktivieren.

Nach der Aktivierung sehen Sie die Plugin-Einstellungen auf der linken Seite Ihres WordPress-Dashboards.

Fügen Sie mit dem Plugin einen neuen Filter hinzu

Sie können von dort aus neue Filter erstellen oder vorhandene Filter einfach importieren. In diesem Fall werden wir einige Filter erstellen.

Klicken Sie auf Neu hinzufügen, und es erscheint eine Lightbox mit allen Parametern, die Sie anpassen müssen.

Sie können sie nach Ihren Wünschen auswählen. Wenn Sie nach unten scrollen, sehen Sie ein Feld mit anpassbaren Attributen.

Da musst du modifizieren. Standardmäßig zeigt das Plugin keine Attribute im Frontend an. Stattdessen müssen Sie das Attribut, das Sie anzeigen möchten, an den unteren Rand des Felds ziehen.

In diesem Fall haben wir Farb- und Größenattribute erstellt und einigen Produkten zugewiesen. Wir werden diese Attribute also im aktiven Bereich ablegen.

Jede Option ist anpassbar. Sie können einen Titel hinzufügen und ähnliche Dinge ändern.

Wenn Sie mit der Änderung fertig sind, speichern Sie sie.

Zeigen Sie den Produktfilter an

Das Plugin erstellt einen neuen Shortcode für diese Konfiguration. Sie können den eindeutigen Shortcode in den Einstellungen des Plugins sehen.

Kopieren Sie den Shortcode von dort und besuchen Sie einen beliebigen Widget-Bereich. In diesem Fall verwenden wir die Filteroption in der rechten Seitenleiste. Fügen Sie also einen neuen Shortcode-Block zum Widget-Bereich der rechten Seitenleiste hinzu und fügen Sie den Shortcode ein.

Überprüfen Sie nach dem Aktualisieren der Einstellung Ihre WordPress-Site vom Frontend aus. Sie werden die Filter in Aktion sehen.

Das Beste ist, dass Sie den Filter jederzeit ändern können. Auf diese Weise können Sie also ein Plugin verwenden, um einen Produktfilter hinzuzufügen, damit Ihr Kunde WooCommerce-Produkte nach Attributen filtern kann.

BONUS: So fügen Sie WooCommerce AJAX-Produktfilter hinzu

Das Aktualisieren der Webseite, wenn Kunden ihren Filter aktualisieren, ist ziemlich lästig und kann dazu führen, dass der Warenkorb abgebrochen wird. Dies kann sich negativ auf Ihr Online-Geschäft auswirken.

Um das Erlebnis zu optimieren, können Sie eine Technik namens AJAX verwenden. AJAX ist eine gängige Praxis, die Webentwickler verwenden, um erforderliche Daten zu laden, ohne zusätzliche Seitenladevorgänge oder -aktualisierungen zu verursachen.

Dies kann Ihnen helfen, die Conversions zu verbessern, da der Kunde nicht mit jedem zusätzlichen Seitenladevorgang irritiert wird.

Dazu verwenden wir das Plugin Advanced AJAX Product Filters, um diese Aufgabe zu erfüllen. Es ist eines der besten Plugins, die Sie erhalten können, um WooCommerce AJAX-Produktfilter zu Ihrem Geschäft hinzuzufügen.

Als allererstes müssen Sie das Plugin in Ihrer WooCommerce-Installation installieren und aktivieren. Dazu müssen Sie zu Plugins > Add New gehen. Danach können Sie nach dem Plugin suchen und es installieren und aktivieren.

Nach der Aktivierung sehen Sie die Einstellungen des Plugins auf der linken Seite Ihres WordPress-Dashboards. Gehen Sie dort zur Option Produktfilter .

Dies ist der allgemeine Konfigurationsbereich des Plugins. Von dort aus können Sie die Werte und alles ändern. Wählen Sie beispielsweise die Option Filter, wie unten gezeigt, wenn Sie einen neuen Filter erstellen müssen.

Fügen Sie einen neuen Filter hinzu

Klicken Sie auf die Schaltfläche Filter hinzufügen, um Filter in Ihrem WooCommerce-Shop zu erstellen.

Auf der nächsten Seite sehen Sie alle Anpassungsoptionen, die Sie mit dem Filter vornehmen können.

Speichern Sie den Filter, sobald Sie alles geändert haben, und Sie können loslegen.

Ab sofort können Sie alle Filter unter BeRocket > Filter sehen.

Sie können beliebig viele Filter erstellen oder die vorhandenen ändern. Ähnlich können Sie auch eine Filtergruppe erstellen. Wenn Sie also mehrere Filter einer Gruppe zuweisen müssen, kann diese Funktion praktisch sein.

Zeigen Sie den AJAX-Filter an

Der nächste Schritt besteht darin, den Filter auf Ihrem Frontend anzuzeigen. Dazu können Sie Shortcodes oder das spezielle Widget verwenden, das mit dem Plugin geliefert wird. Das Widget ist die einfachste Option, die Sie verwenden können. Alles, was Sie tun müssen, ist zum Abschnitt Widgets zu gehen und das AAPF-Filter- Widget zu verwenden.

Sie können die Filter und Filtergruppen nach Ihren Wünschen ändern. Als Ergebnis ist die AJAX-Filteroption im Frontend Ihres WooCommerce-Shops vorhanden.

Auf diese Weise können Sie das Advanced AJAX Product Filters-Plugin verwenden, um Ihrer WooComemrce-Installation eine Filteroption hinzuzufügen.

Mit diesem Plugin können Sie jedoch noch viel mehr erreichen. Wenn Sie interessiert sind, lesen Sie unseren speziellen Artikel zum Hinzufügen von WooCommerce AJAX-Produktfiltern.

Fazit

In diesem Artikel haben wir zwei Methoden zum Hinzufügen eines Produktfilters zum Filtern von WooCommerce-Produkten nach Attributen behandelt.

• Standardmethode
• Plugin-Methode

Wenn Sie eine benutzerfreundliche Methode benötigen, wird die Standardmethode bevorzugt. Sie müssen keine zusätzlichen Codes oder andere Anpassungen verwenden. Nachdem Sie den Produkten ein Attribut zugewiesen haben, können Sie den dedizierten Gutenberg-Block verwenden, um das Attribut im Frontend Ihrer WooCommerce-Installation anzuzeigen.

Andererseits können Sie ein Plugin verwenden, um dasselbe zu tun. Aber es wird dich mehr Zeit kosten. Die Plugin-Methode kann jedoch gut geeignet sein, wenn Sie mehr Konfigurations-/Anpassungsoptionen benötigen. Das Beste an der Plugin-Methode ist, dass Sie die vollständige Kontrolle über das erstellte Widget haben.

Wählen Sie also eine Methode entsprechend Ihrer Verwendung und Ihren Vorlieben.

Wir hoffen, dass dieser Leitfaden Ihnen hilft, den erforderlichen Filter zu Ihrem WooCommerce-Shop hinzuzufügen. Also, welche Methode wirst du verwenden und warum? Die Standardmethode oder die Plugin-Methode?

Lass es uns in den Kommentaren wissen!

Wenn Sie an anderen ähnlichen Artikeln interessiert sind, können Sie sich unser Blog-Archiv ansehen oder diese handverlesenen Beiträge durchgehen:

• Beste WooCommerce-Produktsuche-Plugins (im Vergleich)
• WooCommerce-Tipps zur Optimierung Ihres Online-Shops
• So fügen Sie WooCommerce-Produktattribute mit Variationen hinzu: 2 Methoden