So erstellen Sie gefilterte Seitenleisten für Ihre Divi WooCommerce-Seiten

Wenn Sie jemals versucht haben, gefilterte WooCommerce-Sidebars zu Seiten hinzuzufügen, die Sie mit Page Buildern erstellt haben, haben Sie wahrscheinlich bemerkt, dass die Filter nicht auf Ihren Seiten angezeigt werden. Es spielt keine Rolle, welchen Page Builder Sie verwenden, die Filter werden einfach nicht angezeigt.

Der Grund dafür ist, dass diese Widgets nicht mit Seitenerstellern kompatibel sind. In diesem Artikel sehen wir uns eine einfache Möglichkeit an, gefilterte WooCommerce-Sidebars für Seiten zu erstellen, die mit dem Divi Builder oder einem anderen Page Builder erstellt wurden.

Standard-WooCommerce-Sidebars

WooCommerce enthält mehrere filterbare Widgets.

• Produkte nach Attribut filtern
• Produkte nach Preis filtern
• Produkte nach Bewertung filtern

Diese Widgets funktionieren hervorragend bei normalen WordPress-Themes, werden jedoch nicht auf Seiten angezeigt, die mit Page Buildern erstellt wurden.

WordPress-Themes

Die filterbaren Widgets funktionieren gut auf Seiten, die mit regulären WordPress-Themes erstellt wurden. Der Twenty Seventeen zeigt sie problemlos in der Seitenleiste an. Ich verwende die WooCommerce-Beispieldaten, die Farben und Preise enthalten. Die Produkte nach Attribut und Preis filtern sind prominent.

Hier ist Divi, das die WooCommerce-Standard-Shop-Seite zeigt, ohne den Divi Builder zu verwenden. Es zeigt die Filter-Widgets wie jedes normale Thema an.

WordPress-Builder

Seiten, die mit Buildern erstellt wurden, zeigen die WooCommerce-Filter-Widgets nicht an. Es macht keinen Unterschied, ob die Seitenleiste im Builder oder als Standard-Seitenleiste angezeigt wird. Hier sind ein paar Beispiele.

Diese Seite wurde mit Beaver Builder erstellt. Es enthält die Seitenleiste, aber die Filter werden nicht angezeigt. Ich habe ein Text-Widget hinzugefügt, damit Sie sehen können, dass die Seitenleiste ohne die Filter-Widgets angezeigt wird. Ich habe die Seite veröffentlicht, um sie live anzuzeigen, aber es hat keinen Unterschied gemacht.

Dieser wurde mit Elementor erstellt. Ich habe die Seitenleiste über den Produkten hinzugefügt. Es zeigt das Text-Widget, aber nicht die Filter. Ich habe die Seite auch veröffentlicht, um sie live zu sehen, aber es gab keinen Unterschied.

Hier ist der Divi Builder, der dieselbe Seitenleiste zeigt. Die Verwendung des Divi Builder-Plugins oder -Themas hatte das gleiche Ergebnis. Ich habe die Seite veröffentlicht, um sie live anzuzeigen, aber die Filter wurden immer noch nicht angezeigt.

Anzeigen von WooCommerce-Filtern in den Builder-Seitenleisten

Glücklicherweise gibt es eine einfache Möglichkeit, einen WooCommerce-Produktfilter in der Seitenleiste anzuzeigen, auch wenn Sie die Produktseite mit einem Page Builder erstellen. Wir brauchen ein Plugin namens WooCommerce Product Filter.

Themify – WooCommerce-Produktfilter

WooCommerce Product Filter ist ein kostenloses Plugin von Themify, das anders funktioniert als die standardmäßigen WooCommerce-Produktfilter-Widgets. Erstellen Sie ganz einfach mehrere Filterkombinationen. Erstellen Sie das Formular mit dem Drag-and-Drop-Formulargenerator. Stellen Sie es auf ein vertikales oder horizontales Layout ein, wählen Sie die Anzahl der Spalten und gestalten Sie es so, dass es zu Ihrer Website passt. Es zeigt Live-Suchergebnisse an und enthält viele Optionen. Es ist intuitiv zu bedienen und funktioniert mit allen Theme-Buildern.

Erstellen eines neuen Produktfilters

