Comment résoudre les problèmes de taille d'image WooCommerce

Vous rencontrez des problèmes avec la taille des images sur votre boutique en ligne ? Vous êtes arrivé au bon endroit. Dans ce guide, nous vous montrerons différentes façons de résoudre les problèmes de taille d'image WooCommerce les plus courants .

WooCommerce est l'une des meilleures plateformes de commerce électronique, mais de temps en temps, vous pouvez rencontrer des problèmes. Nous avons déjà vu comment résoudre les problèmes les plus courants lors du paiement et que faire lorsque le bouton Ajouter au panier ne fonctionne pas. Dans ce didacticiel, nous allons vous montrer différentes solutions pour résoudre les problèmes de taille d'image.

Ces problèmes peuvent survenir pour diverses raisons, telles qu'une incompatibilité de thème ou de plug-in, des tailles d'image incorrectes, des champs d'image manquants, etc. Avant de voir comment résoudre les différents problèmes de taille d'image, examinons les différents types d'images dans WooCommerce.

Types d'images dans WooCommerce

Il existe de nombreux types d'images que vous pouvez ajouter à votre site Web, mais les 3 principaux types utilisés dans WooCommerce sont les images de produits, de catalogues et de vignettes de produits.

• Images d' un seul produit : les images d'un seul produit sont des images de grande taille utilisées pour afficher un seul produit. Il s'agit de l'image principale du produit que vous affichez aux clients lorsqu'ils ouvrent la page de produit WooCommerce particulière. Vous pouvez ajouter plusieurs images de produit pour montrer le produit sous différents angles.
• Images de catalogue : ce sont des images de taille moyenne de produits généralement utilisés sur la page de la boutique WooCommerce. Si vous avez une page de catégorie distincte dans votre boutique en ligne, ces images de catalogue peuvent également être vues sur les catégories de produits ou les produits eux-mêmes.
• Images miniatures du produit : il s'agit d' images miniatures de très petite taille. Ils sont affichés pour identifier les produits sur différentes pages WooCommerce telles que les pages de panier, les zones de widgets ou encore dans les pages de commande.

Problèmes courants avec les tailles d'image WooCommerce

Vous avez maintenant une meilleure compréhension des différents types d'images WooCommerce et de la différence de taille. Les images sont extrêmement importantes pour vous aider à convertir les visiteurs en clients, donc avoir des problèmes avec vos images peut être un gros casse-tête.

Pour pouvoir résoudre les problèmes de taille d'image WooCommerce, vous devez d' abord identifier votre problème . La partie délicate est que vous pouvez rencontrer plusieurs problèmes concernant la taille des images. Certains des plus courants sont :

1. Images floues

C'est l'un des problèmes les plus courants. Les images que vous téléchargez pour vos produits ou vignettes apparaissent floues et peuvent ne pas être clairement visibles même si l'image d'origine n'a pas été compressée, était clairement visible et était de bonne qualité.

Non seulement les images floues sont mauvaises, mais elles donnent également l'impression que votre site n'est pas professionnel.

Image originale

Image floue

2. Image de mauvaise qualité

Semblables aux images floues, certaines images de votre site Web peuvent être de moins bonne qualité une fois que vous les avez téléchargées. Ils peuvent sembler pixélisés ou ne pas avoir des lignes aussi lisses que celles d'origine.

Cela peut arriver même si l'image téléchargée est d'excellente qualité. Nous verrons pourquoi et comment y remédier dans la section suivante.

3. Mauvaises tailles d'image

Parfois, vous pouvez également remarquer que les images téléchargées ont des tailles différentes de celles des images d'origine. Il s'agit d'un problème très courant si vous n'ajustez pas les paramètres de vos images en fonction des exigences du thème .

Par exemple, supposons que votre exigence de thème pour les images de catalogue soit d'au moins 250 x 250 pixels, mais que les paramètres d'image WooCommerce de votre boutique soient configurés sur 200 x 200 pixels. Étant donné que les paramètres ne sont pas configurés en fonction des exigences du thème, votre image peut être automatiquement réajustée avec la mauvaise taille d'image.

