Ok, le titre de cet article est incompréhensible…

Le schmilblick ne me semble pas pouvoir se résumé en un titre, même s’il n’est pas compliqué à comprendre.

Vous avez dans WooCommerce des produits variables dont l’attribut est le coloris.

Vous prenez soin d’associer une photo de variation pour chaque couleur.

Vous ajoutez un widget de filtre par coloris dans la sidebar.

Et là c’est le drame !

Pourquoi lorsque je choisi le coloris orange les produits ne sont pas orange ?
Votre client
Bah, c’est parce que WooCommerce récupère l’image à la une du produit et pas l’image de la variation du coloris filtré…
Vous
C’est nul !
Votre client
Oui
Vous

Filtre par coloris pas beau

Clairement en filtrant sur un coloris, les utilisateurs auront du mal à comprendre pourquoi certains produits proposés sont bien orange, d’autres bleus, rouges, vert…

La demande du client est légitime, la mettre en œuvre est du temps passé à trouver une solution, temps qui n’aura pas été budgété.

Le principe retenu pour résoudre ce problème

Récupérer le slug du coloris filtré

  • Je récupère la valeur numérique du filtre passée par WooCommerce dans l’url de la page
  • Un get_term_by(‘id’, $filtre, ‘pa_coloris’) me donne l’accès au slug
  • J’utilise le crochet woocommerce_before_shop_loop pour récupérer le slug du coloris (variable globale)

Récupérer l’image de la variation de ce coloris

  • Dans la fonction qui génère l’affichage de l’image du produit (celle de WooCommerce ou de votre thème), actionnée sur woocommerce_before_shop_loop_item_title, je parcours les variations du produit avec une boucle sur $product->get_available_variations()
  • Si l’attribut de coloris de la variation ($available_variation[‘attributes’][‘attribute_pa_coloris’]) est égale au slug du coloris du filtre, je récupère l’image get_the_post_thumbnail( $available_variation[‘variation_id’], ‘shop_catalog’ ) pour la substituer à l’image à la une

Filtre par coloris, beau

C’est beau, le client est content (normalement)…

Le principe peut s’appliquer à d’autres variations que le coloris, l’idée de base restant d’afficher l’image de la variation qui correspond au filtre appliqué.