Elementor Multi-level filter function setup full tutorial

Dans ce tutoriel, nous montrons comment le Elementor a fait mouche Éléments illimités Plugin permettant d'ajouter des filtres à plusieurs niveaux aux produits ou aux articles. Cet article est basé sur le WooCommerce Grille de produits avec le widget "Filtres d'onglets" à titre d'exemple. Il s'agit d'un scénario d'application courant. En fait, les filtres à plusieurs niveaux peuvent être appliqués à de nombreux types d'articles, de galeries et d'autres contenus.

Vous trouverez ci-dessous un guide détaillé, étape par étape, de la mise en œuvre du filtrage multiniveau :

Étape 1 : Création de catégories et de sous-catégories

Avant de commencer, définissez les catégories et les sous-catégories de l'article ou du produit et affectez-les aux catégories appropriées.

Cela permet au filtre d'afficher le contenu selon une logique hiérarchique prédéfinie.

Étape 2 : Installer les widgets nécessaires

Nous devons d'abord installerÉléments illimités Plug-ins.

Cet exemple utilise le Filtres d'onglets Gadgets et Grille de produits WooCommerce Gadgets.

Ouvrez la bibliothèque de widgets d'Éléments illimités et recherchez ces deux widgets. Lorsque vous survolez les widgets, vous verrez un bouton "Installer", cliquez dessus pour terminer l'installation.

Étape 3 : Ajouter la grille de produits à la page

Ajouter le WooCommerce Product Grid Widget et définissez les critères de recherche des produits. Par exemple, vous pouvez afficher uniquement les produits de la catégorie "Hommes" ou "Femmes".

Notez que la relation entre les termes est définie sur "OR" lors de la configuration de la requête, sinon les résultats ne seront pas affichés correctement dans la grille lorsque plusieurs catégories sont sélectionnées.

Avant de passer à l'étape suivante, ouvrez le widget Grille de produits dans la fenêtre Ajax fonction de filtration.

Étape 4 : Activer le filtrage

Activez le filtrage Ajax dans les paramètres du gadget de la grille de produits, comme indiqué ici.

Étape 5 : Ajouter le filtre principal

Faites glisser un widget Tab Filters sur la page et définissez son rôle de filtre sur Filtre principal (Main).

Allez ensuite dans la section "Sélection des termes" et personnalisez la requête pour afficher les catégories que vous souhaitez dans l'onglet principal, par exemple "Vêtements pour hommes", "Vêtements pour femmes", "Vêtements pour femmes", et ainsi de suite. ".

Étape 6 : Ajouter des sous-filtres

Sous le filtre principal, ajoutez un autre widget Tab Filters et réglez son "rôle de filtre" sur Enfant.

Allez ensuite dans la section "Sélection des termes" et configurez les sous-catégories que vous souhaitez afficher. Dans cet exemple, sélectionnez "Hommes" comme catégorie parentale et cochez "Afficher les enfants de".

Avec cette configuration, le sousfiltreMise à jour dynamique en fonction de la sélection du filtre principalcatégorisationÉtiquettes.

résumés

Une fois les paramètres définis, prévisualisez la page pour vérifier si la fonction de filtrage multiniveau fonctionne comme prévu. Lorsque vous cliquez sur la catégorie principale (par exemple, "Vêtements pour hommes"), les sous-catégories correspondantes s'affichent dynamiquement en dessous ; lorsque vous cliquez sur une sous-catégorie, la grille de produits filtre automatiquement les produits correspondants.

En suivant ces étapes, le Elementor La mise en œuvre d'une fonction de filtrage à plusieurs niveaux permet de mieux organiser l'affichage du contenu des pages et d'aider les visiteurs à trouver rapidement l'information recherchée.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.