4. Problèmes de zoom, de lightbox ou de curseur

WooCommerce vous offre des options de zoom, de lightbox et de curseur pour prévisualiser vos images. Il s'agissait d'une nouvelle fonctionnalité qui a été ajoutée à WooCommerce avec la sortie de la version 3.0 . Si votre thème n'a pas été mis à jour conformément à ses spécifications, vous pourriez rencontrer des problèmes.

5. Champs de largeur d'image et de vignette manquants

Vous remarquerez peut-être également que les champs de largeur et de vignette de vos images WooCommerce sont absents du Customizer sous Appearance > Customize > WooCommerce > Product Images .

Cela peut être le cas si votre thème a des tailles d'image très strictes, vous ne pouvez donc pas du tout modifier les tailles d'image du thème via l'administrateur. Dans ce cas, vous aurez besoin de connaissances en programmation dont nous discuterons dans les solutions ci-dessous.

Maintenant que nous comprenons mieux les types d'images et les problèmes les plus courants, voyons différentes solutions pour résoudre les problèmes de taille d'image dans WooCommerce.

Comment résoudre les problèmes de taille d'image WooCommerce

Puisque vous connaissez certains des problèmes de taille d'image WooCommerce les plus courants, corrigeons-les également. Cependant, les problèmes de taille d'image que vous rencontrez peuvent être causés par diverses raisons. Donc, il se peut qu'il n'y ait pas de solution particulière pour eux.

Par conséquent, nous vous recommandons d'utiliser certaines des solutions courantes indiquées ci-dessous concernant les problèmes de taille d'image. Nous sommes sûrs que l'une des solutions pourra résoudre les problèmes de taille d'image WooCommerce.

1. Liste de contrôle initiale à garder à l'esprit

Avant de passer en revue les solutions spécifiques pour résoudre les problèmes de taille d'image, vous devez garder à l'esprit certaines choses. Tout d'abord, assurez-vous que vous avez correctement configuré WooCommerce sans manquer aucune étape. Vous pourriez rencontrer des problèmes avec votre site Web s'il n'est pas installé correctement.

Deuxièmement, nous aimerions vous rappeler de vérifier si tout ce qui se trouve sur votre site Web est mis à jour . Il peut y avoir des problèmes dans votre boutique si vous n'avez pas mis à jour votre thème ou vos plugins vers la dernière version.

De même, assurez-vous de mettre à jour WooCommerce vers la dernière version disponible. Pour savoir si vous avez des mises à jour en attente, accédez à Plugins > Plugins installés sur votre tableau de bord WordPress. Si des avis vous demandent de mettre à jour WooCommerce, cliquez sur Mettre à jour maintenant .

De plus, si vous avez mis à jour WordPress avec l'éditeur Gutenberg, assurez-vous que WordPress est également mis à jour vers la dernière version . En revanche, si vous utilisez WordPress avec l'éditeur classique, il est préférable de le mettre à jour avec la dernière version de WordPress 4.9.

Une fois que vous avez fait tout cela, si vous rencontrez toujours des problèmes avec les tailles d'image, passez à la solution suivante.

REMARQUE : Nous utiliserons le thème Divi pour ce didacticiel, de sorte que certaines pages pourraient avoir un aspect différent de celui de votre site Web si vous utilisez un autre thème. Cependant, vous devriez pouvoir suivre chaque solution sans aucun problème. Si vous cherchez un nouveau thème compatible avec WooCommerce, jetez un œil à cet article.

2. Définir des tailles d'image WooCommerce personnalisées

L'ajout de tailles d'image personnalisées est l'un des moyens les plus courants de résoudre les problèmes de taille d'image WooCommerce. Étant donné que la plupart des problèmes surviennent en raison de la modification des tailles d'image par défaut , cela devrait être votre premier pas.

La configuration d'une taille d'image personnalisée est assez simple. Sur votre tableau de bord d'administration, accédez à Apparence > Personnaliser et ouvrez l'onglet WooCommerce pour accéder au Customizer.

