So fügen Sie WooCommerce AJAX-Produktfilter hinzu

Möchten Sie AJAX-Produktfilter für Ihre Website erstellen? Sie sind an der richtigen Stelle. In diesem Artikel zeigen wir Ihnen, wie Sie WooCommerce-Produktfilter hinzufügen , um das Einkaufserlebnis in Ihrem Geschäft zu verbessern .

Bevor wir uns den Vorgang zum Erstellen und Hinzufügen von Produktfiltern ansehen, wollen wir besser verstehen, was AJAX-Produktfilter sind und warum Sie sie benötigen.

Was sind AJAX-Produktfilter?

Produktfilter helfen dem Benutzer, sein gewünschtes Produkt schnell zu finden, indem Anforderungen festgelegt und alle unerwünschten Ergebnisse herausgefiltert werden. Wenn ein Kunde beispielsweise ein blaues T-Shirt wünscht, wählt er ein T-Shirt als Produkttyp und den blauen Farbfilter aus, um alle anderen Produkte und Farben zu verwerfen. Ebenso kann es Filter für Größe, Gewicht, Preis, durchschnittliche Bewertung usw. geben.

Der Begriff AJAX bezeichnet eine Technik der Webentwicklung, die es ermöglicht, die Seite bei kleinen Datenmengen asynchron zu aktualisieren. Dadurch kann die Website geringfügige Änderungen an einer Webseite vornehmen, während sie auf derselben Seite bleibt, was bedeutet, dass keine Aktualisierung erforderlich ist. Umgekehrt musste bei älteren Techniken die gesamte Webseite jedes Mal neu geladen werden, wenn eine geringfügige Änderung die Benutzererfahrung beeinträchtigte und mehr Serverressourcen verbrauchte.

Warum sollten Sie Produktfilter verwenden?

Hier stellt sich nun die Frage, warum Sie Produktfilter in Ihrem Shop verwenden sollten? Einfach ausgedrückt, Sie benötigen Produktfilter, um das Einkaufserlebnis Ihrer Kunden zu verbessern und ihnen zu helfen, das zu finden, wonach sie suchen. Fast jeder Online-Shop mit einer großen Anzahl oder Vielfalt von Produkten verwendet Produktfilter. Amazon, eBay und Zara sind gute Beispiele dafür.

Durch die Verwendung von Filtern können Käufer alle unerwünschten Ergebnisse einfach verwerfen und erhalten eine Auswahl nur der Produkte, an denen sie interessiert sind. Dies führt zu einer besseren Kundenzufriedenheit, was zu mehr Conversions und Verkäufen führt.

Andererseits können Kunden ohne AJAX-Produktfilter Schwierigkeiten haben, die gewünschten Produkte zu finden. Online-Shopping sollte schnell und einfach sein. Wenn der Vorgang also zu lange dauert, verlassen Kunden Ihr Geschäft und gehen zu einer anderen Website, die ein besseres Erlebnis bietet.

Da Sie Ihre Kunden wahrscheinlich nicht verlieren möchten, sollten Produktfilter ein wichtiger Bestandteil Ihrer Online-Geschäftsstrategie sein.

Nachdem Sie nun ihre Bedeutung kennen, sehen wir uns an, wie Sie Produktfilter in Ihrem WooCommerce-Shop aktivieren können.

So fügen Sie WooCommerce-Produktfilter hinzu

In diesem Tutorial zeigen wir Ihnen zwei verschiedene Möglichkeiten, Produktfilter zu Ihrem Shop hinzuzufügen.

1. Standard-WooCommerce-Produktfilter
2. Verwenden eines Plugins eines Drittanbieters

Schauen wir uns beide Methoden an.

1. Standard-WooCommerce-Produktfilter

Standardmäßig bietet WooCommerce einige grundlegende Produktfilter an. Wenn Sie ein relativ kleines Geschäft ohne eine große Auswahl an Produkten haben, werden Sie möglicherweise feststellen, dass die Standardfilter für Ihre Anforderungen ausreichen.

Um diese Filter zu Ihrem Shop hinzuzufügen, gehen Sie einfach zum WP Admin Dashboard und navigieren Sie zu Aussehen > Widgets. Dort finden Sie eine Liste aller verfügbaren Widgets für Ihre Website.

Wenn Sie WooCommerce aktiviert haben, finden Sie die Standard-Produktfilter in der Widgets-Liste. Klicken Sie einfach auf das gewünschte Filter-Widget und ziehen Sie es in einen der Widget-Bereiche, die von Ihrem Design unterstützt werden. In unserem Fall fügen wir die Produktfilter der Seitenleiste hinzu.

