Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment créer une galerie d’images de produits WooCommerce (étape par étape)

Vous souhaitez créer des galeries de produits WooCommerce à ajouter à des publications ou des pages de blog ?

Les galeries de produits WooCommerce sont un moyen facile d’afficher vos produits en dehors des pages de votre boutique. Elles aident à attirer plus de clients/clientes et à booster les conversions.

Dans cet article, nous allons vous afficher comment créer facilement une galerie d’images de produits WooCommerce (étape par étape).

How to create a WooCommerce product image gallery

Pourquoi créer des galeries de produits WooCommerce ?

WooCommerce est l’extension WordPress de commerce électronique la plus populaire sur le marché. Il vous permet de vendre des produits en créant un magasin en ligne.

La plupart des thèmes WordPress pour WooCommerce sont livrés avec des modèles par défaut pour les pages de boutique et de catégorie de boutique. Ces pages listent simplement vos produits en utilisant le style du thème.

Et si vous vouliez créer une galerie de produits et l’afficher à l’intérieur d’une publication de blog ou d’une autre page de votre site ? En affichant vos produits dans vos publications et pages de blog les plus populaires, vous pouvez augmenter vos ventes et vos conversions.

Jetons un coup d’œil à la façon de créer facilement des galeries d’images de produits WooCommerce. Nous allons partager deux méthodes différentes, et vous pouvez utiliser les liens rapides ci-dessous pour passer à l’option qui vous convient :

Méthode 1 : Créer des galeries de produits WooCommerce avec SeedProd (Recommandé)

La meilleure façon de faire une galerie d’images de produits WooCommerce est d’utiliser SeedProd. C’est le meilleur constructeur de page WordPress drag and drop sur le marché.

Outil de personnalisation vous permet de créer facilement des thèmes WordPress personnalisés et des pages d’atterrissage, sans aucun codage nécessaire. De plus, il est livré avec des blocs et une intégration WooCommerce intégrés qui facilitent l’ajout de galeries d’images de produits à n’importe quelle page ou publication dans WordPress.

Pour Premiers pas, vous devez installer et activer l’extension SeedProd. Si vous avez besoin d’aide, vous pouvez suivre ce guide sur l ‘installation d’une extension WordPress.

Note : Il existe une version gratuite de SeedProd que vous pouvez essayer, mais vous avez besoin de l’offre Elite de SeedProd pour accéder aux blocs WooCommerce.

Une fois l’extension activée, rendez-vous dans SeedProd  » Réglages depuis votre Tableau de bord WordPress et saisissez votre clé de licence.

Entering the SeedProd license key

Vous trouverez votre clé de licence dans votre compte sur le site SeedProd. Après avoir saisi/saisie votre clé de licence, cliquez sur le bouton ‘Vérifier la clé’ pour continuer.

Choisir un kit de modèles WooCommerce

Ensuite, vous devez choisir un kit de modèle WooCommerce à utiliser pour votre stock en ligne. Cela remplacera votre thème WordPress existant par un nouveau design personnalisé.

Il suffit d’aller dans SeedProd  » Theme Constructeur et de cliquer sur le bouton ‘Theme Modèle Kits’.

Installing a WooCommerce template kit using SeedProd

Vous accéderez ainsi à la bibliothèque de kits du site SeedProd.

À partir de cette page, vous pouvez cliquer sur l’onglet  » WooCommerce  » pour voir tous les kits de modèles créés spécifiquement pour les magasins en ligne.

Choose a WooCommerce theme kit

Vous pouvez survoler n’importe quel modèle de kit et cliquer sur la loupe pour en prévisualiser le design. Lorsque vous trouvez un modèle de kit qui vous plaît, il vous suffit de cliquer sur la coche pour l’utiliser.

Pour ce tutoriel, nous utiliserons le  » starter theme  » de WooCommerce, mais vous pouvez utiliser n’importe quel kit de modèles que vous souhaitez.