Installieren Sie das Plugin aus dem WordPress-Depot. Gehen Sie im Dashboard-Menü zu Produktfilter > Produktfilter > Neu hinzufügen . Sie erhalten ein Modal mit allem, was Sie zum Erstellen des Filters benötigen. Gehen Sie die Einstellungen durch, um Ihren Shortcode zu erstellen. Anstatt drei Filter-Widgets zu haben, kann dieser eine Filter mehrere Arten von benutzerdefinierten Filtern erstellen, um eine beliebige Anzahl von Widgets zu erstellen.

Geben Sie ihm einen Titel, der den Filter beschreibt. Wählen Sie aus einem vertikalen oder horizontalen Layout, ob leere Felder, Produktsortierung, Produktanzahl und nicht vorrätige Produkte angezeigt werden sollen. Wählen Sie aus, ob die Seitennummerierung angezeigt werden soll oder nicht und wählen Sie zwischen Standard, unendlichem Scrollen oder mehr laden.

Geben Sie die Anzahl der Produkte pro Seite ein. Wählen Sie, ob Sie Feldgruppen umschaltbar machen möchten, zum Ergebnis scrollen möchten, zwischen UND- oder ODER-Logik für die Taxonomien wählen und ob die Ergebnisse auf der aktuellen Seite oder einer neuen Seite angezeigt werden. Wenn Sie eine neue Seite auswählen, können Sie die Seite aus einer Liste auswählen. Sie können auch auswählen, ob der Filter auf der neuen Seite angezeigt wird oder nicht.

Nachdem Sie Ihre Auswahl getroffen haben, müssen Sie das Formular erstellen. Dadurch wird festgelegt, wie der Filter in der Seitenleiste angezeigt wird. Ziehen Sie jedes der gewünschten Formularelemente in das Feld am unteren Rand des Shortcode-Erstellungsbildschirms.

Jedes Element öffnet einen neuen Satz von Funktionen. Jeder ist anders, aber die meisten haben ähnliche Optionen. Hier ist ein Blick auf Kategorie.

Geben Sie ihm einen Titel. Sie können den Titel ausblenden, wenn Sie möchten. Wählen Sie aus, ob die Produktanzahl, die Kategoriehierarchie und untergeordnete Elemente angezeigt werden sollen. Zeigen Sie den Filter als Kontrollkästchen, Links, Optionsfelder, Dropdown-Felder oder Mehrfachauswahl an. Wählen Sie Logik, legen Sie die Sortierreihenfolge fest und wählen Sie das Layout mit der Anzahl der Spalten. Legen Sie die Textfarben fest. Sie können auch auswählen, welche Kategorien ein- oder ausgeschlossen werden sollen.

Wenn Sie die Farbe auswählen, öffnen die Symbole eine Reihe von Farbwählern, in denen Sie die Farben jeder Produktkategorie individuell festlegen können. Legen Sie die Farbe für den Hintergrund und den Text fest. Sie können die Farben aus den Pickern auswählen oder die Hex-Codes in die Felder eingeben.

Sie können die Felder auch in die gewünschte Reihenfolge ziehen und ablegen. Nachdem Sie den Filter erstellt haben, wählen Sie Speichern aus .

Schließen Sie das Modal und Ihr Filter wird der Liste hinzugefügt. Es enthält den Namen, die Kurzwahl und die Liste der Felder innerhalb des Filters. Sie können den Filter bearbeiten, exportieren oder löschen. Kopieren Sie den Shortcode.

Fügen Sie Ihrer Seitenleiste ein Text-Widget hinzu und fügen Sie den Shortcode ein.

Die Filter werden jetzt auf Shop-Seiten angezeigt, die mit Buildern erstellt wurden. Hier ist die Seite mit dem Divi Builder.

Hier ist der Filter, der auf der Seite von Beaver Builder im Twenty Sixteen-Thema angezeigt wird.

Hier ist der Filter mit Elementor im Twenty Seventeen-Thema. Dieser verwendet ein horizontales Layout.

Verwenden des Themify – WooCommerce-Produktfilters mit Divi-Layouts