Das ist buchstäblich alles, was Sie tun müssen, um die standardmäßigen WooCommerce-Produktfilter zu Ihrem Geschäft hinzuzufügen.

Standardproduktfilter

Standardmäßig gibt es drei Arten von Produktfiltern: Preis, Attribut und durchschnittliche Bewertung.

• Nach Preis filtern: Fügt einen Schieberegler hinzu, mit dem Sie Produkte basierend auf der Preisspanne filtern können
• Nach Attributen filtern: Sie können Artikel anhand ihrer Attribute wie Größe, Gewicht, Farbe und mehr filtern. Beachten Sie, dass Sie für jedes Attribut ein separates Widget hinzufügen müssen
• Nach durchschnittlicher Bewertung filtern : Wie der Name schon sagt, können Sie Produkte nach ihrer durchschnittlichen Bewertung filtern

Da die WooCommerce-Standardproduktfilter vorkonfiguriert sind, müssen Sie sie nicht einrichten. Ziehen Sie sie einfach in einen Widget-Bereich, und das war's. Ihre Optionen sind jedoch recht einfach, sodass sie nicht viele Anpassungsoptionen zum Bearbeiten von Schriftarten, Formen oder Schiebereglern bieten.

Auch wenn die standardmäßigen WooCommerce-Produktfilter für die meisten Benutzer da draußen ausreichen, gibt es einen Haken. Jedes Mal, wenn ein Kunde einen Filter auswählt, muss die gesamte Seite neu geladen werden, damit die Änderung übernommen wird. Wie Sie sich vorstellen können, ist dies für die Benutzer ärgerlich und beeinträchtigt ihr Einkaufserlebnis. Aus diesem Grund sollten Sie AJAX-Produktfilter hinzufügen.

Leider unterstützt WooCommerce standardmäßig keine AJAX-Filter, sodass Sie auf Plugins von Drittanbietern angewiesen sind.

2. Verwendung eines Drittanbieter-Plugins

Es gibt mehrere Tools, mit denen Sie WooCommerce-Produktfilter hinzufügen können. Für dieses Tutorial verwenden wir Advanced AJAX Product Filters , die von BeRocket entwickelt wurden. Dies ist ein funktionsreiches Freemium-Tool, das eine reibungslose Benutzererfahrung gewährleistet.

Das Plugin ist auf AJAX-Produktfilter spezialisiert und bietet eine große Auswahl an Filtern mit benutzerdefiniertem Design, die dem Erscheinungsbild Ihres Shops entsprechen. Es ermöglicht auch Einzel- und Gruppenfilter, und Sie können Ihre allgemeinen Einstellungen festlegen, die für beide Filtertypen gelten.

Lassen Sie uns nun sehen, wie Sie dieses Plugin zu Ihrem WooCommerce-Shop hinzufügen können.

Schritt 1: Installieren Sie das Plugin

Zuerst müssen Sie das Plugin installieren. Gehen Sie dazu zum WP Admin Dashboard und navigieren Sie zu Plugins > Neu hinzufügen.

Suchen Sie nach den erweiterten AJAX-Produktfiltern von BeRocket. Klicken Sie auf die Schaltfläche Installieren , um das Plugin zu installieren und dann zu aktivieren .

Gehen Sie danach zu BeRocket > Produktfilter , wo Sie Ihre Einstellungen für die Filter festlegen können. Dies sind keine technischen Einstellungen, sondern allgemeine Einstellungen und Anpassungsoptionen, die Sie nach Belieben konfigurieren können. Sie können die Anzahl der Attributwerte auswählen, Werte ausblenden und mehr.

Nachdem Sie das Plugin installiert und konfiguriert haben, erstellen wir nun Ihren ersten Filter.

Schritt 2: Erstellen Sie einen neuen Produktfilter

Um einen Produktfilter zu erstellen, gehen Sie zum WP Admin Dashboard und gehen Sie zu BeRocket > Filters.

Drücken Sie auf der Einstellungsseite die Schaltfläche Filter hinzufügen.

Eine neue Einstellungsseite wird angezeigt und Sie müssen alle Details ausfüllen, um einen Filter zu erstellen. Es gibt mehrere Abschnitte, die Sie ausfüllen müssen, also schauen wir sie uns nacheinander an.