Ensuite, ouvrez l'option Images du produit . Ici, vous pouvez redimensionner la page produit et les images miniatures de vos produits. Pour modifier l'image principale de la page produit, ajoutez la taille d'image souhaitée dans la section Largeur de l'image principale .

Vous pouvez également modifier la taille des vignettes et le recadrage ici. Si vous souhaitez ajuster la taille de l'image miniature, modifiez l'option Largeur de la miniature .

De plus, il existe trois options pour ajuster le recadrage des vignettes : 1:1, personnalisé et non recadré. Pour minimiser les problèmes d'image pour la fonctionnalité et l'apparence, le recadrage 1:1 est la meilleure option. Après avoir apporté toutes les modifications nécessaires, cliquez sur Publier .

3. Vérifiez les dimensions de l'image du produit de votre thème

Si vous rencontrez toujours des problèmes même après avoir ajouté les tailles d'image personnalisées, la taille de l'image est peut-être incorrecte. Comme mentionné précédemment dans le problème de mauvaise taille d'image, il existe des exigences de thème spécifiques pour les tailles d'image dans WooCommerce. Si ces tailles ne répondent pas aux exigences, vous pouvez rencontrer des problèmes.

Pour résoudre ces problèmes de taille d'image WooCommerce, la meilleure option consiste à vérifier d'abord les tailles d'image de produit du thème. Ouvrez la page produit de l'un de vos produits et utilisez l' outil de développement d'éléments d'inspection sur votre navigateur Web pour voir la taille de l'image du thème.

Par exemple, si vous utilisez Google Chrome , faites un clic droit sur l'image du produit et appuyez sur Inspecter . Vous pourrez voir la taille de l'image dans l' outil de développement d'éléments d'inspection, comme indiqué ci-dessous.

Dans ce cas, la taille de l'image du produit est de 900×600 . Si les exigences d'image de votre thème sont différentes, vous pouvez avoir des problèmes.

Vous pouvez ajuster la taille de l'image du produit en conséquence à partir du Customizer en utilisant la méthode décrite au point 2. De même, vous pouvez inspecter la taille de l'image miniature de la même manière et la modifier davantage dans le Customizer si nécessaire.

4. Modifier les tailles d'image par défaut

Si vous avez essayé toutes les solutions ci-dessus, mais que vous rencontrez toujours des problèmes d'image, vous devrez peut-être ajuster les tailles d'image WordPress par défaut .

Pour ce faire, accédez à Paramètres > Média sur votre tableau de bord WordPress et vous verrez les options de taille pour les images miniatures, moyennes et grandes .

Définissez les tailles d'image en fonction des exigences du thème et enregistrez les modifications .

De plus, vous pouvez supprimer certaines des tailles par défaut si vous ne les utilisez pas. Pour en savoir plus à ce sujet, consultez notre guide pour supprimer les tailles d'image par défaut de WordPress.

5. Résoudre les problèmes de taille d'image WooCommerce avec les plugins

Une autre alternative consiste à résoudre les problèmes de taille d'image WooCommerce en utilisant un plugin dédié. Il existe plusieurs outils que vous pouvez utiliser pour cela. Dans cette section, nous vous en montrerons quelques-uns afin que vous puissiez éviter d'autres problèmes de taille d'image sur votre site Web.

Jetons un coup d'œil à certains des meilleurs outils que vous devriez utiliser.

5.1. Images parfaites et prise en charge de la rétine

en termes simples, Retina Support est une option d'affichage des images sur votre site Web avec une résolution et une qualité très élevées . Un affichage prêt pour la rétine garantit que toute image vue sur n'importe quel appareil avec n'importe quelle taille d'écran est nette et sans lignes ni bordures pixélisées visibles.

C'est une solution parfaite si les images téléchargées sur votre site sont floues ou de mauvaise qualité. Si vous souhaitez créer manuellement une image prête pour la rétine, vous devez doubler la taille et les dimensions de l'image, les optimiser, puis les télécharger à nouveau. Cependant, vous pouvez utiliser un plugin pour que vos images soient automatiquement prêtes pour la rétine. Pour cela, Perfect Images est l'un des meilleurs plugins du marché.

