Qu’est-ce que JetSmartFilters ?
JetSmartFilters est le plugin de filtres dynamiques de Crocoblock. Il ajoute des filtres AJAX à n’importe quelle liste Elementor : Loop Grid natif, JetEngine Listing Grid, WooCommerce Products, ou listings tiers. Quand un utilisateur clique sur un filtre, la liste se met à jour instantanément sans rechargement de page — comme sur SeLoger, Leboncoin, ou Amazon.
Types de filtres disponibles
Checkboxes / Radio : filtre le plus courant. L’utilisateur coche une ou plusieurs valeurs. Parfait pour catégorie, secteur d’activité, type de bien, marque. Checkboxes = sélection multiple, radios = valeur unique.
Range Slider : double curseur pour filtrer entre un minimum et un maximum. Indispensable pour les filtres de prix, surface, ou note. Intuitif sur mobile et desktop.
Select, Search, Date Range : menu déroulant pour une valeur unique (idéal pour de nombreuses valeurs comme les départements), barre de recherche textuelle compatible méta-champs JetEngine, sélecteur de dates pour filtrer par période (indispensable pour événements et réservations).
Configuration type : filtres sur un Listing Grid JetEngine
- Créez votre CPT avec JetEngine (ex : CPT « Professionnels » avec champs ville et spécialité)
- Créez un Listing Item template dans Elementor (carte d’un professionnel)
- Placez un Listing Grid sur votre page et sélectionnez le Listing Item
- Ajoutez des widgets JetSmartFilters sur la même page (Checkboxes spécialité, Select ville)
- Dans chaque filtre, choisissez la source (taxonomie ou méta-champ) et le Listing Grid cible
- Testez — les filtres mettent à jour le Listing Grid en temps réel
JetSmartFilters et les performances
JetSmartFilters utilise AJAX pour mettre à jour les résultats. Sur les projets 10 000+ entrées avec filtres complexes, utilisez un hébergement avec Redis ou Elasticsearch pour maintenir des temps de réponse < 300ms. Sur o2switch avec LiteSpeed, les requêtes sont généralement rapides jusqu’à 5 000 entrées.
→ Retour au guide Crocoblock pour Elementor
FAQ — JetSmartFilters Elementor Pro
JetSmartFilters est-il compatible avec le Loop Grid natif d’Elementor Pro ? Oui, depuis la version 3.0 de JetSmartFilters. Le Loop Grid d’Elementor Pro (introduit en version 3.8) peut être filtré par JetSmartFilters exactement comme un Listing Grid JetEngine. Dans les paramètres du widget filtre, sélectionnez le Loop Grid comme élément cible. Cette compatibilité est idéale si vous préférez utiliser les templates Elementor natifs plutôt que les Listing Item de JetEngine.
Peut-on lier plusieurs Listing Grids à un seul filtre JetSmartFilters ? Oui. Un widget filtre JetSmartFilters peut cibler plusieurs listings simultanément. Cas d’usage : une page avec un Listing Grid de propriétés ET une carte Google Maps (via JetEngine Maps Listing) qui se mettent à jour simultanément quand un filtre est activé. Ce couplage liste + carte est très utile pour les sites immobiliers et les annuaires géographiques.
Comment conserver les filtres JetSmartFilters sélectionnés lors du retour en arrière du navigateur ? Activez l’option « Indexation URL » dans les paramètres du filtre JetSmartFilters. Cette option encode les filtres actifs dans l’URL (?specialite=architecte&ville=paris) ce qui permet : (1) de conserver les filtres lors du retour navigateur, (2) de partager une URL avec des filtres pré-sélectionnés, (3) d’indexer des pages de résultats filtrés par Google.
JetSmartFilters fonctionne-t-il avec WooCommerce pour remplacer les filtres natifs ? Oui, c’est l’un des cas d’usage les plus courants. JetSmartFilters peut filtrer la grille de produits WooCommerce par attributs, catégories, prix (range slider) et tags — avec mise à jour AJAX sans rechargement. Les filtres natifs WooCommerce (Widgets de catégorie, prix) peuvent être désactivés au profit de JetSmartFilters qui offre un design entièrement personnalisable dans Elementor.
Peut-on avoir des filtres JetSmartFilters conditionnels (un filtre qui dépend d’un autre) ? Oui, via la fonctionnalité de filtres hiérarchiques (Hierarchical Filters). Par exemple, un filtre « Région » qui met à jour dynamiquement les options du filtre « Département » selon la région sélectionnée. Cette fonctionnalité est particulièrement utile pour les annuaires géographiques et les sites immobiliers avec de nombreuses catégories géographiques.