• Titel: Geben Sie Ihrem Filter einen aussagekräftigen Titel, damit er leicht verständlich ist, z. B. Größe, Farbe, Bewertung usw
• Bedingungen: Sie können Bedingungen festlegen, um den Filter auf bestimmten Seiten, Produkten oder Kategorien anzuzeigen. Sie können mehrere Bedingungen und sogar verschachtelte Bedingungen hinzufügen. Sie können den Filter auch auf bestimmten Gerätetypen wie Mobilgeräten, Tabs oder Desktops ausblenden
• Widget-Typ: Hier müssen Sie die Art des Filters auswählen, den Sie erstellen möchten. Es stehen vier Typen zur Auswahl: Filter, Schaltfläche "Produkte aktualisieren", Schaltfläche "Produkte zurücksetzen" und Bereich "Ausgewählte Filter".
• Attribute und Werte: Geben Sie das Attribut für den aktuellen Filter an
• Stil: Gestalten und passen Sie den Filter an. Sie erhalten mehrere Layouts zur Auswahl, z. B. Kontrollkästchen, Dropdown-Menü, Farbfeld, Schieberegler und mehr
• Erforderliche Optionen: Geben Sie alle verfügbaren Optionen unter diesem Filter an. Stellen Sie beispielsweise alle für den Farbfilter verfügbaren Farben bereit
• Zusätzlich: Dieser Abschnitt enthält nur Einstellungen. Es gibt mehrere Optionen, die Sie nach Ihren Anforderungen einstellen können

Nachdem Sie das Formular ausgefüllt haben, klicken Sie auf die Schaltfläche Filter speichern , um den Filter zu erstellen.

Verwalten Sie Ihre Filter

Dann können Sie zu BeRocket > Filter navigieren, um alle Ihre erstellten Filter an einem Ort zu finden. Auf dieser Seite können Sie jeden gewünschten Filter bearbeiten, aktivieren, deaktivieren und sogar entfernen.

Herzliche Glückwünsche! Sie haben jetzt Ihren ersten WooCommerce-Produktfilter mithilfe eines Plugins erstellt. Ebenso können Sie so viele Filter erstellen, wie Sie benötigen, um das Erlebnis Ihrer Kunden zu verbessern.

Aber das ist es nicht! Sie haben vorerst einen individuellen Filter erstellt, aber Sie können noch einen Schritt weiter gehen und Filtergruppen erstellen. Mit diesem Plugin können Sie Filter mit ähnlichen Attributen in einer Gruppe zusammenführen. Beispielsweise können Größe, Gewicht und Farbe kombiniert werden, um eine Filtergruppe mit dem Namen Physische Attribute zu erstellen. Filtergruppen sind einfach zu verwalten und halten Ihre Seitenleiste organisiert, falls Sie zu viele Filter haben.

Sehen wir uns nun an, wie man Produktfiltergruppen in WooCommerce mit erweiterten AJAX-Produktfiltern hinzufügt.

Schritt 3: Erstellen Sie eine Filtergruppe

Navigieren Sie in Ihrem WordPress-Dashboard zu BeRocket > Gruppen und klicken Sie auf die Schaltfläche Filtergruppe hinzufügen, um eine Filtergruppe zu erstellen.

Füllen Sie auf der Einstellungsseite das Formular Neue Filtergruppe hinzufügen genauso aus, wie Sie es zuvor für die einzelnen Filter getan haben. Dieser ist etwas anders, also schauen wir uns die Optionen an:

• Titel: Hier gibt es keine Geheimnisse, geben Sie Ihrer Filtergruppe einfach einen klaren und aussagekräftigen Titel
• Bedingungen: Legen Sie die Bedingungen fest, wenn Sie den Filter auf bestimmten Seiten oder Kategorien anzeigen möchten. Sie können mehrere Bedingungen sowie verschachtelte Bedingungen hinzufügen. Sie können den Filter auch für ein bestimmtes Gerät ausblenden
• Gruppeneinstellungen: Sie können auswählen, welche einzelnen Filter Sie dieser Gruppe hinzufügen möchten. Wählen Sie den gewünschten Filter aus dem Dropdown-Menü aus und klicken Sie auf Filter hinzufügen, um ihn der Gruppe hinzuzufügen. Ebenso können Sie beliebig viele Filter hinzufügen

Wenn Sie fertig sind, klicken Sie oben rechts auf die Schaltfläche Speichern , um die Filtergruppe zu speichern.

Jetzt können Sie zu BeRocket > Gruppen navigieren und sich alle Ihre Filtergruppen an einem Ort ansehen. Auf dieser Seite können Sie auch Gruppen verwalten, bearbeiten oder entfernen.

Nachdem wir sie erstellt haben, ist es an der Zeit, diese Filter im Shop-Frontend anzuzeigen.

Schritt 4: Zeigen Sie die Filter an

Gehen Sie in Ihrem WP Admin Dashboard zu Aussehen > Widgets.

