Comment créer des barres latérales filtrées pour vos pages Divi WooCommerce

Si vous avez déjà essayé d'ajouter des barres latérales WooCommerce filtrées aux pages que vous avez créées avec des constructeurs de pages, vous avez probablement remarqué que les filtres n'apparaissent pas sur vos pages. Peu importe le générateur de page que vous utilisez, les filtres ne s'afficheront tout simplement pas.

La raison en est que ces widgets ne sont pas compatibles avec les constructeurs de pages. Dans cet article, nous examinerons un moyen simple de créer des barres latérales WooCommerce filtrées pour les pages créées avec Divi Builder ou tout autre constructeur de pages.

Barres latérales standard de WooCommerce

WooCommerce comprend plusieurs widgets filtrables.

• Filtrer les produits par attribut
• Filtrer les produits par prix
• Filtrer les produits par note

Ces widgets fonctionnent très bien sur les thèmes WordPress classiques, mais ils ne s'affichent pas sur les pages créées avec les constructeurs de pages.

Thèmes WordPress

Les widgets filtrables fonctionnent bien dans les pages créées avec des thèmes WordPress classiques. Le Twenty Seventeen les montre sur la barre latérale sans problème. J'utilise les exemples de données WooCommerce qui incluent les couleurs et les prix. Les produits de filtrage par attribut et par prix sont importants.

Voici Divi affichant la page de la boutique par défaut de WooCommerce sans utiliser le Divi Builder. Il affiche les widgets de filtrage comme n'importe quel thème normal.

Constructeurs WordPress

Les pages créées avec des constructeurs n'affichent pas les widgets de filtre WooCommerce. Cela ne fait aucune différence si la barre latérale est affichée dans le générateur ou en tant que barre latérale standard. Voici quelques exemples.

Cette page a été créée avec Beaver Builder. Il inclut la barre latérale, mais les filtres ne s'affichent pas. J'ai ajouté un widget de texte pour que vous puissiez voir que la barre latérale s'affiche sans les widgets de filtre. J'ai publié la page pour la voir en direct, mais cela n'a fait aucune différence.

Celui-ci a été construit avec Elementor. J'ai ajouté la barre latérale au-dessus des produits. Il affiche le widget texte mais pas les filtres. J'ai également publié la page pour la voir en direct mais il n'y avait aucune différence.

Voici le Divi Builder affichant la même barre latérale. L'utilisation du plugin ou du thème Divi Builder a eu le même résultat. J'ai publié la page pour la voir en direct, mais les filtres ne s'affichaient toujours pas.

Affichage des filtres WooCommerce dans les barres latérales du constructeur

Heureusement, il existe un moyen simple d'afficher un filtre de produit WooCommerce dans la barre latérale, même si vous créez la page du produit avec un générateur de page. Nous avons besoin d'un plugin appelé WooCommerce Product Filter.

Themify – Filtre de produits WooCommerce

WooCommerce Product Filter est un plugin gratuit de Themify qui fonctionne différemment des widgets de filtre de produit WooCommerce standard. Créez facilement plusieurs combinaisons de filtres. Créez le formulaire avec le générateur de formulaire glisser-déposer. Réglez-le sur une disposition verticale ou horizontale, choisissez le nombre de colonnes et stylisez-le en fonction de votre site Web. Il affiche les résultats de la recherche en direct et comprend de nombreuses options. Il est intuitif à utiliser et fonctionne avec tous les générateurs de thèmes.

Création d'un nouveau filtre de produits

Installez le plugin depuis le dépôt WordPress. Dans le menu Tableau de bord, accédez à Filtres de produits > Filtres de produits > Ajouter un nouveau . Vous obtiendrez un modal avec tout ce dont vous avez besoin pour créer le filtre. Parcourez les paramètres pour créer votre shortcode. Plutôt que d'avoir trois widgets de filtre, ce filtre peut créer plusieurs types de filtres personnalisés pour créer un nombre quelconque de widgets.

Donnez-lui un titre qui décrit le filtre. Choisissez parmi une disposition verticale ou horizontale, si vous souhaitez afficher les champs vides, le tri des produits, le nombre de produits et les produits en rupture de stock. Choisissez d'afficher ou non la pagination et choisissez entre un défilement standard, infini ou en charger plus.

Entrez le nombre de produits par page. Choisissez si vous souhaitez que les groupes de champs soient basculables, pour faire défiler jusqu'au résultat, choisissez entre la logique ET ou OU pour les taxonomies, et si les résultats s'affichent sur la page actuelle ou sur une nouvelle page. Si vous choisissez une nouvelle page, vous pourrez sélectionner la page dans une liste. Vous pouvez également choisir si le filtre s'affiche ou non sur la nouvelle page.

Une fois que vous avez fait vos sélections, vous devez créer le formulaire. Cela déterminera comment le filtre apparaîtra dans la barre latérale. Faites glisser chacun des éléments de formulaire que vous souhaitez dans le champ en bas de l'écran de création de shortcode.

Chaque élément ouvre un nouvel ensemble de fonctionnalités. Chacun est différent, mais la plupart ont des options similaires. Voici un aperçu de la catégorie.

