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

Auteur : Baptiste Pagès
Mis à jour le :

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.

À propos des partenaires : sur mon blog, je recommande certains outils partenaires via des liens d'affiliations. Si vous commandez via ces liens, je touche une commission. Ceci étant, je ne mets en avant que des outils que j'utilise réellement et que j'ai testé personnellement. Merci de votre confiance 🙂

Mon Ebook Gratuit :
Mes 77 ressources WordPress Favorites

Rejoignez ma newsletter et obtenez en cadeau les 77 ressources WordPress que j'utilise au quotidien avec les projets de mes clients. Je partage avec vous de vraies pépites dans cet ebook 😉