Suchen Sie die Widgets „ AAPF Filters Single “ und „AAPF Filters Group“ und ziehen Sie sie per Drag-and-Drop in den gewünschten Widgetbereich. Beachten Sie, dass Sie das Widget für jeden Filter separat hinzufügen müssen. Wählen Sie den Filter aus, den Sie diesem Widget hinzufügen möchten, und klicken Sie auf Speichern .

Bravo! Du hast es geschafft. Die Filter werden nun im Frontend Ihres Shops im entsprechenden Widget-Bereich angezeigt.

Allerdings gibt es noch etwas anderes. Dies ist nicht die einzige Möglichkeit, Produktfilter zu Ihrem WooCommerce-Shop hinzuzufügen. Wenn Sie die Filter in einem anderen Bereich als den Widget-Bereichen anzeigen möchten, können Sie Shortcodes verwenden.

Schritt 5: Zeigen Sie die Filter außerhalb des Widgets-Bereichs mithilfe von Shortcodes an

Jeder Filter hat einen Shortcode, den Sie verwenden können, um ihn überall auf Ihrer Website anzuzeigen. Gehen Sie zu BeRocket > Filter und Sie finden die Shortcodes für jeden Filter. Kopieren Sie einfach den Shortcode für den Filter, den Sie anzeigen möchten.

Gehen Sie danach zu der Seite/dem Beitrag, auf der Sie die Filter anzeigen möchten, klicken Sie auf das + -Symbol oben links und suchen Sie nach dem Shortcode-Block. Wählen Sie dann das Shortcode-Widget-Symbol aus, um Ihrer Seite/Ihrem Beitrag einen Shortcode-Bereich hinzuzufügen.

Fügen Sie nun den soeben kopierten Filter-Shortcode in den Shortcode-Bereich ein und klicken Sie auf Aktualisieren/Veröffentlichen in der oberen rechten Ecke, um die Änderungen live zu schalten.

Das ist es! Die Filter werden nun an Ihrer gewünschten Stelle angezeigt. Sie können zum Frontend navigieren, um die Änderungen anzuzeigen.

Schritt 6: Identifizieren Sie Probleme mit den Filtern

Halt einfach noch ein bisschen durch! Es gibt ein weiteres raffiniertes kleines Feature dieses Plugins, das wir gerne erwähnen würden. Dieses Filter-Plugin für WooCommerce-Produkte bietet Ihnen ein praktisches Tool, um Sie über den Status Ihrer aktiven Filter zu informieren. Darüber hinaus teilt es Ihnen mit, ob es Probleme mit einem bestimmten Filter gibt, und den Grund dafür, sodass Sie ihn beheben und ihn im Handumdrehen zum Laufen bringen können.

Um das Statustool für aktive Filter zu verwenden, melden Sie sich bei Ihrem WP-Admin an und navigieren Sie zum Frontend, wo die Filter angezeigt werden. Auf der oberen schwarzen Leiste sehen Sie die Registerkarte Produktfilter mit einem Raketensymbol. Klicken Sie auf diese Registerkarte, und es werden alle nützlichen Informationen angezeigt.

Alles erledigt! Herzliche Glückwünsche! Sie können jetzt erfolgreich Produktfilter in Ihrem WooCommerce-Shop erstellen, aktualisieren und anzeigen und sich auch vor möglichen Problemen mit den Filtern in Acht nehmen.

Fazit

Alles in allem sind WooCommerce-Produktfilter ein Muss, wenn Sie eine große Anzahl von Produkten oder ein vielfältiges Sortiment haben. Sie sind sehr praktisch für die Kunden, da sie ihnen helfen, die gesuchten Produkte schneller zu finden und ihr Einkaufserlebnis zu verbessern.

Als Ladenbesitzer ist die Kundenzufriedenheit von größter Bedeutung und kann Ihnen helfen, Ihren Umsatz zu steigern. Wenn Ihre Käufer andererseits nicht schnell finden, was sie suchen, werden sie wahrscheinlich gehen und nicht wiederkommen.

In diesem Tutorial haben wir gesehen, wie Sie Produktfilter zu Ihrem WooCommerce-Shop hinzufügen und sicherstellen können, dass Benutzer finden, was sie wollen.

Zusammenfassend haben wir gelernt:

• Was sind AJAX-Produktfilter?
• Vorteile von WooCommerce-Produktfiltern
• So fügen Sie WooCommerce-Produktfilter hinzu
  • Standard-WC-Produktfilter
  • Verwenden eines Plugins eines Drittanbieters

Haben Sie versucht, Produktfilter zu Ihrem Shop hinzuzufügen? Welche Methode haben Sie angewendet und wie sind Ihre Erfahrungen? Lassen Sie es uns im Kommentarbereich unten wissen.