Perfect Images est un plugin simple pour ajouter des images avec affichage Retina à votre site. Il détecte automatiquement toutes les images présentant des problèmes de rétine et en crée une copie prête pour la rétine. En plus de cela, vous pouvez créer des images individuelles prêtes pour la rétine ou le faire en masse pour gagner du temps.

Voyons maintenant comment utiliser ce plugin.

5.1.1. Installer et activer le plugin

Tout d'abord, vous devez l'installer et l'activer. Dans votre tableau de bord WordPress, accédez à Plugins > Ajouter nouveau , recherchez le plugin et cliquez sur Installer maintenant .

Une fois l'installation terminée, activez le plugin. Alternativement, vous pouvez l'installer manuellement. Si vous ne savez pas comment procéder, consultez notre guide pour installer manuellement un plugin WordPress.

5.1.2. Configurer les options d'image pour l'affichage Retina

Après avoir activé le plugin, vous devez configurer les options de rétine pour vos images WooCommerce ou site Web. Accédez à Meow Apps > Perfect Images et vous verrez toutes les options pour vos images de rétine dans l'onglet Général . Les options par défaut conviennent à la plupart des sites Web car elles créent des images de rétine pour les tailles d'image les plus courantes.

Cependant, une fois les images converties en images prêtes pour la rétine, elles devront peut-être être optimisées. Les images prêtes pour la rétine ont tendance à être très volumineuses et peuvent ralentir votre site Web. Cela peut être un obstacle majeur pour vos clients, car la plupart des utilisateurs utilisent des appareils mobiles pour faire des achats en ligne.

Pour vous assurer que les images de la rétine n'épuisent pas la vitesse de votre site Web, vous devez vous assurer qu'elles sont bien optimisées. Vous pouvez le faire depuis le plugin en allant dans l'onglet Optimisation et vitesse . Gardez à l'esprit que pour cela, vous devrez souscrire à leur plan premium qui inclut Easy IO pour l'optimisation et coûte 10 USD par mois.

Alternativement, vous pouvez également les optimiser manuellement à l'aide d'un plugin ou d'un service d'optimisation d'image tel que TinyPNG ou Smush .

5.1.3. Convertir des images pour la prise en charge de Retina

Après avoir configuré toutes les options nécessaires pour vos images Retina, vous pouvez commencer à les convertir. Tout d'abord, allez dans Média > Images parfaites et vous serez redirigé vers l'onglet Problèmes de rétine . Ici, vous pouvez créer des images prêtes pour la rétine pour résoudre les problèmes de taille d'image WooCommerce.

Vous pouvez également générer des vignettes et des images de la rétine en sélectionnant les images souhaitées.

5.2. Régénérer la vignette

La régénération des miniatures est également un excellent moyen de résoudre les problèmes de taille d'image, en particulier avec les images miniatures .

Ces problèmes surviennent généralement lorsque vous avez récemment changé de thème. Le nouveau thème peut avoir des exigences de thème différentes pour les tailles d'image, vous devez donc les réajuster.

Si vous avez un grand nombre de vignettes sur votre site Web, vous pouvez utiliser Perfect Images . Tout ce que vous avez à faire est de configurer les options de taille d'image comme nous l'avons fait aux étapes 5.1.1 et 5.1.2. Ensuite, allez dans Média > Images parfaites , ouvrez l'onglet Tout et vous verrez toutes les images de votre site. Semblable à l'étape de prise en charge de la rétine, vous pouvez régénérer les vignettes pour des images particulières ou en masse.

Pour régénérer les images en bloc, appuyez sur Actions en bloc et sélectionnez Régénérer toutes les entrées pour régénérer les vignettes. Gardez à l'esprit que cela peut prendre quelques minutes si vous avez beaucoup d'images sur votre site.

6. Solution programmatique

