Vérifier que la bonne variation est réellement sélectionnée
Le client choisit Bleu mais la fiche conserve la photo Rouge, ou seule l’image principale change alors que les vignettes restent celles du produit parent. Commencez par distinguer la sélection de la variation et la mise à jour de sa galerie. Une combinaison qui n’a pas été reconnue ne peut pas fournir les bonnes images.
Relevez un produit et deux combinaisons visuellement différentes. Notez leurs identifiants, leurs références et les photos attendues. Vérifiez que tous les attributs nécessaires sont sélectionnés sur la fiche publique ; choisir seulement une couleur peut laisser la taille indéterminée.
Comparez le prix, la référence et le message de stock après chaque sélection. Si rien ne change, examinez d’abord le formulaire et la disponibilité de la combinaison. Si ces informations suivent le choix mais pas la photo, le diagnostic porte plus précisément sur les données d’image et la galerie.
L’image du produit parent sert de présentation générale et peut être utilisée en l’absence d’une image propre à la variation. Remplacer sa galerie ne renseigne pas automatiquement toutes les déclinaisons. Il faut vérifier la variation exacte avant de régénérer des miniatures ou d’installer un autre outil.
- Bonne variation, mauvaise photo : examinez son image principale et sa galerie.
- Photos enregistrées mais galerie figée : vérifiez le modèle et les scripts.
- Toutes les informations restent inchangées : revenez au diagnostic du sélecteur.
- Une seule miniature ne change pas : comparez le jeu de galerie et le fichier réellement affiché.
Préparer les images et conserver les associations existantes
Ce parcours suppose WooCommerce installé et un compte autorisé à modifier les produits. Il s’applique à un site auto-hébergé comme à une boutique WordPress.com disposant de WooCommerce ; la gestion des modèles ou des extensions dépend de vos droits. En multisite, ouvrez l’administration de la boutique concernée, pas un autre sous-site. Dans Produits, Tous les produits, confirmez le produit variable par son ID ou son SKU : traductions et doublons peuvent utiliser d’autres médias.
Conservez l’ordre de la galerie du parent et les associations des deux variations de test. Notez les identifiants des médias et gardez une capture privée de leur configuration. Si les fiches sont synchronisées par un fournisseur ou un import, déterminez quel système possède ces champs afin d’éviter une correction écrasée au prochain passage.
Choisissez des photos dont la différence est évidente, mais qui sont réellement destinées aux combinaisons concernées. Un fichier au nom Bleu peut contenir une photo rouge ; vérifiez l’aperçu au lieu de vous fier au nom. Ne modifiez pas le contenu d’un média partagé pour corriger une seule association.
Préparez une copie du modèle produit avant de comparer les composants de galerie. Sur une boutique active, les essais de thème et d’extensions se font sur une copie isolée. Faites neutraliser ses courriels sortants, paiements réels, webhooks et synchronisations de stock ou de catalogue vers les services de production. Un domaine de test ne suffit pas à interrompre ces échanges. Aucun paiement n’est nécessaire pour vérifier une sélection et son image.
Le résultat attendu est un cas reproductible avec les données initiales conservées. Le retour arrière remet les associations d’images et le modèle modifié. Il ne supprime pas les médias de la bibliothèque, qui peuvent être utilisés par d’autres fiches ou pages.
Parcours 1 : attribuer les images à la bonne variation
La commande de galerie décrite ici appartient à WooCommerce 11.1 et versions suivantes. Dans une installation antérieure, l’emplacement de l’image unique reste distinct du fonctionnement d’une éventuelle extension. Relevez d’abord la version dans WooCommerce, État ; une mise à jour mérite sa propre préparation, sans l’improviser pendant cette correction.
La première image de la galerie devient l’image principale de la variation. Son ordre compte donc autant que sa présence. Une variation sans image propre peut utiliser le parent : ce repli est normal si c’est bien la présentation souhaitée. Le résultat attendu est une association conservée après rechargement ; le retour arrière remet les médias et l’ordre relevés, sans les supprimer.
Si les associations disparaissent au prochain import, corrigez le mapping ou la source qui possède ces champs. Recommencer l’édition manuelle ne résout pas une synchronisation qui réécrit systématiquement les anciennes valeurs.
- Dans Produits, Tous les produits, modifiez la fiche puis ouvrez Données produit, Variations. Dépliez la combinaison voulue et comparez ses attributs ainsi que son identifiant avec votre relevé.
- Pour l’image unique, cliquez sur l’emplacement de l’image de cette variation. Pour plusieurs vues, utilisez Gérer à côté de Galerie de variation ; la documentation anglaise indique Manage et Variation gallery. Choisissez les médias correspondant à cette combinaison, puis validez la fenêtre de sélection.
- Réorganisez les vignettes dans la galerie pour placer la vue principale en premier. Vérifiez leur contenu réel : le nom du fichier ne prouve pas sa couleur ou sa taille.
- Cliquez sur Enregistrer les modifications dans Variations, puis sur Mettre à jour pour le produit. Rechargez la fiche d’administration et dépliez de nouveau la même variation pour vérifier les associations.
- Répétez sur la seconde combinaison du diagnostic. Sur la fiche publique de test, choisissez tous ses attributs et vérifiez l’image principale puis les vignettes. Une modification de la première variation ne renseigne pas automatiquement la seconde.
Tenir compte de la galerie native des versions récentes
La galerie multiple par variation est devenue une fonction native généralisée dans WooCommerce 11.1. Les anciens tutoriels de la phase expérimentale peuvent demander d’activer une option qui n’existe plus au même endroit. Vérifiez la version installée avant de rechercher ce bouton ou de racheter une extension pour cette seule fonction.
Dans le cœur actuel, le réglage expérimental initial a été retiré du parcours utilisateur. Une mise à jour de base accompagne la généralisation. Si l’administration signale une mise à niveau WooCommerce inachevée, suivez sa procédure sur une copie préparée ; ne remplacez pas les options directement dans la base pour imiter une migration terminée.
La migration documentée concerne précisément l’extension officielle WooCommerce Additional Variation Images : WooCommerce 11.1 la désactive automatiquement pour éviter un conflit, puis reprend ses anciennes galeries dans le cœur. Ce comportement ne garantit pas la migration de toutes les extensions tierces de galerie. Identifiez l’éditeur et le composant installé avant d’interpréter une désactivation comme une panne.
Le cœur utilise désormais la métadonnée de galerie de chaque variation. L’ancienne valeur de l’extension officielle peut rester conservée sans suivre les modifications suivantes. Un connecteur qui continue à écrire uniquement dans cet ancien emplacement peut donc laisser l’affichage inchangé. Le transfert documenté ne remplace pas une galerie native déjà renseignée : comparez les deux associations avec le responsable technique plutôt que de supposer que la reprise a écrasé la plus récente.
Ne supprimez pas les anciennes données ou fichiers pour forcer la migration. Comparez un produit et ses variations sur la copie, puis examinez le rapport de mise à niveau et les tâches liées lorsque c’est nécessaire. La migration et sa file ne doivent pas être relancées globalement sans un motif identifié.
Le résultat attendu est un propriétaire clair des images : la galerie native ou le composant encore prévu pour cette installation. Le retour arrière d’une comparaison conserve les associations et les données historiques ; il ne repose pas sur une réinstallation aveugle d’une ancienne extension.
Parcours 2 : vérifier la compatibilité des blocs du modèle
Avec un thème en blocs, ouvrez Apparence, Éditeur, Modèles puis le modèle Produit unique réellement utilisé. Dans la vue en liste, identifiez le composant de galerie et le formulaire de sélection. Une image statique placée dans le modèle ne devient pas une galerie de variation parce qu’elle ressemble à la photo du produit.
WooCommerce distingue le bloc Product Gallery du bloc plus ancien Product Image Gallery. Le formulaire Add to Cart + Options utilise le nouveau mécanisme de galerie pour suivre la variation. Une combinaison avec l’ancien bloc peut afficher un avertissement dans l’éditeur et ne pas synchroniser les images comme prévu.
Sur la copie du modèle, sélectionnez l’ancien bloc lorsque cet avertissement correspond à votre configuration. Le panneau propose Use the Product Gallery block ; depuis Add to Cart + Options, la commande est Upgrade to the Product Gallery block. La traduction peut varier. Utilisez l’une de ces conversions pour remplacer cette seule zone. Le nouveau bloc reprend des réglages par défaut : relisez dimensions, vignettes, zoom et ouverture avant de sauvegarder.
Enregistrez uniquement le modèle concerné, puis comparez les deux variations de test. Vérifiez également un produit simple pour repérer un effet de portée. N’ajoutez pas une seconde galerie à côté de l’ancienne ; deux zones peuvent donner l’impression qu’une partie de la page reste figée.
Le résultat attendu est un formulaire et une galerie compatibles dans le même contexte produit. Le retour arrière restaure la copie du modèle et ses réglages. Si la fiche utilise un constructeur, procédez dans son modèle produit avec ses composants correspondants plutôt que d’insérer un bloc natif hors contexte.
Comparer une galerie classique ou personnalisée
Pour un thème classique, relevez les personnalisations WooCommerce du thème enfant et les extensions qui remplacent la galerie. Dans WooCommerce, État, l’information sur les modèles remplacés peut aider à identifier les fichiers concernés. Ne modifiez pas directement les modèles de l’extension pour obtenir une mise à jour visuelle.
Sur la copie, comparez le même produit avec la galerie native prévue par un modèle compatible. Conservez l’état initial, retirez seulement la personnalisation suspecte puis réactivez-la pour confirmer le lien avec le défaut. Une sélection correcte dans le modèle natif fournit un indice sur l’adaptation de la galerie personnalisée.
Le développeur doit vérifier que son composant lit les données de la variation sélectionnée, et pas seulement l’image du parent chargée au départ. Le cœur fournit des identifiants et des données de galerie spécifiques ; une ancienne intégration qui ne connaît qu’une image unique peut ne pas suivre un ensemble multiple.
Si un connecteur gère les images, contrôlez qu’il utilise les champs actuels de galerie et qu’il distingue le média principal des images supplémentaires. Une écriture dans une ancienne métadonnée conservée pour compatibilité peut ne plus changer le rendu. Corrigez ce mapping sur un seul produit avant de le généraliser.
Le résultat attendu est une cause de compatibilité établie, avec une adaptation du bon composant. Le retour arrière restaure le modèle ou le connecteur sauvegardé et les associations initiales. Une régénération de toutes les miniatures ne remplace pas cette correction de données ou d’événements.
Parcours 3 : lire les données et la première erreur du navigateur
Si la configuration et le modèle sont cohérents, examinez une sélection sur la copie. Chrome DevTools convient à cette lecture ; aucun module WordPress supplémentaire n’est nécessaire. Selon le formulaire et le nombre de variations, les données sont intégrées à la page ou obtenues lors du choix. L’absence de nouvelle requête ne prouve donc pas une panne.
Dans le formulaire classique, une réponse peut contenir variation_id, image_id, image et gallery_image_ids. Comparez l’identifiant avec celui relevé dans l’administration, puis l’adresse de l’image attendue. Les intégrations en blocs ou personnalisées ne sont pas tenues d’utiliser le même transport : ne cherchez pas ces champs dans n’importe quelle requête.
Une mauvaise image dans les données ramène aux associations ou aux filtres qui les transforment. Une bonne image reçue mais jamais affichée oriente vers la galerie et ses scripts. Une image demandée mais introuvable nécessite de corriger son fichier ou son URL précise, sans reconstruire toutes les miniatures.
Conservez seulement l’heure, la première erreur utile, l’ID de variation et le statut du fichier concerné. Ne diffusez pas un export réseau complet qui pourrait contenir des cookies ou des données de session. Ce parcours est une observation : ne rejouez aucune requête, ne collez aucun script et ne modifiez pas localement les réponses. Il n’impose donc aucun retour arrière applicatif ; fermez les outils après le relevé.
- Sur la fiche de test dans Chrome, ouvrez les outils avec Ctrl + Maj + J sous Windows, ou Commande + Option + J sur Mac. Passez dans Réseau, puis rechargez la page pour commencer l’enregistrement.
- Choisissez tous les attributs de la combinaison. Dans le formulaire classique, filtrez Fetch/XHR et recherchez get_variation si une requête apparaît. Cliquez sur sa ligne, puis Réponse pour lire ses données. Si elles étaient déjà intégrées à la page, confiez leur lecture au développeur au lieu d’inventer une requête manquante.
- Comparez la réponse avec la bonne variation. Revenez à Toutes les ressources pour retrouver l’image demandée et son statut. Consultez ensuite Console pour relever la première erreur liée à ce changement, sans exécuter les suggestions de code proposées par une page inconnue.
- Refaites la sélection de la seconde combinaison. Transmettez les deux observations au responsable du modèle si les données changent correctement mais pas le rendu.
Contrôler le cache, le changement de choix et la remise à zéro
Après une correction d’association ou de modèle, retirez le cache de la fiche avec le mécanisme déjà utilisé. Comparez dans une session propre, puis dans le contexte normal du visiteur. Un cache de page ancien peut encore transporter les données de galerie précédentes même lorsque l’administration est à jour.
Choisissez la première variation, puis la seconde, puis effacez les sélections. Vérifiez l’image principale, les vignettes et leur ordre à chaque étape. La remise à zéro doit revenir au comportement prévu pour le parent ; elle ne doit pas laisser croire qu’une variation reste sélectionnée.
Contrôlez aussi une variation sans galerie propre si le produit en contient. Son repli vers les images disponibles doit être compris et ne pas être confondu avec l’échec d’une variation qui possède réellement un jeu distinct. Si vous avez fixé une valeur par défaut, comparez également un chargement initial sans intervention.
Sur téléphone, vérifiez la sélection et la navigation dans les vignettes. Sur ordinateur, contrôlez le zoom et l’ouverture plein écran si ces fonctions sont utilisées. Une bonne image dans la miniature avec un ancien fichier dans la visionneuse révèle un autre élément encore à synchroniser.
Le résultat attendu est une galerie cohérente pendant tout le parcours de sélection. Le retour arrière rétablit le modèle et les associations sauvegardées ; pour le cache, remettez la politique initiale si vous l’aviez seulement modifiée pour une comparaison.
Conserver la correction dans la bonne source
Consignez le produit, les variations et les médias concernés avec la cause confirmée : association incorrecte, ordre de galerie, transition de données, modèle incompatible ou script. Indiquez aussi les versions et les contrôles effectués sur les deux combinaisons.
Si une synchronisation était responsable, vérifiez son passage suivant sur le produit de test avant de considérer la correction comme durable. Les images doivent rester associées aux mêmes variations après cette mise à jour. Conservez le mapping précédent et le relevé des médias pour un retour ciblé.
La résolution est acquise lorsque la bonne variation montre son image et sa galerie, puis revient correctement à l’état du parent après effacement. Gardez les originaux et les modèles sauvegardés jusqu’à la validation. Ne supprimez ensuite que les copies de diagnostic identifiées, en préservant les médias partagés avec d’autres produits.
