J'ai travaillé sur des sites WooCommerce où tout avait l'air impeccable, sauf les pages produits. Elles n'avaient qu'une image, peut-être deux, et rien pour montrer les différents angles, caractéristiques ou styles.
Après avoir ajouté une simple galerie d'images de produits, les choses ont rapidement changé. Les clients sont restés plus longtemps sur la page, ont posé moins de questions et les ventes ont commencé à augmenter. Le simple fait d'afficher davantage de photos a rendu les produits plus réels et plus dignes de confiance.
Dans ce guide, je vais vous montrer comment créer une galerie d'images de produits WooCommerce étape par étape, de la même manière que je le fais sur mes propres magasins en utilisant SeedProd. Vous n'aurez besoin d'aucun plugin ou code supplémentaire pour faire briller vos produits.
Avant de nous lancer dans le tutoriel, voici un bref aperçu de ce qu'une galerie d'images de produits peut apporter à votre boutique WooCommerce, et pourquoi cela vaut la peine d'en créer une :
| Fonctionnalité | Pourquoi c'est important |
|---|---|
| Galerie d'images de produits WooCommerce | Permet aux acheteurs de voir tous les angles et tous les détails de votre produit |
| Diapositive de la galerie | Présenter en un seul endroit les variations de produits telles que les couleurs ou les styles |
| Zoom & Lightbox | Les pages produits sont plus interactives et plus professionnelles |
| Vidéo du produit (optionnel) | La présentation des produits en action permet d'instaurer un climat de confiance et d'augmenter les conversions. |
Pourquoi créer une galerie d'images de produits WooCommerce ?
La création de galeries d'images de produits dans WooCommerce peut vous aider à présenter vos produits de la meilleure façon possible. Une galerie WooCommerce bien conçue donne aux acheteurs plus de confiance et les aide à obtenir une vue complète de votre produit.
En outre, une galerie d'images visuellement attrayante peut améliorer l'expérience globale de l'utilisateur de votre boutique en ligne, en la rendant plus attrayante et en facilitant la navigation. Cela peut conduire à une plus grande satisfaction des clients et à une augmentation des ventes.
En donnant aux clients des images claires et détaillées de vos produits, vous pouvez renforcer la confiance et la crédibilité de votre marque, ce qui se traduit par des taux de conversion plus élevés et davantage de ventes. Mieux encore, ces images peuvent permettre à votre boutique en ligne de se démarquer de ses concurrents, vous donnant ainsi un avantage sur un marché très encombré.
La meilleure façon de créer une galerie d'images de produits WooCommerce (sans plugin)
Lorsque vous envisagez de créer une galerie de produits pour votre site WordPress, vous pourriez immédiatement choisir un plugin de galerie de produits WooCommerce. Après tout, ils facilitent la personnalisation des fonctionnalités par défaut de WooCommerce.
Cependant, tous les plugins de slider de galerie d'images n'ont pas les fonctionnalités clés dont vous avez besoin pour une boutique en ligne. Par conséquent, vous risquez d'installer plus de plugins WordPress que prévu, ce qui peut alourdir inutilement votre site.
Au lieu de dépendre d'un plugin de galerie de produits encombrant pour WooCommerce, je préfère utiliser SeedProd car il intègre les fonctionnalités de galerie.
C'est le meilleur constructeur de sites web et de pages d'atterrissage pour WordPress, vous permettant de personnaliser chaque partie de votre site WooCommerce sans code facilement.
Que vous souhaitiez créer un site WooCommerce complet à partir de zéro ou personnaliser des pages de produits individuelles, vous pouvez tout faire avec le constructeur drag-and-drop de SeedProd.
Voici un aperçu des options de personnalisation de WooCommerce de SeedProd :
- Kits de sites web : Modèles de thèmes WooCommerce préfabriqués que vous pouvez installer en un seul clic.
- Constructeur par glisser-déposer : Créez des pages personnalisées pour votre boutique, y compris la caisse, le panier d'achat, la page de la boutique, et plus encore, sans code.
- Tags du modèle WooCommerce : Galerie de produits, Image en vedette du produit, Onglets de données sur le produit, Méta du produit, Contenu du produit, et plus encore.
- Blocs WooCommerce : Bouton Ajouter au panier, icône Menu Panier, Grille de produits, Produits les mieux notés, Produits récents, Produits en vedette, et plus encore.
- Modes de page : Créez une page WooCommerce à venir, ou mettez votre boutique en ligne en mode maintenance.
En outre, vous pouvez utiliser tous les autres blocs et fonctionnalités de SeedProd, tels que le slider carrousel, les formulaires opt-in, les comptes à rebours, les critiques, les témoignages, et bien plus encore.
Compte tenu de sa facilité d'utilisation et de ses innombrables options de personnalisation, il est logique de gérer le design et la mise en page de votre boutique en ligne avec SeedProd.
Créer une galerie d'images de produits WooCommerce avec SeedProd
Avant de nous plonger dans ce guide étape par étape, vous devez d'abord vous assurer que WooCommerce est installé sur votre site Web WordPress. Si vous êtes encore en train de configurer votre boutique, vous pouvez d'abord suivre ce guide sur la création d'une boutique en ligne.
Une fois que vous avez fait cela, suivez ces étapes pour ajouter une superbe galerie d'images à WooCommerce.
- Étape 1. Installer et activer SeedProd
- Étape 2. Choisir un modèle de thème WooCommerce
- Etape 3. Ajouter la galerie d'images de produits WooCommerce
- Étape 4. Personnalisez votre modèle de page produit WooCommerce
- Étape 5. Publier les changements dans votre boutique WooCommerce
- Bonus : Ajouter des vidéos de produits à WooCommerce
- Plus de possibilités de personnaliser WooCommerce
Étape 1. Installer et activer SeedProd
Tout d'abord, vous devez télécharger SeedProd Elite, l'installer et l'activer sur votre site WordPress. Le plan Elite vous donne accès à toutes les meilleures caractéristiques et fonctionnalités de WooCommerce.
Si vous avez besoin d'aide pour l'installation, vous pouvez consulter notre documentation sur l'installation de SeedProd. Elle vous guidera dans le téléchargement et l'activation du plugin et dans l'activation de votre clé de licence SeedProd.
Étape 2. Choisir un modèle de thème WooCommerce
Une fois que le plugin est actif sur votre site web, naviguez vers SeedProd " Theme Builder depuis votre tableau de bord WordPress. Cliquez ensuite sur le bouton Theme Template Kits.
Sur l'écran suivant, vous verrez une bibliothèque de modèles que vous pouvez installer en un seul clic. Chaque modèle est livré avec toutes les pages que vous voyez dans la démo. Par exemple, si vous prévoyez un modèle avec une page 'A propos de nous' ou 'Témoignages', SeedProd créera automatiquement ces pages pour vous.
Pour ne voir que les modèles compatibles avec WooCommerce, cliquez sur l'onglet WooCommerce. De là, parcourez les modèles jusqu'à ce que vous en trouviez un qui corresponde à vos besoins, puis survolez-le et cliquez sur l'icône de la coche.
Maintenant SeedProd va importer ce modèle, et dans quelques secondes, vous verrez toutes les parties du modèle dans une liste sur le tableau de bord du thème :
Le constructeur de pages par glisser-déposer de SeedProd vous permet de personnaliser facilement chaque partie du modèle, y compris les pages de paiement, de panier, de boutique et de produit unique. C'est ainsi que nous ajouterons un slider de galerie de produits réactif.
Mais d'abord, vous devez ajouter des images de galerie à vos produits WooCommerce, ce que nous allons faire maintenant.
Etape 3. Ajouter la galerie d'images de produits WooCommerce
L'ajout de photos supplémentaires à vos produits est un excellent moyen de fournir plus d'informations à vos clients potentiels. Par exemple, vous pouvez utiliser une galerie pour télécharger des images de variations supplémentaires si un produit a différentes options de couleur ou variations de produit.
Vous pouvez facilement ajouter des images de produits supplémentaires dans WooCommerce en téléchargeant plusieurs fichiers dans la section Galerie de produits. Naviguez vers Produits " Tous les produits à partir de votre administrateur WordPress. Ensuite, trouvez le produit auquel vous souhaitez ajouter une galerie de produits et cliquez sur Modifier.
Dans l'éditeur de produits, vous verrez un panneau intitulé "Galerie de produits" sur le côté droit. Dans ce panneau, cliquez sur le lien "Ajouter des images de la galerie de produits" pour ajouter les vignettes de votre galerie.
En cliquant sur ce lien, vous ouvrirez la médiathèque de WordPress, où vous pourrez télécharger des images depuis votre ordinateur ou directement depuis la médiathèque.
Maintenez la touche Majuscule de votre clavier enfoncée pour sélectionner plusieurs images, puis cliquez sur le bouton Ajouter à la galerie.
WooCommerce va maintenant ajouter de nouvelles images à votre éditeur de produits. Vous devriez voir votre image principale, puis la galerie d'images miniatures supplémentaires en dessous.
Veillez à cliquer sur le bouton " Mise à jour" pour enregistrer vos modifications.
Étape 4. Personnalisez votre modèle de page produit WooCommerce
Maintenant que vous avez ajouté des galeries d'images à votre boutique WooCommerce, vous pouvez personnaliser vos pages produits avec SeedProd.
Rendez-vous donc une fois de plus dans le Theme Builder de SeedProd et cherchez le modèle "Product Page". Ce modèle détermine l'apparence de toutes vos pages de produits individuelles.
Pour le personnaliser, il suffit de le survoler et de cliquer sur le lien Modifier le design.
Sur l'écran suivant, vous verrez le constructeur visuel de pages de SeedProd. C'est ici que vous pouvez glisser et déposer de nouveaux éléments de conception sur votre page et personnaliser la conception globale.
Comme vous pouvez le voir, ce modèle utilise l'image du produit (Product Featured Image) comme image de produit par défaut. Il s'agit d'une des balises du modèle WooCommerce de SeedProd, qui récupère les informations sur le produit directement depuis WooCommerce.
Remplaçons ce bloc par le bloc Galerie de produits de SeedProd.
Pour ce faire, survolez l'image vedette du produit jusqu'à ce qu'une bordure orange apparaisse, puis cliquez sur l'icône de la corbeille.
Ajout d'un bloc de galerie d'images de produits
SeedProd intègre les paramètres de zoom des images de produits de WooCommerce afin que les acheteurs puissent inspecter les détails de près. Cliquez donc sur le bloc Images de la galerie de produits dans le panneau de gauche et faites-le glisser sur l'aperçu de votre page pour intégrer la mise en page de la galerie.
Lorsque vous cliquez sur le bloc de la galerie, vous verrez plusieurs paramètres que vous pouvez personnaliser.
La première est l'option de zoom d'image, qui permet d'augmenter la taille d'une image lorsque vous la survolez.
Ici, vous pouvez faire glisser les curseurs horizontaux pour modifier la position du bouton de zoom et la taille de la police. Vous pouvez également modifier la couleur de l'icône, le rayon de la bordure et la couleur d'arrière-plan.
Viennent ensuite les personnalisations de la bordure de l'image principale. Par exemple, vous pouvez ajouter une bordure pleine, en pointillés ou en tirets et modifier le rayon, la couleur et la largeur de la bordure.
Des personnalisations similaires sont disponibles pour les vignettes de la galerie.
Lorsque vous passez à l'onglet Avancé, d'autres options de style s'offrent à vous :
- Rayon, couleur, largeur et style de la bordure
- Espace pour les marges et le rembourrage du bloc
- Options de classe CSS
- Visibilité des appareils pour les mobiles et les ordinateurs de bureau
- Effets d'animation
Continuez à personnaliser votre page produit jusqu'à ce que vous soyez satisfait de sa conception. Par exemple, vous pouvez ajouter le bloc "Produits apparentés" pour faire de la vente croisée avec d'autres produits.
Vous pouvez également intégrer un bouton Tweet pour encourager les utilisateurs à partager votre produit sur les médias sociaux.
N'oubliez pas de cliquer sur le bouton Enregistrer lorsque vous êtes satisfait de votre dessin.
Étape 5. Publier les changements dans votre boutique WooCommerce
La dernière étape consiste à mettre en œuvre vos modifications sur votre site WooCommerce. Pour ce faire, vous devez quitter le constructeur de pages et revenir à l'écran du constructeur de thèmes.
A partir de là, trouvez le bouton "Enable SeedProd Theme" et mettez-le en position "Yes".
Vous pouvez maintenant visiter la page de votre produit pour voir votre nouvelle galerie d'images.
Comme vous pouvez le constater, vous pouvez cliquer sur chaque image et zoomer sur différents détails. De plus, si vous cliquez sur le bouton de zoom, l'image s'ouvrira dans une fenêtre contextuelle en plein écran.
À partir de là, vous pouvez cliquer sur chaque image dans un format de type diaporama.
Bonus : Ajouter des vidéos de produits à WooCommerce
L'ajout de vidéos à vos pages produits est l'un des moyens les plus simples d'accroître l'engagement et de renforcer la confiance. J'ai vu des galeries de vidéos de produits faire une réelle différence, en particulier pour les articles qui gagnent à être vus en action, comme les vêtements, les gadgets ou les outils.
Vous pouvez intégrer des vidéos directement depuis YouTube ou Vimeo en utilisant le bloc vidéo de SeedProd, ou utiliser un plugin comme Smash Balloon pour créer une galerie vidéo complète de produits WooCommerce.
Comment intégrer une vidéo de produit avec SeedProd
Voici comment j'ajoute habituellement des vidéos à une page de produit WooCommerce en utilisant le constructeur par glisser-déposer de SeedProd :
- Dans votre tableau de bord WordPress, allez dans SeedProd " Theme Builder et modifiez votre modèle de page produit.
- Dans le panneau de gauche, faites glisser le bloc Vidéo dans votre mise en page à l'endroit où vous souhaitez que la vidéo apparaisse - généralement sous la galerie d'images ou la description du produit.
- Collez votre lien YouTube ou Vimeo dans les paramètres du bloc. Il sera automatiquement intégré et affichera un lecteur réactif.
- Utilisez les paramètres du bloc pour ajuster l'alignement, le remplissage et l'espacement en fonction de votre dessin.
Si vous préférez afficher une galerie de vidéos de produits, le plugin YouTube Feed de Smash Balloon est une autre option solide. Je l'ai utilisé pour présenter des commentaires de clients, des démonstrations de produits et des vidéos tutorielles en un seul endroit.
Quelle que soit la méthode choisie, assurez-vous que la vidéo aide le client à s'imaginer en train d'utiliser votre produit. C'est ce qui transforme un clic en vente.
Plus de possibilités de personnaliser WooCommerce
La création d'une galerie d'images de produits n'est qu'une des nombreuses façons de personnaliser votre boutique. Pour d'autres personnalisations de WooCommerce, veuillez consulter les guides suivants :
- Comment personnaliser l'onglet Informations complémentaires de WooCommerce
- Comment ajouter un bouton "Voir le panier" dans WooCommerce
- Comment changer le titre de la page de la boutique dans WooCommerce
- Comment ajouter un classement par étoiles aux pages produits de WooCommerce
- Comment afficher les produits apparentés dans WooCommerce
- Comment afficher les catégories et les étiquettes de produits dans WooCommerce
- Comment obtenir et afficher les descriptions de produits dans WooCommerce
- Comment afficher les produits vedettes dans WooCommerce
- Comment réparer le dysfonctionnement de l'affichage du panier dans WooCommerce ?
- Comment masquer les produits en rupture de stock dans WooCommerce
Nous espérons que ce guide vous a aidé à apprendre à créer une superbe galerie d'images de produits dans WooCommerce.
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à laisser un commentaire pour nous faire part de vos questions et de vos réactions.
Vous pouvez également nous suivre sur YouTube, X (anciennement Twitter) et Facebook pour obtenir d'autres contenus utiles au développement de votre entreprise.
