Image principale produit WooCommerce et ordre de la galerie : guide rapide

Où apparaît chaque image ?

L’image principale sert à plus d’endroits que la galerie : mieux vaut donc la choisir exprès plutôt que de prendre la première photo de la séance.

WooCommerce décrit trois tailles d’images et les réglages de rognage dans sa documentation sur les images et galeries de produits. Google, dans la spécification du lien de l’image du produit, demande que l’image principale montre clairement le produit vendu, et que les autres prises de vue aillent dans les images supplémentaires.

Comment changer l’image principale et ordonner la galerie

Vous changez un produit dans l’administration en quelques minutes.

1. Ouvrez Produits → Tous les produits et modifiez le produit.
2. Dans la colonne de droite, trouvez le bloc Image produit. Cliquez sur l’image actuelle ou sur le lien pour en définir une.
3. Choisissez une image dans la médiathèque ou envoyez-en une nouvelle. Au passage, saisissez le texte alternatif, une courte description de ce qu’on voit.
4. En dessous, dans le bloc Galerie produit, ajoutez d’autres images. Vous pouvez en sélectionner plusieurs à la fois en maintenant Ctrl ou Cmd.
5. Faites glisser les miniatures de la galerie dans l’ordre où le client doit les voir.
6. Cliquez sur Mettre à jour et ouvrez la fiche produit dans une fenêtre privée pour la voir comme un client.

Un ordre de galerie qui fonctionne en général : le produit sur fond blanc, le produit en situation, un détail (couture, texture, fermeture), l’échelle ou les dimensions, l’emballage. La première image répond à « qu’est-ce que c’est », les suivantes aux questions qu’un client poserait dans un magasin physique.

Quelle image choisir comme principale ? Une qui dit encore ce qu’est le produit en petite miniature dans la liste. Le produit seul, sans emballage, sur un fond clair et calme, entier et centré. Gardez un même cadrage et un même format dans une catégorie, car une liste qui mélange portrait, paysage et mises en scène paraît désordonnée. Gardez les photos portées, les mises en scène et les détails pour la galerie.

Dans un produit variable, donnez une image à chaque variation qui a un aspect différent, en général chaque couleur. Ouvrez l’onglet Variations, dépliez la variation et cliquez sur l’icône d’image à côté. Les tailles d’une même couleur peuvent partager une image.

Écrivez un texte alternatif précis : « sweat à capuche noir, vue de côté », sans y entasser des mots-clés. Nous en disons plus dans l’article sur le texte alternatif dans WordPress, et Google le traite dans son guide sur le SEO des images.

Mauvaise image dans la liste, alors que la fiche produit est bonne ?

Le plus souvent, c’est le rognage, le cache ou une variation. Vérifiez ces trois points dans l’ordre.

• Le rognage des miniatures. Dans Apparence → Personnaliser → WooCommerce → Images produit, il y a un réglage du format des miniatures. Le carré rogne les images verticales. Après une modification, WooCommerce régénère les miniatures en arrière-plan, ce qui prend du temps avec un grand catalogue.
• Le cache. Une extension de cache ou votre hébergeur peut afficher une ancienne liste. Vérifiez dans une fenêtre privée et videz le cache si besoin. Plus de détails dans l’article sur les modifications qui ne s’affichent pas dans WordPress.
• Une variation avec sa propre image. Dans un produit variable, l’image de la variation choisie remplace l’image principale. Si la variation a une ancienne image, le client voit l’ancienne image.

Si aucune image ne s’affiche à côté des articles du blog, c’est un autre sujet. Nous traitons l’image mise en avant des articles dans un article à part sur l’image mise en avant dans WordPress.

Comment changer les images de nombreux produits d’un coup

Pour un produit, l’administration suffit. Quand un fournisseur envoie de nouveaux packshots pour 80 produits, ou qu’après un import la moitié du catalogue a l’emballage comme image principale, cela représente de nombreuses soirées de clics.

L’extension TellMyShop pour WordPress et WooCommerce relie votre boutique au chat. Dans TellMyShop Free, le chat trouve les produits sans image principale et les images sans texte alternatif, et vous en montre la liste. Il n’enregistre rien.

Dans TellMyShop Pro, le chat change les images par lots de 50 produits au maximum. Il définit l’image principale depuis la médiathèque ou depuis une adresse publique, ajoute et retire des images de la galerie, règle leur ordre et écrit le texte alternatif. Pour une variation, il définit une image de variation. Cela fonctionne dès l’activation de la licence, sans interrupteur.