JetSmartFilters Anleitung: Filter für Shop und Listings

Ab etwa zwanzig Produkten, Objekten oder Kursen beginnt das Scrollen. Besucher wollen nicht durch alles blättern, sie wollen „rote Jacken in Größe M unter 100 Euro“ oder „Wohnungen mit Balkon in Salzburg-Stadt“. Ohne Filter springen sie ab.

WooCommerce bringt ein paar einfache Filter mit, Elementor praktisch keine. JetSmartFilters füllt diese Lücke: Es baut Filter, Suche, Sortierung und Seitenumbruch, die ohne Neuladen der Seite reagieren.

Ich setze es vor allem in zwei Situationen ein: in WooCommerce-Shops mit vielen Varianten und in Verzeichnissen, die mit JetEngine gebaut sind. In dieser Anleitung zeige ich, was das Plugin kann und wie Sie den ersten Filter einrichten.

Die kurze Antwort

JetSmartFilters lohnt sich, wenn Ihre Besucher in einer größeren Menge gleichartiger Einträge suchen: Shop, Immobilien, Kurse, Mitgliederverzeichnis. Es arbeitet mit Elementor, dem Block-Editor und Bricks.

Bei einem Shop mit zwölf Produkten oder einem Blog mit ein paar Kategorien brauchen Sie es nicht. Eine gute Kategorie-Navigation reicht da.

Was JetSmartFilters kann

Laut der offiziellen Produktseite bietet JetSmartFilters:

• WooCommerce-Filter nach Marke, Preis, Bewertung, Material, Farbe, Größe, Saison oder Aktion (neu, empfohlen, im Angebot).
• Kategoriefilter, auch hierarchisch, damit der Pfad durch die Kategorien sichtbar bleibt.
• Filter nach Metafeldern eigener Inhaltstypen, etwa für Portfolio, Profile oder Speisekarten.
• Suchfilter nach Name, Inhalt und Begriffen, im Shop wie seitenweit.
• Sortierung nach Marke, Beliebtheit, Aktualität, Bewertung, Alphabet, Entfernung, Größe und weiteren Kriterien.
• AJAX-Filterung, also Ergebnisse ohne Neuladen der Seite.
• Aktive Filter und Tags, damit Besucher sehen, was gerade gefiltert ist, und einzelne Kriterien wieder entfernen können.
• Paginierung, damit nicht hunderte Einträge auf einmal laden.
• Zusatzfunktionen wie Permalink-Struktur für Filter, URL-Aliase, Filter über mehrere Feldschlüssel, mehrere Provider gleichzeitig, hierarchische Auswahl und einen Indexer, der die Trefferzahl pro Option anzeigt.

Als Datenquellen nennt Crocoblock WordPress-Beiträge, eigene Inhaltstypen, WooCommerce, JetEngine, ACF, Pods und Meta Box. Mit Version 3.7.0 kam ein eigener JSF-Listing-Provider dazu, mit dem sich Listings direkt in der Oberfläche von JetSmartFilters bauen lassen.

Schritt für Schritt: JetSmartFilters einrichten

Praxisbeispiel: Ein kleiner Bekleidungsshop will seine Produktübersicht nach Kategorie und Preis filterbar machen.

1. Plugin installieren und Lizenz aktivieren. Laden Sie JetSmartFilters aus Ihrem Crocoblock-Konto herunter, installieren Sie es unter Plugins → Installieren → Plugin hochladen und aktivieren Sie die Lizenz im Crocoblock-Dashboard in WordPress.

2. Datenbasis prüfen. Filter können nur filtern, was sauber gepflegt ist. Prüfen Sie, ob jedes Produkt eine Kategorie und einen Preis hat. Bei JetEngine-Listings gilt dasselbe für die Metafelder.

3. Ersten Filter anlegen. Im neuen Menü Smart Filters legen Sie einen Filter an. Wählen Sie als Typ „Checkboxes“, als Datenquelle die Taxonomie „Produktkategorien“. Vergeben Sie einen verständlichen Namen, etwa „Kategorie“.

4. Zweiten Filter anlegen. Für den Preis wählen Sie einen Bereichsfilter (Range) und als Quelle den Produktpreis.

5. Produktliste platzieren. Auf der Shop-Seite steht ein Widget oder Block, der die Produkte ausgibt, zum Beispiel ein Produkt-Grid oder ein JetEngine-Listing-Grid. Notieren Sie sich, welches Element das ist.

6. Filter auf die Seite setzen. Fügen Sie das passende Filter-Widget ein (Checkboxes für die Kategorie, Range für den Preis). In den Einstellungen wählen Sie den eben angelegten Filter und als „Provider“ genau das Element aus Schritt 5. Stehen mehrere Listen auf derselben Seite, vergeben Sie eine Query-ID, damit der Filter die richtige trifft.