Divi hat viele Shop-Layouts zur Auswahl. In diesem Beispiel habe ich der Seite Möbelgeschäft ein Textmodul hinzugefügt und den Filter-Shortcode innerhalb des Textmoduls platziert. Ich hätte das Sidebar-Modul wählen können, aber das spielt bei diesem Beispiel keine Rolle.

Dies ist das vertikale Layout. Es fügt sich gut in das Design des Layouts ein.

Ich habe die Schaltflächen so eingestellt, dass sie dem Layout des Layouts entsprechen. Leider konnte ich den Suchbutton nicht anpassen.

Hier ist das horizontale Layout. Dieses Beispiel verwendet immer noch das 3/2-Spalten-Layout, das ich für den vertikalen Filter gewählt habe.

Die Filter öffnen sich beim Schweben. Es reagiert reaktionsschnell, sodass es vertikal angezeigt wird, damit es in die Spalte passt.

Für dieses habe ich den Filter unter dem Shop-Modul platziert.

Hier ist der Filter über dem Shop-Modul.

Unabhängig davon, ob Sie den Shortcode in einem Textmodul oder in einer Seitenleiste verwenden, können Sie mithilfe der Registerkarte „Design“ des Divi-Moduls einige Stile hinzufügen. Dies bedeutet, dass Sie den Beschriftungstext formatieren können, indem Sie den Text des Moduls formatieren. In diesem Beispiel habe ich den Text auf Rot gesetzt, die Größe erhöht und in Großbuchstaben geschrieben.

Filtern von WooCommerce-Produkten

Um die Suche durchzuführen, klickt der Benutzer auf die Schaltflächen, aktiviert die Kontrollkästchen und verschiebt den Schieberegler, um zu filtern, wonach er sucht. Sie können auch einen Titel eingeben. Wenn sie fertig sind, klicken sie einfach auf die Suchschaltfläche.

Suchergebnisse

Die Ergebnisse werden dann so angezeigt, wie Sie es in den Einstellungen eingerichtet haben. Für dieses habe ich es so eingestellt, dass es unten auf der Seite angezeigt wird. Es scrollt automatisch zu den Ergebnissen und bietet dem Benutzer eine Sortierfunktion.

Wenn Sie festlegen, dass es auf einer neuen Seite geöffnet wird, werden die Ergebnisse unten auf dieser Seite platziert. In diesem Beispiel habe ich eine Seite mit der Kopfzeile der Seite Möbelgeschäftsladen erstellt. Ich habe die Sortierfunktion geöffnet, um die Sortieroptionen anzuzeigen.

Gedanken beenden

Das ist unser Blick darauf, wie man gefilterte WooCommerce-Sidebars für eine Seite erstellt, die mit dem Divi Builder erstellt wurde. Das Plugin ist intuitiv und fügt den WooCommerce-Produkten viele Filterfunktionen hinzu. Sie können beliebig viele Filter erstellen und auf einer beliebigen Seite platzieren. Sie können sie sogar mit den Styling-Funktionen von Divi stylen. Da es sich um einen Shortcode handelt, können Sie sie in Seitenleisten oder Modulen verwenden.

Ich hätte gerne mehr Kontrolle darüber, wie die Ergebnisse angezeigt werden. Es wäre beispielsweise hilfreich, einen Shortcode dort zu platzieren, wo das Ergebnis angezeigt wird. Auf diese Weise können die Ergebnisse an einer beliebigen Stelle auf der Seite und nicht am unteren Rand platziert werden. Dies würde benutzerdefinierte Fußzeilen, einen Ergebnisbereich innerhalb einer Seite usw. ermöglichen. Ich hätte auch gerne ein paar weitere Gestaltungsoptionen. Hauptsächlich möchte ich die Suchschaltfläche gestalten.

Themify – WooCommerce Product Filter ist eine gute Wahl, wenn Sie ein kostenloses Plugin wünschen, um Ihren Divi Builder-Seiten einen Produktfilter hinzuzufügen.

Wir wollen von dir hören. Haben Sie das Themify – WooCommerce Product Filter-Plugin mit Shop-Seiten ausprobiert, die mit dem Divi Builder erstellt wurden? Teilen Sie uns Ihre Erfahrungen in den Kommentaren mit.

Ausgewähltes Bild über Max Griboedov / shutterstock.com