Comment définir la taille des vignettes de WooCommerce Storefront

Publié: 2020-09-26

Définir la taille des vignettes de la vitrine WooCommerce Si vous exploitez une boutique WooCommerce, vous savez que les images sont l'une des parties les plus importantes de votre boutique en ligne. Cependant, WooCommerce utilise de nombreux types de tailles d'images de produits différents. Il est donc difficile de déterminer où vous pouvez les modifier pour répondre à vos besoins spécifiques.

Définir la taille des vignettes de la vitrine WooCommerce

Cela signifie que la personnalisation des images WooCommerce peut devenir un peu compliquée. C'est pourquoi j'ai élaboré ce guide pour passer en revue chaque aspect des images WooCommerce, afin que vous puissiez passer directement à la partie qui vous convient. De plus, je vais utiliser le thème Storefront.

Quels sont les avantages de définir la taille de l'image de votre produit ?

Avant d'aborder le « comment », vous vous demandez peut-être pourquoi ? Voici quelques-uns des avantages :

Il empêche le flou de l'image. Les images avec la mauvaise taille peuvent apparaître floues, ce qui donnera une mauvaise première impression à vos acheteurs.
Il optimise la vitesse. Lorsqu'une image est grande, son chargement prend plus de temps. Cela ralentira votre site, ce qui entraînera une baisse des revenus et des utilisateurs mécontents.

Étapes pour redimensionner une image miniature de produit

Par défaut, WooCommerce vous permet de redimensionner les images des produits. Tout ce que vous avez à faire est de suivre ces étapes simples :

Connectez-vous à votre site WordPress et accédez au tableau de bord en tant qu'utilisateur administrateur.
Dans le menu Tableau de bord, cliquez sur Menu Apparence > Personnaliser.
Cliquez sur WooCommerce > Images de produits.
Dans le champ de recadrage des vignettes, vous pouvez définir la hauteur des images.
Cliquez sur Publier si vous êtes satisfait des modifications.

Guide ultime de la hauteur des images de produits de magasin

Dans le champ des vignettes, 3 options différentes vous sont proposées pour définir la hauteur des images de la boutique ou du catalogue :

1:1 : Si vous choisissez 1:1, vos images seront recadrées en 360px de largeur et 360px de hauteur. Cela fonctionnera, en supposant que vous avez défini la largeur de l'image 360px dans le champ Thumbnail Width.
Personnalisé : Ici, vous pouvez sélectionner le format de l'image. Voici quelques-uns des formats d'image populaires (1:1, 5:4, 4:3, 3:2, 16:9 et 3:1).
Non recadrée : dans cette option, la hauteur de l'image ne sera pas modifiée. Les images de votre boutique s'afficheront en utilisant le rapport d'aspect dans lequel elles ont été téléchargées.

Questions fréquemment posées

Comment puis-je modifier la taille de l'image si le développeur de thèmes la définit ?

Il existe une solution simple à cela, en supprimant ou en modifiant les paramètres de largeur d'image de votre fichier themes functions.php. Dans le thème Storefront, il n'y a pas de paramètres pour l'image principale ou les champs de vignettes. C'est parce qu'ils sont déclarés qu'au préalable dans storefront/inc/class-storefront.php

 // Déclare la prise en charge de WooCommerce.

 add_theme_support( 'woocommerce', apply_filters( 'storefront_woocommerce_args', array(

 'single_image_width' => 416,

 'thumbnail_image_width' => 324,

 'product_grid' => tableau(

 'default_columns' => 3,

 'default_rows' => 4,

 'min_columns' => 1,

 'max_columns' => 6,

 'min_rows' => 1

 )

) ) );

La taille de l'image du produit unique a été définie sur 416 pixels de large et la vignette sur 324 pixels de large. Cela signifie que vous pouvez soit supprimer ces deux lignes, soit modifier le numéro de largeur à la largeur souhaitée. Cependant, vous devez vous assurer que vous modifiez après avoir créé un thème enfant. En effet, il reviendra aux paramètres précédents si vous mettez à jour le thème.

Comment définir la taille des images du catalogue ?

Pour les images de produits de la boutique et les images de catalogue ou de catégorie, elles sont redimensionnées en fonction des paramètres du champ Apparence > Personnaliser > WooCommerce > Images du produit > Largeur de la vignette .

Pourquoi les images de mes produits WooCommerce sont-elles floues ?

Si c'est le cas dans votre boutique WooCommerce, vous pouvez vérifier quelques points :

Vérifiez la qualité de l'image. Vérifiez si la qualité est bonne et si elle est de mauvaise qualité lorsqu'elle est ajoutée à votre boutique WooCommerce, elle n'aura pas l'air aussi nette et claire que vous le souhaiteriez.
Paramètres des miniatures. Vérifiez les paramètres et si les paramètres recherchent une image de 500 pixels pour votre page de produit et une image de 160 pixels sur votre page de catalogue, mais que vous ne téléchargez qu'une image de 160 pixels, WooCommerce agrandira automatiquement votre image, la rendant floue.

Quelle est la meilleure taille d'image ?

La meilleure taille d'image de votre boutique en ligne dépend du thème que vous utilisez pour votre boutique. Une taille d'image de 800 à 1000 pixels de large convient si vous vendez un produit simple comme une chemise.

Cependant, si vous avez une image détaillée ou compliquée, le téléchargement d'une image plus grande permettra aux clients potentiels de zoomer et de voir ces détails de près. La taille recommandée est de 2000 pixels de large, ce qui fonctionnera mieux

Il convient également de mentionner que vous ne devez jamais télécharger une grande image. Une image surdimensionnée ralentira votre site et, par conséquent, affectera probablement les ventes.

Conclusion

Dans ce bref didacticiel, vous avez appris comment définir la taille des vignettes de WooCommerce Storefront en quelques clics. De plus, j'ai expliqué comment vous pouvez modifier la taille des images des produits et des galeries, ainsi qu'un guide ultime sur les paramètres des vignettes.

De plus, vous avez appris les avantages de définir les tailles d'image de votre produit WooCommerce. Les images surdimensionnées ralentiront votre site et, par conséquent, affecteront probablement les ventes. De plus, j'ai ajouté une section de questions fréquemment posées qui comprend certains problèmes courants que vous pourriez rencontrer.

Les images sont très importantes lorsqu'il s'agit de réaliser des ventes dans votre boutique en ligne. Assurez-vous de suivre les directives fournies dans ce didacticiel et si vous n'êtes pas sûr des modifications, envisagez d'utiliser un plugin comme WooThumbs pour WooCommerce. Cela vous permettra de modifier la taille des images de vos produits WooCommerce sans tracas et d'améliorer votre galerie de produits WooCommerce.