Une fois que vous avez sélectionné un kit de modèle, SeedProd l’importera, et vous pourrez voir une liste de tous les éléments du modèle sur le tableau de bord du thème.

SeedProd will import all template parts of the theme

Vous pouvez personnaliser chaque partie du modèle, y compris les pages de produits, la page de boutique, la page de commande, et plus encore, avec le constructeur facile de SeedProd par glisser-déposer. C’est ainsi que nous allons ajouter une galerie d’images de produits WooCommerce.

Tout d’abord, trouvez l’élément du modèle que vous souhaitez personnaliser. Pour ce tutoriel, nous choisirons la partie « Publication unique ». C’est le Modèle qui détermine l’apparence de tous vos articles de blog individuels.

Survolez-la et cliquez sur le lien « Modifier la conception ».

Click Edit design link to customize

Ceci ouvrira le constructeur visuel de page de SeedProd.

À partir de là, vous pouvez faire glisser et déposer des blocs prêts à l’emploi sur votre page, cliquer sur n’importe quel élément pour le personnaliser et voir un aperçu de la façon dont votre conception se consulte en temps réel.

SeedProd visual builder

Allez-y et faites toutes les personnalisations que vous voulez et nous ajouterons la galerie d’images de produits dans l’étape suivante.

Ajout d’un Diaporama de galerie d’images de produits WooCommerce dans WordPress

Maintenant que vous avez un design de thème WooCommerce personnalisé, vous êtes prêt à ajouter une belle galerie d’images de produits.

Pour ce faire, cliquez sur le bloc de marqueur de modèle WooCommerce  » Images de la galerie de produits  » dans le panneau de gauche et faites-le glisser n’importe où dans la zone de prévisualisation de votre page.

Cela permettra de tirer les informations et les images de vos produits directement depuis WooCommerce.

Drag Product Images Gallery block onto your page

Ensuite, vous pouvez cliquer sur le bloc pour personnaliser les Réglages de votre galerie d’images de produits.

Tout d’abord, vous verrez l’option d’agrandissement de l’image. Celle-ci permet aux internautes de survoler une image pour obtenir une vue agrandie d’un produit.

Configure product image gallery zoom

Vous pouvez faire glisser les diaporamas horizontaux pour contrôler la position du bouton de zoom. Vous pouvez également modifier la taille de la police, la couleur de l’icône, le rayon de la bordure et la couleur de l’arrière-plan.

Si vous défilez vers le bas, vous pouvez également personnaliser les bordures des images et des miniatures. Vous pouvez définir le rayon de la bordure, le style, la couleur et la largeur.

Set the image border for your product gallery

Il existe également un onglet « Avancé » sur lequel vous pouvez cliquer pour accéder à d’autres options de personnalisation.

Il s’agit notamment de l’espacement, de l’ID et de la classe CSS, de la visibilité de l’appareil, des effets d’animation, etc.

Advanced settings for SeedProd product image gallery

Lorsque vous aurez fini de personnaliser votre galerie d’images de produits, n’oubliez pas d’appuyer sur le bouton « Enregistrer ».

Publier votre galerie d’images de produits WooCommerce

Enfin, vous devez faire vivre votre galerie d’images de produits sur votre site. Pour ce faire, quittez le constructeur visuel et retournez au tableau de bord  » Constructeur de thèmes « .

Ensuite, il suffit de permuter le commutateur « Enable SeedProd Theme » sur la position « Yes ».

Enable SeedProd theme

C’est tout !

Vous pouvez visiter votre site et voir votre galerie d’images de produits WooCommerce en direct.

Example of SeedProd product image gallery for WooCommerce

Désormais, vos internautes peuvent cliquer sur les images des produits de votre galerie comme dans un diaporama et zoomer sur les détails des produits.

Méthode 2 : Créer des galeries de produits WooCommerce avec Envira Gallery

