Examen WooThumbs – Meilleures images de produits WooCommerce

Intéressé par une meilleure façon de présenter vos produits sur WooCommerce ? Alors vous pourriez être intéressé par l’examen d’aujourd’hui…

je vais vérifier le Plugin WooThumbs d’Iconic. C’est un plugin qui vous aide à améliorer l’affichage de votre produit avec quelques améliorations majeures à la vitrine d’images par défaut de WooCommerce.

Il vous propose des carrousels de produits astucieux et une méthode impressionnante de zoom sur vos produits, ce qui est particulièrement intéressant pour quiconque vend des produits axés sur le design.

Et si vous vendez des produits avec plusieurs variantes, vous serez certainement intéressé par la façon dont WooThumbs vous permet de gérer plusieurs variations d’image (plus d’informations ci-dessous !).

WooThumbs est également développé par une entreprise réputée qui a fait ses preuves (elle existe depuis 2011). Iconic est un auteur d’élite chez Code Canyon avec plus de 7 000 ventes et une note de 4,5 étoiles. En plus de WooThumbs, ils vendent également un certain nombre de autres plugins WooCommerce et blog sur WooCommerce.

Donc, si vous êtes un vendeur WooCommerce ou si vous souhaitez le devenir, je vous invite à me rejoindre alors que je creuse dans WooThumbs à partir de Iconique.

Configurer WooThumbs

Les gens à Iconique ont eu la gentillesse de me mettre en place avec un site de test, donc je n’ai pas eu à installer le plugin moi-même.

En dehors de cela, je commence à la première étape, cependant.

Tout d’abord, je vais aller dans l’onglet des paramètres généraux et configurer les bases :

Ok, ça fait beaucoup de paramètres. Je vois toujours cela comme une épée à double tranchant – agréable d’avoir beaucoup d’options, mais parfois chronophage pour tout parcourir.

je vais commencer par le Paramètres d’affichage.

Voici les points saillants de ce que vous pouvez configurer :

• Comment les images passent dans le carrousel (horizontalement, verticalement ou s’estompent)
• À quelle vitesse les images passent
• Que le carrousel se lance automatiquement ou non
• Que le carrousel joue en boucle infinie ou non

Passons à l’onglet suivant, Dimensions du curseurvous pouvez définir la taille et l’emplacement de votre curseur d’image :

Dans Paramètres de navigationvous pouvez choisir d’afficher ou non les flèches de navigation et de modifier les paramètres des commandes miniatures :

Dans Paramètres de zoomvous pouvez activer ou désactiver le zoom :

Vous pouvez également choisir le fonctionnement du zoom. Bien que ce paramètre puisse sembler anodin, il affecte en fait un peu votre zoom.

• Le zoom intérieur zoomera sur toute l’image lorsque l’utilisateur passera la souris dessus.
• Le zoom extérieur affichera le zoom adjacent à l’image, mais n’affectera pas l’image d’origine.
• Suivre créera un effet de loupe là où se trouve la souris de l’utilisateur.

En fonction de votre sélection de zoom, vous pouvez également configurer quelques options supplémentaires sur cette page.

C’est tout pour la plupart des paramètres – il reste quelques onglets où vous pouvez définir les options plein écran, les paramètres réactifs et le CSS personnalisé, mais je ne pense pas qu’ils soient particulièrement vitaux pour les fonctions principales du plugin.

Voyons maintenant comment le plugin affecte le frontend.

Curseurs de produit

Parce que j’ai activé les boutons prev/next dans les paramètres de navigation, les utilisateurs verront ces boutons astucieux sur chaque image :

Plutôt que d’avoir à cliquer sur la vignette pour naviguer, ils peuvent simplement cliquer sur le bouton pour passer à l’image suivante.

Si vous activez la lecture automatique, les images défileront automatiquement à la vitesse que vous avez spécifiée. Personnellement, je n’aime pas vraiment la lecture automatique des images, mais si vous êtes un fan, la fonctionnalité fonctionne parfaitement lors de mes tests.

J’aime que tout semble très professionnel dès la sortie de la boîte. Les boutons prev/next sont bien conçus et les transitions sont fluides.

De plus, pour les utilisateurs de mobiles/tablettes, ils peuvent facilement parcourir les images de vos produits par geste de la main, ce qui est agréable pour la convivialité mobile.

Zoom sur l’image

Voyons maintenant comment fonctionne le zoom. Je vais vous montrer les trois options de zoom différentes que j’ai mentionnées ci-dessus. Tant que vous l’avez activé, les trois options sont automatiquement activées lorsqu’un utilisateur passe sa souris sur l’image du produit.

Voici à quoi ressemble la page produit lorsque je ne survole pas l’image, c’est-à-dire qu’aucun effet de zoom n’est appliqué :

Voici ce qu’est un zoom intérieur ressemble à l’un de vos clients :

Remarquez comment il zoome sur l’image complète et tout se passe à l’intérieur de la zone de zoom d’origine.

Comparez cela avec un zoom extérieur:

Une boîte apparaît sur l’image d’origine, puis la partie agrandie à l’intérieur de cette boîte apparaît en dehors de l’image d’origine. Vous pouvez personnaliser l’emplacement et la taille de cette zone de zoom.

Enfin, voici ce qu’est un suivre le zoom ressemble à:

Vous pouvez rendre le zoom circulaire ou carré. Pour être honnête, cependant, je n’aime pas vraiment cet effet. Ni le cercle ni le carré ne me semblent particulièrement beaux. Je ne pense pas que ce soit un problème de mise en œuvre – je n’aime tout simplement pas l’effet, peu importe la qualité de sa mise en œuvre.

Variantes multiples

WooThumbs comprend une fonctionnalité intéressante si vous avez des produits avec plusieurs variations, par exemple des t-shirts de couleurs différentes pour les mêmes motifs.

WooThumbs vous permet d’ajouter des images supplémentaires par variation, de sorte que lorsqu’un utilisateur clique sur une variation, il peut…