7. Verhalten festlegen. Entscheiden Sie, ob der Filter sofort per AJAX reagiert oder erst nach Klick auf einen „Anwenden“-Button. Bei vielen Filtern ist der Button angenehmer, sonst lädt die Liste bei jedem Häkchen neu.

8. Testen. Im Frontend wählen Sie eine Kategorie und ziehen den Preisregler. Die Liste aktualisiert sich ohne Neuladen. Ergänzen Sie zum Schluss die Widgets für aktive Filter und Paginierung.

Drei Praxisbeispiele

Outdoor-Shop in Tirol. Filter nach Marke, Größe, Farbe und Preis, dazu eine Sortierung nach Beliebtheit. Der Indexer zeigt bei jeder Option, wie viele Produkte übrig bleiben, damit niemand in einer leeren Trefferliste landet.

Ferienwohnungen im Pinzgau. Ein JetEngine-Verzeichnis mit Wohnungen, filterbar nach Ort, Personenzahl und Ausstattung. Mit der Sortierung nach Entfernung finden Gäste die Unterkunft nahe am Lift.

Branchenverzeichnis eines Vereins. Mitgliedsbetriebe nach Branche und Bezirk filterbar, mit Suchfeld für den Firmennamen. Die gefilterte Ansicht hat eine eigene URL und lässt sich weitergeben.

Typische Fehler und wie Sie sie vermeiden

• Falscher Provider. Der häufigste Grund, warum „nichts passiert“: Der Filter ist mit einem anderen Element verbunden als dem, das die Liste ausgibt. Prüfen Sie Provider und Query-ID zuerst.
• Caching zerschießt die Ergebnisse. Aggressive Cache- oder Optimierungs-Plugins, die JavaScript zusammenfassen, stören die AJAX-Filterung gern. Testen Sie nach jeder Cache-Einstellung.
• Zu viele Filter. Zwölf Filter in der Seitenleiste überfordern Besucher und verlangsamen die Abfragen. Starten Sie mit drei bis fünf, die wirklich gesucht werden.
• Unsaubere Daten. Wenn die Hälfte der Produkte keine Farbe gepflegt hat, liefert der Farbfilter falsche Ergebnisse. Das ist kein Plugin-Problem.
• Indexer bei großen Datenmengen. Die Trefferzählung ist praktisch, kostet aber Rechenzeit. Bei sehr großen Katalogen gezielt einsetzen. Mehr zur Ladezeit steht in Elementor Performance optimieren.

Lohnt sich JetSmartFilters? Kosten und Alternativen

Laut Produktseite kostet die Einzellizenz 75 US-Dollar pro Jahr für eine Website, zeitweise zeigt Crocoblock dort einen reduzierten Aktionspreis. Das All-Inclusive-Paket mit allen 23 JetPlugins liegt bei 199 US-Dollar pro Jahr, All-Inclusive Plus bei 249 US-Dollar pro Jahr. (Preisstand Oktober 2026 — bitte vor dem Kauf prüfen.)

Nutzen Sie bereits JetEngine, ist das Paket fast immer die bessere Rechnung, weil die beiden zusammen ihre Stärke ausspielen. Für einen reinen WooCommerce-Shop kann die Einzellizenz reichen. JetSmartFilters bei Crocoblock ansehen

Als Alternative gibt es die Filterblöcke, die WooCommerce selbst mitbringt. Für kleine Shops reichen sie oft. Für Verzeichnisse mit eigenen Feldern, Karten und Listings bietet JetSmartFilters deutlich mehr. Wer seinen Shop insgesamt besser aufstellen will, findet in der WooCommerce-Schulung den passenden Rahmen, den Überblick über alle Plugins in meiner Crocoblock-Übersicht.

Häufige Fragen

Funktioniert JetSmartFilters ohne JetEngine?

Ja. Es arbeitet auch mit WooCommerce-Produkten und normalen WordPress-Beiträgen. Mit JetEngine zusammen kann es aber eigene Felder, Beziehungen und Karten filtern, und das ist der häufigste Einsatz.

Lädt die Seite beim Filtern neu?

Nicht, wenn Sie AJAX-Filterung wählen. Dann aktualisiert sich nur die Liste. Alternativ können Sie einen „Anwenden“-Button einsetzen.

Sind gefilterte Seiten für Google sichtbar?

JetSmartFilters bietet eine Permalink-Struktur und URL-Aliase für Filter. Ob Sie gefilterte Ansichten indexieren lassen wollen, ist eine SEO-Entscheidung. Für die meisten Shops sollten nur wenige, sinnvolle Kombinationen in den Index.

Mit welchen Page Buildern funktioniert es?

Laut Crocoblock mit Elementor, dem Block-Editor und Bricks.

Hilfe beim Einrichten

Wenn Sie JetSmartFilters nicht allein einrichten möchten: In meiner Elementor-Schulung richte ich die Filter mit Ihnen gemeinsam an Ihrer eigenen Website ein, remote, € 109,– pro Stunde. Die Grundlage für viele Filterprojekte erkläre ich in der JetEngine Anleitung.