Donnez-lui un titre. Vous pouvez masquer le titre si vous le souhaitez. Choisissez d'afficher ou non le nombre de produits, la hiérarchie des catégories et d'inclure les enfants. Affichez le filtre sous forme de case à cocher, de liens, de boutons radio, de liste déroulante ou de sélection multiple. Choisissez la logique, définissez l'ordre de tri et choisissez la disposition avec le nombre de colonnes. Définissez les couleurs du texte. Vous pouvez également choisir les catégories à inclure ou à exclure.

Si vous choisissez la couleur, les icônes ouvriront un ensemble de sélecteurs de couleurs où vous pourrez définir les couleurs de chaque catégorie de produits individuellement. Définissez la couleur de l'arrière-plan et du texte. Vous pouvez choisir les couleurs dans les sélecteurs ou entrer les codes hexadécimaux dans les champs.

Vous pouvez également faire glisser et déposer les champs dans l'ordre que vous souhaitez. Une fois le filtre créé, sélectionnez Enregistrer .

Fermez le modal et vous verrez votre filtre ajouté à la liste. Il fournit le nom, le shortcode et la liste des champs du filtre. Vous pouvez modifier, exporter ou supprimer le filtre. Copiez le shortcode.

Ajoutez un widget de texte à votre barre latérale et collez le shortcode.

Les filtres s'affichent désormais dans les pages de boutique créées avec les constructeurs. Voici la page avec le Divi Builder.

Voici le filtre affiché sur la page faite par Beaver Builder dans le thème Twenty Sixteen.

Voici le filtre avec Elementor dans le thème Twenty Seventeen. Celui-ci utilise une disposition horizontale.

Utilisation du filtre de produits Themify - WooCommerce avec les mises en page Divi

Divi propose de nombreuses configurations de boutique. Dans cet exemple, j'ai ajouté un module de texte à la page Magasin de meubles et placé le shortcode du filtre dans le module de texte. J'aurais pu choisir le module de la barre latérale, mais cela n'a pas vraiment d'importance avec cet exemple.

C'est la disposition verticale. Il s'intègre parfaitement dans la conception de la mise en page.

J'ai réglé les boutons pour qu'ils correspondent au style de la mise en page. Malheureusement, je n'ai pas pu ajuster le bouton de recherche.

Voici la disposition horizontale. Cet exemple utilise toujours la disposition des colonnes 3/2 que j'ai choisie pour le filtre vertical.

Les filtres s'ouvrent au survol. Il est réactif, il s'affiche donc verticalement pour s'adapter à la colonne.

Pour celui-ci, j'ai placé le filtre sous le module boutique.

Voici le filtre au-dessus du module de la boutique.

Que vous utilisiez le shortcode dans un module de texte ou dans une barre latérale, vous pouvez ajouter du style à l'aide de l'onglet Conception du module Divi. Cela signifie que vous pouvez styliser le texte de l'étiquette en stylisant le texte du module. Dans cet exemple, j'ai mis le texte en rouge, augmenté la taille et tout en majuscules.

Filtrage des produits WooCommerce

Pour effectuer la recherche, l'utilisateur clique sur les boutons, coche les cases et fait glisser le curseur pour filtrer ce qu'il recherche. Ils peuvent également saisir un titre. Lorsqu'ils sont prêts, ils cliquent simplement sur le bouton de recherche.

Résultats de recherche

Les résultats s'afficheront alors comme vous l'avez configuré dans les paramètres. Pour celui-ci, je l'ai configuré pour les afficher en bas de la page. Il défile automatiquement jusqu'aux résultats et fournit à l'utilisateur une fonction de tri.

Si vous le configurez pour qu'il s'ouvre dans une nouvelle page, les résultats seront placés au bas de cette page. Dans cet exemple, j'ai créé une page en utilisant l'en-tête de la page Magasin de meubles. J'ai ouvert la fonction de tri pour afficher les options de tri.

Mettre fin aux pensées

C'est notre regard sur la façon de créer des barres latérales WooCommerce filtrées pour une page créée avec le Divi Builder. Le plugin est intuitif et ajoute de nombreuses fonctionnalités de filtrage aux produits WooCommerce. Vous pouvez créer autant de filtres que vous le souhaitez et les placer sur la page de votre choix. Vous pouvez même les coiffer avec les fonctionnalités de coiffage de Divi. Comme il s'agit d'un shortcode, vous pouvez les utiliser dans les barres latérales ou les modules.

J'aimerais avoir plus de contrôle sur la façon dont les résultats sont affichés. Par exemple, il serait utile de placer un shortcode là où le résultat apparaîtra. Cela permettrait aux résultats d'être placés n'importe où sur la page plutôt qu'en bas. Cela permettrait des pieds de page personnalisés, une zone de résultats dans une page, etc. J'aimerais également avoir quelques options de style supplémentaires. Principalement, je veux styliser le bouton de recherche.

Themify – WooCommerce Product Filter est un excellent choix si vous souhaitez un plugin gratuit pour ajouter un filtre de produit à vos pages Divi Builder.

Nous voulons de vos nouvelles. Avez-vous essayé le plugin Themify – WooCommerce Product Filter avec des pages de boutique réalisées avec le Divi Builder ? Faites-nous part de votre expérience dans les commentaires.

Image en vedette via Max Griboedov / shutterstock.com