Si vous êtes arrivé jusqu'ici, vous avez essayé de résoudre les problèmes de taille d'image avec les options WooCommerce par défaut et même avec des plugins. Si rien n'a fonctionné et que vous rencontrez toujours des problèmes, il y a encore une chose que vous pouvez faire. Pour utiliser cette solution, nous vous recommandons d'avoir des connaissances de base en programmation puisque nous allons utiliser un peu de code.

Il existe des extraits de code que vous pouvez utiliser pour résoudre les problèmes d'image, mais gardez à l'esprit que l'extrait que nous utiliserons modifiera la taille des images sur votre site Web. Cela peut être utile lorsque les largeurs d'image principales et les champs de vignettes manquent dans votre personnalisateur de thème et que vous souhaitez définir des tailles d'image WooCommerce personnalisées.

Comme nous allons modifier certains fichiers de base, avant de commencer, nous vous recommandons de sauvegarder votre site Web WordPress. De plus, il est recommandé de créer un thème enfant ou d'utiliser l'un de ces plugins de thème enfant WordPress.

Modifier la taille de l'image à l'aide d'extraits de code

Pour modifier les tailles d'image lorsque la largeur de l'image et la largeur de la vignette sont manquantes dans l'outil de personnalisation, vous pouvez utiliser l'extrait de code suivant. Allez dans Apparence > Éditeur de thème et ouvrez le fichier functions.php .

Ensuite, ajoutez simplement l'extrait de code suivant au bas de l'éditeur.

 add_theme_support( 'woocommerce', apply_filters( 'divi_woocommerce_args', array(
   'single_image_width' => 600,
   'thumbnail_image_width' => 300,
   'product_grid' => tableau(
   'default_columns' => 3,
   'default_rows' => 4,
   'min_columns' => 1,
   'max_columns' => 6,
   'min_rows' => 1
   )
) ) );

Cet extrait changera la largeur de l'image du produit à 600 et la largeur de la vignette à 300, qui sont les paramètres par défaut. Ajustez ces valeurs en fonction de vos besoins et n'oubliez pas de mettre à jour le fichier.

7. Options d'assistance

Si vous avez essayé toutes les solutions mentionnées ici mais que vous n'avez pas trouvé la solution aux problèmes de taille d'image, soit le problème auquel vous êtes confronté est rare, soit il y a un problème avec les fichiers principaux de WooCommerce ou votre thème.

À ce stade, la meilleure option est de contacter le support client. WooCommerce propose d'excellentes options d'assistance afin que vous puissiez les contacter au sujet de vos problèmes de taille d'image. Alternativement, si vous pensez que votre thème peut être le problème, vous pouvez contacter votre fournisseur de thème et lui demander de l'aide.

Conclusion

Dans l'ensemble, il existe différents types d'images (produit unique, catalogue et vignettes de produits) et plusieurs problèmes courants avec les tailles d'image. Les plus courants sont les images floues ou de mauvaise qualité, les mauvaises tailles d'image, les options de zoom, de lightbox et de curseur, et les champs de largeur et de vignette manquants.

Dans ce guide, nous avons vu différentes solutions pour résoudre les problèmes de taille d'image WooCommerce les plus courants .

1. Mettez à jour votre thème et vos plugins vers la dernière version, y compris WooCommerce
2. Définir des tailles d'image WooCommerce personnalisées
3. Vérifiez les dimensions du produit d'image de votre thème
4. Modifier les tailles d'image par défaut
5. Utiliser des plugins
6. Solution programmatique avec un peu de code
7. Contactez WooCommerce ou l'équipe d'assistance de votre thème

Si cet article vous a été utile, partagez-le sur les réseaux sociaux et aidez vos amis à se débarrasser de ces problèmes. Avez-vous déjà rencontré ces problèmes ? Comment les avez-vous résolus ? Faites-le nous savoir dans les commentaires ci-dessous.

Pour des guides plus utiles, voici des articles qui pourraient vous intéresser :

• Comment ajouter une image à un produit dans WooCommerce
• 3 méthodes pour supprimer les vignettes dans WordPress
• Comment ajouter des tailles d'image personnalisées dans WordPress