WooCommerce : Résoudre le problème des filtres d'attributs invisibles

avatar de baptiste pagès
Par Baptiste Pagès le 27 avril 2021

Publié dans WooCommerce

Mis à jour le 6 août 2021

Un problème récurrent de WooCommerce est la façon dont il gère ses filtres d'attributs. Ceux-ci n'utilisent pas l'élément select HTML, mais une version plus avancée avec du javascript. Lorsqu'on essaie d'intégrer un sélecteur d'attributs pour filtrer les résultats dans un élément flottant comme un popup (positionné au-dessus du reste de la page donc) il arrive souvent que le filtre des attributs soit invisible au clic.

Lors du clic il ne semble rien se passer dans ce popup

La cause du problème

En réalité, le sélecteur n'est pas invisible mais cachée sous le fond blanc du popup. C'est une histoire de profondeur, qui va jouer sur la propriété CSS z-index. Regardez lorsqu'on enlève le fond du popup :

En réalité, on voit que la liste des attributs est sous le popup

C'est là que ça se complique. Lorsqu'on inspecte le code, pas moyen de trouver la liste dans un premier temps. Ce n'est qu'en creusant qu'on s'apperçoit que la liste des attributs est générée en fin de page, et positionnée absolument au bon endroit.

Le code de la liste n'est pas généré dans le formulaire, difficile de le trouver !

La solution

Maintenant qu'on sait où se trouve le code responsable de la liste, il suffit d'ajuster le z-index de cette liste.

.select2-container { /*vérifiez que ce soit la bonne classe dans votre code*/
  z-index:3333; /*changez cette valeur en fonction de votre cas*/
}

Ce code ne fonctionne pas avec vous ? Contactez-moi et je pourrais certainement intervenir sur votre site pour vous débloquer. Si ça vous intéresse, découvrez comment gérer les catégories dans WooCommerce de la bonne façon.

J'espère que cet article pourra en aider quelques-uns ! Belle journée et à bientôt.

Bienvenue sur mon site !

Je m'appelle Baptiste.

Je suis un webdesigner et consultant SEO indépendant spécialisé dans WordPress. Depuis maintenant plus de six ans, j'aide les petites entreprises à se démarquer sur Internet et à développer leur visibilité.

J'écris aussi pas mal d'articles pour aider les débutants. N'hésitez pas à me contacter si vous avez une question !

Cet article vous a plu ?

Voici d'autres articles populaires qui vous intéresseront peut-être :
SEO
Les bases du Référencement Organique
Apprenez les bases du référencement organique afin d'éviter les erreurs de débutant.
Lire cet article
DESIGN
Comment changer la police d'un site WordPress ?
Tout ce qu'il faut savoir pour gérer la typographie de votre site WordPress est ici, suivez le guide !
Lire cet article
CODE
Comment ajouter du CSS additionnel dans WordPress ?
Découvrez comment ajouter facilement du code CSS additionnel dans n'importe quel site WordPress.
Lire cet article
WOOCOMMERCE
Comment importer des produits dans WooCommerce ?
Apprenez à importer des produits à votre boutique WooCommerce très facilement (en vidéo).
Lire cet article
Je m'appelle Baptiste et je suis un webdesigner / consultant SEO spécialisé dans WordPress, basé à Grasse dans le Sud de la France. J'aide les petites entreprises à développer leur présence web dans ce monde de fou 😉