Envira Gallery est la meilleure extension de galerie photo WordPress et permet d’afficher facilement des produits n’importe où sur votre site. C’est un moyen rapide de créer une galerie de produits WooCommerce dans WordPress.

La première chose à faire est d’installer et d’activer l’extension Envira Gallery. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Lors de l’activation, vous devez vous rendre sur la page Envira Gallery  » Réglages pour saisir votre clé de licence. Vous trouverez cette information sous votre compte sur le site d’Envira Gallery.

Enter Envira license key

Une fois la clé de licence vérifiée, vous pouvez aller dans Envira Gallery  » Addons pour installer et activer le module complémentaire ‘Featured Content’.

Ce module vous permet d’afficher vos produits WooCommerce dans les galeries Envira. Allez-y et cliquez sur le bouton  » Installer  » sous le module de fonctionnalité en avant.

Install featured content addon

Ensuite, vous devez vous rendre sur la page Envira Gallery  » Ajouter une nouvelle  » pour créer votre nouvelle galerie de produits.

À partir de là, vous pouvez commencer par ajouter un titre à la nouvelle galerie.

Add a title for your product gallery

Après le titre, vous devez passer à l’onglet « Galerie externe » et cliquer sur l’option « Contenu en vedette ».

Ensuite, défilez vers le bas jusqu’à l’onglet ‘Images’. Dans le champ  » Sélectionnez votre (vos) type(s) de publication « , vous devez sélectionner l’option  » Produit « , qui est le type de publication personnalisé pour les produits WooCommerce.

Select product as the post type

Si vous avez des centaines de produits, vous pouvez créer plusieurs galeries.

Vous pouvez réduire les listes de la galerie en sélectionnant des termes de taxonomie pour des identifiants ou des catégories de produits spécifiques.

Select product categories

Il suffit de répéter ce processus avec différents identifiants et catégories de produits chaque fois que vous créez une nouvelle galerie de produits. Le type de publication sera toujours  » Produit  » dans toutes vos galeries de produits WooCommerce.

Vous pouvez également choisir un terme de taxonomie similaire pour sélectionner et afficher des produits spécifiques dans vos galeries.

Choose a taxonomy term relation

Pour plus de détails, nous vous conseillons de consulter notre guide sur la création d’une galerie d’images sur WordPress.

Une fois que vous avez terminé, vous pouvez publier votre galerie de produits, ce qui la rendra disponible pour être ajoutée n’importe où sur votre site WordPress.

Publish your product gallery

Ensuite, vous pouvez ajouter un nouveau post ou une nouvelle page ou modifier un post ou une page existante pour afficher votre galerie de produits WooCommerce.

Une fois dans l’éditeur de contenu, il suffit de cliquer sur le bouton « + » et d’ajouter le bloc Envira Gallery.

Add Envira gallery block

Ensuite, vous pouvez sélectionner votre galerie d’images de produits dans le bloc Envira Gallery.

Cliquez simplement sur le menu déroulant et choisissez la galerie que vous avez créée précédemment.

Select your product gallery from the dropdown menu

Vous verrez maintenant une Prévisualisation de votre galerie dans l’éditeur/éditrices de blocs. Si elle ne se charge pas, ne vous inquiétez pas. Vous pouvez simplement prévisualiser votre publication de blog ou votre page pour voir si elle fonctionne correctement.

Ensuite, vous pouvez enregistrer et publier votre publication. Ensuite, visitez votre site pour voir la galerie de produits en action.

Product image gallery preview

Nous espérons que cet article vous a aidé à apprendre comment créer une galerie d’images de produits WooCommerce. Vous pouvez également consulter notre guide sur les extensions WordPress incontournables pour les sites professionnels et comment choisir le meilleur logiciel de conception.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

Commentaires

  1. Félicitations, vous avez la possibilité d'être le premier commentateur de cet article.
    Vous avez une question ou une suggestion ? Laissez un commentaire pour lancer la discussion.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.