Bienvenue dans ce guide pratique où je vais t’expliquer comment créer une grille de boucle Elementor WooCommerce avec des filtres de catégories et de tags.
Pour info, les grilles de boucle (loops) ont été introduite par Elementor lors de la mise à jour 3.11.
Grâce à ce tutoriel (tiré du Youtubeur Jeffrey), tu pourras rendre tes pages de boutique WooCommerce beaucoup plus intéressantes et fonctionnelles.
Nous allons uniquement utiliser Elementor Pro et WooCommerce, sans plugins supplémentaires ni code complexe. C’est parti !
Table des matières
🛠️ Étape 1 : Activer le filtre de taxonomie
Pour commencer, tu dois suivre quelques étapes préliminaires.
Accède aux paramètres d’Elementor, puis va dans la section des fonctionnalités.
Fais défiler vers le bas jusqu’à ce que tu trouves le filtre de taxonomie.
C’est cet outil que tu vas utiliser pour tes filtres de catégories et de tags.
Il fonctionne non seulement pour les articles de blog, mais aussi pour les produits. Active-le et enregistre tes modifications.
Auparavant, il était nécessaire d’activer la grille de boucle, mais celle-ci est désormais activée par défaut dans Elementor.
Assure-toi également d’avoir tes produits bien configurés avec des catégories. Ajoute quelques produits si besoin.
📦 Étape 2 : Créer une page d’archive de produits
Une fois que tes produits sont ajoutés et classés :
- Va dans les Modèles
- Ouvre le constructeur de thème (regarde la capture d’écran plus bas si besoin).
Tu vas créer un template d’archive de produits, semblable à une page de boutique.
⇒ Clique sur « Nouveau » et nomme-le « Page de boutique ».
Cela te permettra de commencer à construire ta page.
Pour cette étape, je vais construire la page à partir de zéro, sans utiliser de modèles préconçus.
Tu peux également copier des éléments d’autres pages pour gagner du temps, comme un en-tête ou une bannière. Mais enfin, ce n’est pas le sujet de ce tuto.
🎨 Étape 3 : Ajouter une grille de boucle
Ajoute maintenant une grille de boucle.
Recherche le widget « Grille de boucle » dans la bibliothèque de widgets d’Elementor et fais-le glisser dans ton conteneur.
Une fois que tu as ajouté le widget, clique sur « Créer un modèle » et commence à ajouter les éléments nécessaires comme l’image du produit, le titre, le bouton et le prix.
Utilise des tags dynamiques pour que chaque produit affiche ses informations respectives. Cela te permettra de maintenir une cohérence et d’automatiser le processus.
🖼️ Étape 4 : Configurer les éléments de la carte produit
Pour chaque élément, comme l’image, utilise la requête dynamique pour l’image du produit WooCommerce.
Assure-toi que la hauteur de l’image soit définie pour maintenir une uniformité dans la grille. Tu peux par exemple définir une hauteur de 200px. Teste et tu verras bien ce qui rend bien visuellement. Comprend en tout cas que ce paramètre est important pour présenter correctements tes visuels.
Règle le style de l’image pour qu’elle soit bien ajustée.
Pour le titre du produit, ajoute également le tag dynamique correspondant.
Répète ce processus pour le bouton « Ajouter au panier » et le prix du produit. N’oublie pas de styliser ces éléments pour qu’ils correspondent à ton thème global.
🔄 Étape 5 : Ajouter le filtre de taxonomie
Après avoir configuré ta grille de produits, il est temps d’ajouter le filtre de taxonomie.
Recherche le widget « Filtre de taxonomie » et place-le juste au-dessus de la grille de boucle.
Sélectionne le widget de la Grille de boucle et configure le filtre pour qu’il affiche tes catégories de produits (celles que tu souhaites du moins).
Ce filtre permettra à tes utilisateurs de filtrer les produits par catégorie. Tu peux également le configurer pour filtrer par tags ou types de produits.
Assure-toi que tout fonctionne correctement en vérifiant les paramètres.
🎉 Étape 6 : Styliser le filtre
Il est maintenant temps de styliser le filtre. Tu peux choisir de l’afficher en mode vertical ou horizontal, selon l’apparence que tu souhaites. Pour une meilleure expérience utilisateur, il est souvent recommandé de le centrer ou de l’aligner à gauche.
Pour le style du filtre, envisage d’utiliser un design en forme de pilule. Cela signifie que les options de filtre auront des coins arrondis et se démarqueront visuellement. Ajoute des couleurs et des effets de survol pour rendre le filtre plus interactif.
❓ FAQ
Quels sont les avantages d’utiliser Elementor pour créer des filtres WooCommerce ?
Elementor permet une personnalisation facile et visuelle sans nécessiter de compétences en codage. Tu peux créer des pages de produits attrayantes et fonctionnelles rapidement.
Mais ses possibilités en termes de filtres sont limitées par défaut. Il faudra compenser à l’aide de plugins dont je parle plus bas.
Est-ce que je peux utiliser d’autres plugins avec Elementor ?
Oui, bien que ce guide se concentre sur Elementor et WooCommerce, tu peux intégrer d’autres plugins pour des fonctionnalités avancées, comme JetFilters pour des filtres plus robustes.
Comment puis-je créer des filtres par produits, notes d’avis, etc ?
Tu ne pourras pas avec les loops d’Elementor. Il faudra soit utiliser un plugin (voir plus bas), soit utiliser un thème qui gère cette partie-là, comme Shoptimizer.
Comment puis-je ajouter plus de filtres ?
Pour des options de filtrage plus avancées, envisage d’utiliser des plugins comme JetFilters, WP Facets (que j’ai utilisé pour un projet client et qui est vraiment pas mal et puissant) ou WP GridBuilder, qui offrent une personnalisation plus poussée pour les boutiques WooCommerce.
💡 Conclusion
En suivant ces étapes, tu peux facilement configurer des filtres de catégories et de tags pour tes produits, rendant la navigation plus intuitive. Même si ce genre de filtre ne sera pas aussi complet qu’un vrai filtre e-commerce, au sens strict du terme.
N’hésite pas à expérimenter avec les styles et à ajuster les paramètres pour correspondre à ta vision.
PS : au fait, si tu veux gagner un temps fou sur la création de boutiques WooCommerce, jette un oeil à WooReady.
