J'ai travaillé sur des sites WooCommerce où tout semblait parfait, sauf les pages produits. Il n'y avait qu'une seule image, peut-être deux, et rien pour montrer différents angles, caractéristiques ou styles.
Après avoir ajouté une simple galerie d'images de produits, les choses ont vite 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 de montrer plus de photos rendait les produits plus réels et 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 boutiques en utilisant SeedProd. Vous n'aurez besoin d'aucun plugin ou code supplémentaire pour faire briller vos produits.
Avant de plonger dans le tutoriel, voici un aperçu rapide de ce qu'une galerie d'images de produits peut ajouter à votre boutique WooCommerce, et pourquoi il vaut la peine d'en configurer une :
| Fonctionnalité | Pourquoi c'est important |
|---|---|
| Galerie d'images de produits WooCommerce | Permet aux acheteurs de voir chaque angle et détail de votre produit |
| Diapositive de galerie | Présente les variations de produits comme les couleurs ou les styles en un seul endroit |
| Zoom et Lightbox | Rend les pages produits plus interactives et professionnelles |
| Vidéo produit (facultatif) | Renforce la confiance et augmente les conversions en montrant les produits en action |
Pourquoi créer une galerie d'images de produits WooCommerce ?
La création de galeries d'images de produits dans WooCommerce peut aider à présenter vos produits de la meilleure façon possible. Une galerie WooCommerce bien conçue donne plus de confiance aux acheteurs et les aide à avoir une vue complète de votre produit.
De plus, une galerie d'images visuellement attrayante peut améliorer l'expérience utilisateur globale de votre boutique en ligne, la rendant plus attrayante et plus facile à naviguer. Cela peut conduire à une plus grande satisfaction client et à une augmentation des ventes.
En fournissant aux clients des images claires et détaillées de vos produits, vous pouvez établir la confiance et la crédibilité de votre marque, ce qui entraîne des taux de conversion plus élevés et plus de ventes. Mieux encore, elles peuvent différencier votre boutique en ligne de vos concurrents, vous donnant un avantage sur un marché concurrentiel.
La meilleure façon de créer une galerie d'images de produits WooCommerce (sans plugin)
Lorsque vous envisagez des moyens de créer une galerie de produits pour votre site WordPress, vous pourriez immédiatement vous tourner vers 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 diapositives 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 pourriez installer plus de plugins WordPress que prévu, ce qui peut ajouter un fardeau inutile à votre site.
Au lieu de dépendre d'un plugin de galerie de produits volumineux 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 de destination pour WordPress, vous permettant de personnaliser facilement chaque partie de votre site WooCommerce sans code.
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 par glisser-déposer de SeedProd.
Voici un aperçu de certaines des options de personnalisation WooCommerce de SeedProd :
- Kits de site Web : Modèles de thème 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 page de paiement, le panier d'achat, la page de boutique, et plus encore, sans code.
- Balises de modèle WooCommerce : Galerie de produits, Image vedette du produit, Onglets de données du produit, Métadonnées du produit, Contenu du produit, et plus encore.
- Blocs WooCommerce : Bouton Ajouter au panier, Icône de panier de menu, Grille de produits, Produits les mieux notés, Produits récents, Produits en vedette, et plus encore.
- Modes de page : Créez une page de bientôt disponible WooCommerce, ou mettez votre boutique de commerce électronique en mode maintenance.
De plus, vous pouvez utiliser d'autres blocs et fonctionnalités de SeedProd, tels que le carrousel, les formulaires d'inscription, les compteurs, les avis, les témoignages, et plus encore.
Compte tenu de sa facilité d'utilisation et de ses options de personnalisation infinies, il est logique de gérer la conception 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 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 suivre ce guide sur la création d'une boutique en ligne en premier.
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
- Étape 3. Ajouter une galerie d'images de produits WooCommerce
- Étape 4. Personnaliser votre modèle de page produit WooCommerce
- Étape 5. Publier les modifications sur votre boutique WooCommerce
- Bonus : Ajoutez des vidéos produit à WooCommerce
- Plus de façons de personnaliser WooCommerce
Étape 1. Installer et activer SeedProd
Tout d'abord, vous devrez télécharger SeedProd Elite et l'installer et l'activer sur votre site Web WordPress. Le plan Elite vous donne accès à toutes les meilleures fonctionnalités 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 guide dans le téléchargement et l'activation du plugin et l'activation de votre clé de licence SeedProd.
Étape 2. Choisir un modèle de thème WooCommerce
Une fois le plugin actif sur votre site Web, accédez à SeedProd » Constructeur de thème depuis votre tableau de bord WordPress. Cliquez ensuite sur le bouton Kits de modèles de thème.
Sur l'écran suivant, vous verrez une bibliothèque de modèles que vous pouvez installer en 1 clic. Chaque modèle est livré avec toutes les pages que vous voyez dans la démo. Par exemple, si vous prévisualisez un modèle avec une page « À propos de nous » ou « Témoignages », SeedProd créera automatiquement ces pages pour vous.
Pour voir uniquement les modèles compatibles avec WooCommerce, cliquez sur l'onglet WooCommerce. De là, parcourez les conceptions jusqu'à ce que vous trouviez celle qui correspond à vos besoins, puis survolez-la et cliquez sur l'icône de coche.
SeedProd va maintenant importer ce modèle et, en 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 vos pages de paiement, de panier, de boutique et de produit unique. C'est ainsi que nous allons ajouter un curseur de galerie de produits réactif.
Mais d'abord, vous devrez ajouter des images de galerie à vos produits WooCommerce, ce que nous allons vous montrer comment faire ensuite.
Étape 3. Ajouter une galerie d'images de produits WooCommerce
Ajouter des photos supplémentaires à vos produits est un moyen fantastique de fournir plus d'informations aux 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 des 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. Accédez à Produits » Tous les produits depuis votre administration WordPress. Ensuite, trouvez le produit auquel vous souhaitez ajouter une galerie de produits et cliquez sur Modifier.
Dans l'éditeur de produit, vous verrez un panneau appelé « Galerie de produits » sur le côté droit. Dans ce panneau, cliquez sur le lien « Ajouter des images de galerie de produits » pour ajouter vos miniatures de galerie.
En cliquant sur ce lien, vous ouvrirez la médiathèque WordPress, où vous pourrez télécharger des images depuis votre ordinateur ou directement depuis la bibliothèque.
Maintenez la touche Maj enfoncée sur votre clavier pour sélectionner plusieurs images, puis cliquez sur le bouton Ajouter à la galerie.
WooCommerce ajoutera maintenant de nouvelles images à votre éditeur de produit. Vous devriez voir votre image principale, puis la galerie d'images miniatures supplémentaires en dessous.
Assurez-vous de cliquer sur le bouton Mettre à jour pour enregistrer vos modifications.
Étape 4. Personnaliser votre modèle de page produit WooCommerce
Maintenant que vous avez ajouté des images de galerie à votre boutique WooCommerce, vous pouvez personnaliser vos pages produit avec SeedProd.
Rendez-vous donc une fois de plus dans le constructeur de thèmes de SeedProd et recherchez le modèle « Page produit ». Ce modèle détermine l'apparence de toutes vos pages produit individuelles.
Pour le personnaliser, survolez-le simplement et cliquez sur le lien Modifier la conception.
Sur l'écran suivant, vous verrez le constructeur visuel de pages de SeedProd. C'est ici que vous pouvez faire glisser 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 vedette du produit comme image de produit par défaut. Il s'agit de l'une des balises de modèle WooCommerce de SeedProd, qui extrait les informations du produit directement de WooCommerce.
Remplaçons ce bloc par le bloc Galerie de produits de SeedProd.
Pour ce faire, survolez l'image vedette du produit jusqu'à ce que vous voyiez une bordure orange, puis cliquez sur l'icône de la corbeille.
Ajout du bloc de galerie d'images produit
SeedProd inclut des paramètres de zoom d'image produit WooCommerce intégrés afin que les acheteurs puissent inspecter les détails fins de près. Cliquez donc sur le bloc Images de la galerie produit 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 galerie, vous verrez plusieurs paramètres que vous pouvez personnaliser.
La première est l'option de zoom d'image, qui augmente 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 du bord et la couleur d'arrière-plan.
Ensuite, des personnalisations pour la bordure de l'image principale. Par exemple, vous pouvez ajouter une bordure pleine, pointillée ou discontinue et modifier le rayon, la couleur et la largeur de la bordure.
Des personnalisations similaires sont disponibles pour les miniatures de la galerie.
Lorsque vous passez à l'onglet Avancé, vous verrez d'autres options de style, notamment :
- Rayon, couleur, largeur et style de la bordure
- Espacement des marges et du remplissage du bloc
- Options de classe CSS
- Boutons de bascule de visibilité des appareils pour mobile et ordinateur
- Effets d'animation
Continuez à personnaliser votre page produit jusqu'à ce que vous soyez satisfait de la conception. Par exemple, vous voudrez peut-être ajouter le bloc de produits associés pour vendre croisé d'autres produits.
Ou, vous pouvez intégrer un bouton Tweet pour encourager les utilisateurs à partager votre produit sur les réseaux sociaux.
N'oubliez pas de cliquer sur le bouton Enregistrer lorsque vous êtes satisfait de votre conception.
Étape 5. Publier les modifications sur votre boutique WooCommerce
La dernière étape consiste à rendre vos modifications visibles sur votre site WooCommerce. Pour ce faire, vous devrez quitter le constructeur de pages et revenir à l'écran du constructeur de thèmes.
À partir de là, trouvez le bouton de bascule « Activer le thème SeedProd » et basculez-le sur Oui.
Vous pouvez maintenant visiter votre page produit pour voir votre nouvelle galerie d'images produit.
Comme vous pouvez le voir, vous pouvez cliquer sur chaque image et zoomer sur divers 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 similaire à un diaporama.
Bonus : Ajoutez des vidéos produit à WooCommerce
L'ajout de vidéos à vos pages produit est l'un des moyens les plus simples d'augmenter l'engagement et d'établir la confiance. J'ai vu des galeries de vidéos produit faire une réelle différence, en particulier pour les articles qui bénéficient d'ê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 produit avec SeedProd
Voici comment j'ajoute généralement des vidéos à une page produit WooCommerce en utilisant le constructeur par glisser-déposer de SeedProd :
- Dans votre tableau de bord WordPress, allez dans SeedProd » Constructeur de thèmes et modifiez votre modèle de page produit.
- Depuis le panneau de gauche, faites glisser le bloc Vidéo dans votre mise en page là 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 intégrera et affichera automatiquement un lecteur réactif.
- Utilisez les paramètres du bloc pour ajuster l'alignement, le remplissage et l'espacement afin qu'ils correspondent à votre conception.
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 avis clients, des démonstrations de produits et des vidéos tutoriels, le tout au même endroit.
Quelle que soit la méthode que vous choisissez, assurez-vous que la vidéo aide le client à imaginer l'utilisation de votre produit. C'est ce qui transforme un clic en vente.
Plus de façons 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 plus de personnalisations WooCommerce, veuillez consulter les guides suivants :
- Comment personnaliser l'onglet Informations supplémentaires de WooCommerce
- Comment ajouter un bouton « Voir le panier » dans WooCommerce
- Comment changer le titre de la page Boutique dans WooCommerce
- Comment ajouter des évaluations par étoiles aux pages produits WooCommerce
- Comment afficher les produits liés dans WooCommerce
- Comment afficher les catégories et les tags de produits dans WooCommerce
- Comment obtenir et afficher les descriptions de produits dans WooCommerce
- Comment afficher les produits en vedette dans WooCommerce
- Comment corriger le problème « Voir le panier » de WooCommerce qui ne fonctionne pas
- Comment masquer les produits hors 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 serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.
