TL;DR : Comment personnaliser votre page de boutique WooCommerce
Votre page de boutique WooCommerce est une archive de produits créée à partir d’un fichier modèle, vous ne pouvez donc pas la modifier comme une page normale. Ces méthodes fonctionnent à la place.
- Ce que c'est – La liste principale des produits de votre magasin, générée à partir du modèle archive-product.php de WooCommerce
- Méthode 1 : SeedProd – Constructeur par glisser-déposer avec des blocs WooCommerce et un contrôle de conception complet, sans code
- Méthode 2 : Éditeur WordPress – L’éditeur de site sur les thèmes de blocs, le personnalisateur WooCommerce sur les thèmes classiques
- Titre de la page de la boutique – Renommez-le, changez son titre SEO avec AIOSEO, restylez-le ou masquez-le
- Pages de catégorie – Elles proviennent toutes d’un seul modèle d’archives de produits que vous personnalisez une fois
- Galerie de produits – Ajoutez des images de galerie dans l’éditeur de produits, puis affichez-les avec le bloc d’images de galerie de produits de SeedProd
La première boutique WooCommerce que j'ai configurée pour un client avait une page boutique qui semblait fade et ne correspondait pas du tout à leur marque.
Si vous êtes dans la même situation, ne vous inquiétez pas. WooCommerce est le moyen le plus populaire d'ajouter l'e-commerce à WordPress, et vous pouvez personnaliser votre page boutique WooCommerce sans écrire une seule ligne de code.
Je vais vous montrer comment refondre toute la page avec un constructeur par glisser-déposer ou l’éditeur WordPress intégré. Après cela, nous aborderons le titre de la page de la boutique, vos pages de catégorie de produits et les galeries de produits.
Qu'est-ce que la page de boutique WooCommerce ?
La page de boutique WooCommerce est la page d'archive de produits par défaut qui affiche tous les produits de votre magasin. Lorsque vous installez WooCommerce, il crée automatiquement cette page en utilisant les paramètres de mise en page de votre thème.
Considérez-la comme le catalogue principal ou la vitrine de votre boutique. C'est là que les clients naviguent généralement avant de cliquer sur des pages de produits spécifiques.
Par défaut, la page de boutique récupère le contenu de vos listes de produits et affiche :
- Images des produits
- Titres et descriptions courtes
- Prix
- Catégories et étiquettes de produits
- Notes étoiles et avis (si activés)
WordPress la génère dynamiquement à partir de votre thème et des fichiers modèles de WooCommerce.
Une page de boutique bien conçue aide les visiteurs à trouver rapidement ce qu'ils recherchent, réduit les frictions dans le processus d'achat et augmente les ventes.
Modifier directement la page de boutique WooCommerce dans l'éditeur WordPress ne fonctionnera pas comme vous pourriez vous y attendre. La page de boutique est générée à partir d'un fichier modèle appelé archive-product.php, que WooCommerce utilise pour afficher votre archive de produits dynamiquement à l'aide de hooks PHP et de shortcodes.
C'est pourquoi cliquer sur « Modifier la page » sur la page de la boutique ne vous donne pas le contrôle sur le modèle de page de boutique WooCommerce ou la grille de produits. Pour la personnaliser, vous avez besoin d'un plugin comme SeedProd, qui remplace le modèle par votre propre design, ou des options intégrées de WooCommerce Customizer ou d'Éditeur de site.
Pourquoi personnaliser la page de boutique WooCommerce ?
Imaginez entrer dans un magasin physique où tous les produits sont éparpillés au hasard sur les étagères, sans pancartes, catégories ou articles en vedette. Vous sortiriez probablement rapidement.
C'est exactement ce que vivent de nombreux acheteurs lorsqu'ils arrivent sur une page de boutique WooCommerce par défaut. Une simple grille de produits sans contexte ni direction entraîne des taux de rebond élevés et des opportunités de vente manquées.
La personnalisation de votre page de boutique vous aide à :
- Améliorer l'expérience utilisateur (UX) en facilitant la recherche de ce que les clients veulent
- Augmenter les conversions en mettant en avant les meilleures ventes, les promotions ou les produits à forte marge
- Améliorer le SEO en ajoutant du contenu riche en mots-clés et du balisage de schéma
- Réduire les taux de rebond en offrant une meilleure navigation et une hiérarchie visuelle
- Renforcer la confiance de la marque avec des témoignages, des avis ou du contenu généré par les utilisateurs
Une conception de boutique WooCommerce bien optimisée est un élément essentiel pour transformer les visiteurs en acheteurs. Si vous construisez encore votre boutique à partir de zéro, ce guide sur comment configurer une boutique en ligne sur WordPress est un bon point de départ.
Comment personnaliser la page de boutique WooCommerce dans WordPress
Il existe plusieurs façons de personnaliser votre page de boutique WooCommerce dans WordPress. Voici un aperçu rapide de vos options avant de plonger dans le détail.
| Méthode | Idéal pour | Code requis ? |
|---|---|---|
| SeedProd | Contrôle de conception complet, mises en page personnalisées, bannières, sections en vedette, boutique WooCommerce correspondant à la marque | Non |
| Éditeur WordPress (Éditeur de site / Personnaliseur) | Changements rapides de mise en page, ordre de tri des produits, colonnes, aucun plugin supplémentaire nécessaire | Non |
| AIOSEO | Changer le titre SEO de la page boutique qui s'affiche dans les résultats de recherche | Non |
| Code personnalisé | Modifications avancées au-delà de ce que les outils offrent | Oui (développeur recommandé) |
- Méthode 1 : Utiliser SeedProd pour personnaliser la page de boutique WooCommerce
- Méthode 2 : Personnaliser la page boutique WooCommerce à l'aide de l'éditeur WordPress
- Comment changer le titre de la page boutique dans WooCommerce
- Comment changer la page boutique par défaut dans WooCommerce
- Comment personnaliser les pages de catégories de produits dans WooCommerce
- Comment ajouter une galerie d'images de produits dans WooCommerce
- FAQ : Personnalisation de la page de boutique WooCommerce
Méthode 1 : Utiliser SeedProd pour personnaliser la page de boutique WooCommerce
Pour la première méthode, j'utiliserai SeedProd pour construire une boutique WooCommerce entièrement personnalisée.
SeedProd est le meilleur constructeur de sites web par glisser-déposer pour WordPress, avec plus d'1 million d'utilisateurs. Il vous permet de créer des thèmes WordPress personnalisés, des pages de destination à forte conversion et des mises en page de sites web réactifs sans code.
Lorsque j'ai mesuré la vitesse de la page avec GTmetrix, SeedProd s'est chargé en 556 ms contre 1 882 ms pour Elementor, avec la moitié des requêtes HTTP. Cela en fait un choix solide pour toute boutique WooCommerce personnalisée où la vitesse de la page est importante.
Ce plugin vous permet également de créer des boutiques en ligne complètes grâce à son intégration WooCommerce. Vous pouvez personnaliser votre page de boutique, les pages produits, le panier, la validation de commande, et plus encore en quelques clics.
SeedProd est livré avec plus de 300 thèmes et modèles professionnels. À partir de là, vous pouvez personnaliser le design de votre boutique WooCommerce avec des blocs de contenu et des sections faciles à utiliser.
Suivez ces étapes pour personnaliser votre page de boutique WooCommerce avec SeedProd.
Étape 1. Installer le constructeur de site SeedProd
La première étape consiste à télécharger une copie du plugin constructeur de sites web SeedProd.
Pour le modifier, j'utilise All in One SEO (AIOSEO), le meilleur plugin SEO WordPress avec plus de 3 millions d'utilisateurs. La version gratuite gère les titres de page personnalisés, et la version Pro ajoute une prise en charge complète du SEO WooCommerce.
Vous devrez ensuite installer SeedProd sur votre site web WordPress. Vous pouvez suivre ces instructions pour l'installation d'un plugin WordPress si vous avez besoin d'aide.
Après avoir installé et activé SeedProd, allez dans SeedProd » Paramètres et entrez votre clé de licence de plugin.
Vous pouvez trouver votre clé de licence en vous connectant au site web SeedProd et en la copiant depuis la section « Téléchargements ».
Entrez votre clé de licence et cliquez sur le bouton Vérifier la clé avant de passer à l'étape suivante.
Étape 2. Créer un thème WooCommerce personnalisé
Le Theme Builder de SeedProd est ce qui personnalise votre page de boutique WooCommerce. Il remplace votre thème WordPress existant par votre propre design.
Vous pouvez la trouver en allant dans SeedProd » Constructeur de thèmes depuis votre tableau de bord WordPress.
Il y a 2 façons de créer votre thème e-commerce avec SeedProd :
- Créer chaque partie (modèle) de votre thème individuellement
- Créer tous vos modèles de thème avec un modèle de thème WordPress pré-fait
Nous utiliserons la 2ème option pour ce tutoriel car elle crée automatiquement toutes les parties de votre site web WooCommerce.
Cliquez sur le bouton Thèmes en haut de votre écran pour lancer la galerie de modèles de thèmes de SeedProd. Vous pouvez choisir parmi de nombreux thèmes, y compris des designs pour les boutiques en ligne.
Nous opterons pour le thème « Furniture Store » pour ce tutoriel.
Pour importer le thème, survolez la miniature et cliquez sur l'icône de coche.
Comme vous pouvez le voir dans la capture d'écran ci-dessous, SeedProd créera automatiquement tous les modèles pour votre thème, y compris :
- Navigation de l'en-tête
- Archives des produits
- Page produit
- Page Boutique
- Page unique
- Publication unique
- Index du blog, Archives, Recherche
- Page d'accueil
- Barre latérale
- Pied de page
Vous pouvez personnaliser chaque modèle avec le constructeur glisser-déposer de SeedProd. Nous vous montrerons comment personnaliser le modèle de page de boutique à l'étape 3.
Étape 3. Personnaliser la page de boutique WooCommerce
Pour personnaliser votre page de boutique WooCommerce avec SeedProd, survolez le modèle « Page de boutique » et cliquez sur le lien Modifier le design.
Après avoir cliqué sur le lien, votre modèle de page de boutique s'ouvrira dans le constructeur de pages visuel glisser-déposer de SeedProd.
Sur la gauche se trouvent les blocs et sections que vous pouvez ajouter à votre page. Vous pouvez voir un aperçu de l'apparence de votre page en temps réel sur la droite.
Votre page boutique affichera par défaut une liste de tous vos produits. Vous pouvez modifier cela en ajoutant de nouvelles mises en page, des blocs de contenu et des sections.
Disons que vous souhaitez ajouter une bannière défilante présentant une vente ou une promotion. Dans ce cas, vous pouvez faire glisser le bloc Carrousel d'images et télécharger des images de bannière personnalisée.
Vous pouvez ensuite personnaliser votre carrousel dans les paramètres du bloc en le faisant passer à un thème sombre ou clair, en activant la lecture automatique du curseur et en affichant les légendes des images.
Et si vous souhaitez mettre en avant vos produits en vedette ou vos produits les plus vendus ? Pour ce faire, ajoutez une nouvelle section à votre page, puis faites défiler vers le panneau des blocs WooCommerce et faites glisser le bloc Produits les plus vendus sur votre page.
Ce bloc affichera vos produits les plus vendus dans une grille uniforme.
Vous pouvez rendre cette nouvelle section de page plus attrayante en lui donnant une couleur d'arrière-plan personnalisée.
Ensuite, dans les paramètres avancés du bloc Produits les plus vendus, vous pouvez modifier la couleur, la typographie et les boutons ajouter au panier.
Vous pouvez également afficher des produits par catégorie avec le bloc WooCommerce de SeedProd. Pour ce faire, faites glisser le bloc Grilles de produits, changez le « Type de requête » en Requête personnalisée et cliquez sur l'option Sélectionner par catégorie.
À partir de là, vous pouvez choisir les catégories à inclure dans la grille de produits.
Voici quelques autres blocs que vous pouvez ajouter à votre page boutique :
- Témoignages pour renforcer la confiance et la crédibilité
- Compteurs pour créer une urgence pour votre vente
- Accordéon pour afficher les questions fréquemment posées
- Intégrations Facebook ou Twitter pour afficher du contenu généré par les utilisateurs
Vous pouvez même changer le titre de votre page de boutique WooCommerce, ce que je vais aborder plus loin dans ce guide.
Lorsque vous êtes satisfait de votre page boutique, cliquez sur le bouton vert Enregistrer dans le coin supérieur droit de votre écran.
Vous pouvez maintenant suivre le même processus pour personnaliser les autres parties de votre boutique WooCommerce. Cliquez sur « Modifier le design » sur l'un de vos modèles de thème et personnalisez la mise en page et le style pour qu'ils correspondent à votre marque.
Étape 4. Publier votre page de boutique personnalisée
Lorsque votre site WooCommerce a l'apparence que vous souhaitez, il est temps de le mettre en ligne. Pour ce faire, allez dans SeedProd » Theme Builder et dans le coin supérieur droit, activez le bouton « Activer le thème SeedProd » sur « Oui ».
Vous pouvez maintenant prévisualiser votre page boutique WooCommerce en direct sur votre site web.
Méthode 2 : Personnaliser la page boutique WooCommerce à l'aide de l'éditeur WordPress
Si vous préférez ne pas utiliser de constructeur tiers, WordPress et WooCommerce incluent des outils intégrés pour ajuster la mise en page de votre boutique. L'option que vous utilisez dépend de votre thème e-commerce actif.
Utilisation de l'éditeur de site (Thèmes blocs)
Si votre site utilise un thème de blocs (comme Twenty Twenty-Four ou Twenty Twenty-Five), vous pouvez modifier le modèle de page boutique WooCommerce directement dans l'éditeur de site.
Accédez à Apparence » Éditeur depuis votre tableau de bord WordPress. Ouvrez la liste Modèles et recherchez le modèle Catalogue de produits (certains thèmes l'appellent Boutique). Cliquez dessus pour ouvrir l'éditeur de modèle.
À partir de là, vous pouvez ajouter, supprimer ou réorganiser des blocs pour modifier la mise en page de votre boutique WooCommerce. Lorsque vous avez terminé, cliquez sur Enregistrer.
Utilisation du personnaliseur classique (Thèmes classiques)
Si votre site utilise un thème classique, WooCommerce ajoute des paramètres d'affichage directement dans le personnaliseur WordPress.
Accédez à Apparence » Personnaliser depuis votre tableau de bord WordPress. Cliquez ensuite sur WooCommerce » Catalogue de produits pour voir les options de personnalisation.
Cliquez sur le menu déroulant « Affichage de la page de boutique » et choisissez une mise en page.
Par exemple, choisissez « Afficher les catégories » pour afficher uniquement vos catégories de produits sur la page de la boutique.
Ou choisissez « Afficher les produits » pour afficher uniquement les produits.
Vous pouvez également afficher vos catégories de produits en premier, puis une grille de produits avec l'option « Afficher les catégories et les produits ».
Vous pouvez également trier les produits par :
- Popularité
- Note moyenne
- Les plus récents
- Prix
Vous pouvez également choisir le nombre de produits par ligne et le nombre de lignes à afficher sur chaque page.
Voici un aperçu d'une page de boutique stylisée à l'aide du personnaliseur WooCommerce.
Comment changer le titre de la page boutique dans WooCommerce
WooCommerce nomme votre page de boutique « Boutique » lors de son installation, et de nombreux propriétaires de boutiques ne la modifient jamais. Un titre plus descriptif, comme « Créations artisanales » pour une boutique d'artisanat, indique aux visiteurs ce que vous vendez avant qu'ils ne commencent à naviguer.
Cela peut également améliorer votre référencement. Les moteurs de recherche utilisent les titres pour comprendre le sujet d'une page, donc un titre avec un mot-clé pertinent donne à votre boutique une meilleure chance de se classer.
La bonne méthode dépend du titre que vous souhaitez modifier : celui de la page elle-même, ou celui dans les résultats de recherche. Voici les quatre options.
Renommer la page boutique dans WordPress
La solution la plus rapide consiste à renommer la page Boutique comme n'importe quelle autre page WordPress. Allez dans Pages dans votre tableau de bord WordPress, trouvez votre page de boutique (généralement répertoriée comme « Boutique – Page de la boutique »), et cliquez sur Modifier.
Supprimez l'ancien titre en haut de l'éditeur, tapez le nouveau, et cliquez sur Mettre à jour.
Cela modifie le titre partout : sur la page, dans l'onglet du navigateur, dans les résultats de recherche, et dans tous les fils d'Ariane ou menus de navigation qui listent la page.
Changer le titre SEO de la page boutique avec AIOSEO
Parfois, vous voulez que le titre sur la page reste le même, tandis que celui dans les résultats de recherche fait la promotion. Ce titre d'annonce de recherche est le titre SEO, et c'est ce que les gens voient sur Google avant même de visiter votre boutique.
Pour la modifier, j’utilise All in One SEO (AIOSEO), le meilleur plugin SEO pour WordPress avec plus de 3 millions d’utilisateurs. La version gratuite gère les titres de page personnalisés, et la version Pro ajoute une prise en charge complète du SEO pour WooCommerce.
Une fois le plugin configuré, ouvrez votre page de boutique dans l'éditeur WordPress et faites défiler jusqu'à la boîte Paramètres AIOSEO.
Entrez votre titre personnalisé dans le champ Titre de la page, ou utilisez les balises intelligentes pour en créer un automatiquement. Cliquez ensuite sur Mettre à jour, et les moteurs de recherche afficheront le nouveau titre la prochaine fois qu'ils exploreront votre page.
Changer le titre de la page boutique dans SeedProd
Si vous avez créé votre page de boutique avec SeedProd dans la Méthode 1, le titre est un bloc comme tout le reste. Allez dans SeedProd » Theme Builder et cliquez sur « Modifier le design » sur votre modèle de page de boutique.
Cliquez sur le titre dans l'éditeur visuel et tapez le nouveau. Depuis le même panneau, vous pouvez ajuster sa taille, son niveau de titre, son alignement et sa visibilité mobile.
Pour modifier la couleur et les polices du titre, cliquez sur l'onglet Avancé et utilisez les options de style par point-et-clic.
Lorsque vous êtes satisfait du résultat, cliquez sur Enregistrer.
Comment masquer le titre de la page boutique
Parfois, le meilleur titre est aucun titre, par exemple lorsqu'une bannière personnalisée ou une image principale parle d'elle-même. Vous pouvez masquer le titre de la page de la boutique avec un petit extrait de CSS.
Allez dans Apparence » Personnaliser depuis votre tableau de bord WordPress et cliquez sur CSS additionnel.
Dans la zone de texte, entrez le code suivant et cliquez sur Publier :
.woocommerce-products-header {
display: none;
}
Pour réafficher le titre plus tard, supprimez le code et publiez à nouveau. Vous pouvez également ajouter l'extrait avec WPCode, le meilleur plugin d'extraits de code WordPress, afin de pouvoir l'activer et le désactiver en un clic.
Masquer n'est pas supprimer : ce CSS masque uniquement le titre côté public. L'en-tête reste dans le HTML de votre page, de sorte que les moteurs de recherche puissent toujours le lire.
Comment changer la page boutique par défaut dans WooCommerce
WooCommerce vous permet également de changer entièrement la page qui sert de page de votre boutique. C'est pratique si vous avez créé une page personnalisée que vous préférez utiliser comme porte d'entrée de votre magasin.
Allez dans WooCommerce » Réglages et ouvrez l'onglet Produits. Sous l'en-tête « Pages de la boutique », choisissez n'importe quelle page dans le menu déroulant « Page de la boutique » et cliquez sur Enregistrer les modifications.
WooCommerce utilise maintenant cette page comme archive de vos produits. La page de la boutique peut également servir de base à vos permaliens de produits, alors vérifiez vos URL de produits après avoir changé.
Comment personnaliser les pages de catégories de produits dans WooCommerce
Votre page de boutique n’est pas la seule sur laquelle les clients atterrissent. Les moteurs de recherche envoient souvent les gens directement vers une page de catégorie de produits, car elle correspond mieux à une recherche spécifique comme « vélos de route » qu’à une vitrine générale.
La plupart des boutiques laissent ces pages comme de simples grilles de produits. Personnaliser vos pages de catégorie avec un titre, une bannière et une mise en page appropriés les aide à se classer pour les mots-clés que vos clients recherchent, et donne aux gens une raison de rester une fois arrivés.
Ajouter d'abord les catégories de produits
Si vos produits ne sont pas encore organisés en catégories, commencez par là. Allez dans Produits » Catégories depuis votre tableau de bord WordPress.
Donnez à chaque catégorie un nom, un slug, une description et une miniature. WooCommerce crée ensuite automatiquement une page pour chaque catégorie, et ce sont ces pages que vous personnaliserez ensuite.
Personnaliser votre modèle de page de catégorie dans SeedProd
Chaque page de catégorie de votre boutique provient d’un seul modèle de thème appelé Archives de produits. Personnalisez-le une fois, et toutes vos pages de catégorie seront mises à jour pour correspondre.
Si vous avez créé votre boutique avec SeedProd dans la Méthode 1, ce modèle fait déjà partie de votre thème WooCommerce. Allez dans SeedProd » Constructeur de thèmes, survolez le modèle « Archives de produits » et cliquez sur Modifier la conception.
Le modèle s’ouvre dans le même éditeur glisser-déposer que celui que vous avez utilisé pour votre page de boutique. Vous y trouverez deux blocs déjà en place : Titre d’archive et Produits d’archive.
Le bloc Titre d’archive affiche automatiquement le bon titre pour chaque catégorie. Si un client ouvre votre catégorie « Vélos noirs », le titre s’affiche « Catégorie : Vélos noirs » sans que vous ayez à lever le petit doigt.
Le bloc Produits d’archive fait de même pour vos produits, affichant une grille filtrée selon la catégorie que le client est en train de consulter.
Cliquez sur l’un ou l’autre bloc pour le styliser dans le panneau de configuration de gauche. Vous pouvez modifier la taille, l’alignement et le niveau de titre du titre, puis affiner les polices, les couleurs et l’espacement dans l’onglet Avancé.
À partir de là, vous pouvez redessiner toute la mise en page avec n’importe lequel des blocs et sections de SeedProd. Faites glisser un bloc Image pour ajouter une bannière de catégorie faisant la promotion de votre dernière vente, ou déposez le bloc Témoignages à côté de vos produits pour que les clients voient les avis de vrais clients pendant qu’ils naviguent.
Ici, j’ai déplacé les blocs d’archive dans une colonne large et ajouté des témoignages dans celle, plus étroite, à côté.
Lorsque vous êtes satisfait de la conception de votre page de catégorie, cliquez sur Enregistrer. Si votre thème SeedProd est déjà activé depuis la Méthode 1, les modifications sont immédiatement mises en ligne sur toutes les pages de catégorie.
Vous souhaitez également afficher des liens de catégorie sur la page de boutique elle-même ? Définissez le bloc Grilles de produits sur une requête personnalisée comme dans la Méthode 1, Étape 3, ou activez « Afficher les catégories » dans les paramètres du catalogue de produits.
Comment ajouter une galerie d'images de produits dans WooCommerce
Votre page de boutique a une seule mission : inciter les clients à cliquer sur un produit. La page produit doit ensuite conclure la vente, et une seule photo y parvient rarement.
J'ai travaillé sur des boutiques WooCommerce où tout semblait parfait, sauf les pages produits. Elles avaient une image, peut-être deux, sans rien pour montrer différents angles, couleurs ou détails.
L'ajout d'une galerie d'images produit a rapidement changé la donne. Les clients restaient plus longtemps sur la page, posaient moins de questions et pouvaient inspecter les produits comme ils le feraient dans une vraie boutique.
WooCommerce inclut une galerie produit de base dès l'installation. Voici comment la configurer, puis personnaliser son apparence avec le même thème SeedProd que vous avez créé dans la Méthode 1.
Ajouter des images de galerie à vos produits WooCommerce
D'abord, donnez à vos produits des photos supplémentaires à afficher. Allez dans Produits » Tous les produits dans votre tableau de bord WordPress, trouvez le produit que vous souhaitez mettre à jour et cliquez sur Modifier.
Dans l'éditeur de produit, recherchez le panneau « Galerie produit » sur le côté droit. Cliquez sur le lien Ajouter des images de galerie produit.
Cela ouvre la médiathèque WordPress, où vous pouvez télécharger de nouvelles photos ou choisir des photos existantes. Maintenez la touche Maj enfoncée pour sélectionner plusieurs images à la fois, puis cliquez sur Ajouter à la galerie.
Vous verrez maintenant votre image produit principale avec les miniatures de la galerie en dessous. Cliquez sur Mettre à jour pour enregistrer le produit.
Le contenu de la galerie est réglé. Son affichage (la mise en page, le zoom et la fenêtre modale) dépend de votre modèle de page produit, et c'est là que SeedProd intervient.
Afficher la galerie avec le bloc Images de galerie de produits de SeedProd
Si vous avez créé votre boutique avec SeedProd dans la Méthode 1, vous avez déjà un modèle de Page Produit. Il contrôle l'apparence de chaque page produit individuelle.
Allez dans SeedProd » Constructeur de Thème, survolez le modèle « Page Produit » et cliquez sur Modifier la conception.
Le modèle s'ouvre dans le même constructeur par glisser-déposer que vous avez utilisé pour votre page de boutique.
La plupart des modèles utilisent par défaut le bloc Image Vedette Produit, qui affiche une photo par produit. Pour afficher votre galerie complète à la place, survolez ce bloc jusqu'à voir une bordure orange, puis cliquez sur l'icône de la corbeille pour le supprimer.
Trouvez maintenant le bloc Images de Galerie Produit dans le panneau de gauche et faites-le glisser dans l'espace que vous avez libéré. Il récupère toutes les images de la galerie directement depuis WooCommerce, donc le bloc reste à jour lorsque vous modifiez les photos d'un produit.
Cliquez sur le bloc de la galerie pour ouvrir ses paramètres. L'option de zoom d'image permet aux clients d'agrandir une photo en la survolant, et vous pouvez ajuster la position, la taille et les couleurs du bouton de zoom.
Vous pouvez également styliser les bordures de l'image principale et des miniatures, et l'onglet Avancé ajoute des contrôles d'espacement, de visibilité sur les appareils et d'animation.
Lorsque vous êtes satisfait de la conception, cliquez sur Enregistrer. Si votre thème SeedProd est déjà activé depuis la Méthode 1, la modification est immédiatement en ligne.
Voici la galerie produit terminée en action, avec un curseur cliquable et une vue plein écran en fenêtre modale :
Les vidéos produits fonctionnent aussi : vous pouvez faire glisser le bloc Vidéo de SeedProd sur le même modèle pour intégrer un clip YouTube ou Vimeo sous votre galerie. Pour une galerie complète de vidéos produits, le plugin YouTube Feed de Smash Balloon peut afficher des démos et des avis clients en un seul endroit.
FAQ : Personnalisation de la page de boutique WooCommerce
Pourquoi ne puis-je pas modifier directement ma page de boutique WooCommerce dans WordPress ?
La page de boutique WooCommerce est générée à partir d'un fichier modèle appelé archive-product.php, et non stockée comme un contenu de page ordinaire. Cliquer sur « Modifier la page » vous donne accès à l'objet de la page, mais la grille de produits et la mise en page proviennent du système de modèles PHP de WooCommerce, et non de l'éditeur de blocs. Pour modifier la conception, vous avez besoin d'un outil qui remplace le modèle, comme SeedProd, ou des options intégrées du personnaliseur et de l'éditeur de site.
Comment changer les produits qui s'affichent sur la page de boutique WooCommerce ?
Vous pouvez contrôler la visibilité des produits à partir des paramètres individuels des produits dans WordPress. Définissez un produit comme « Mis en avant » pour le mettre en valeur, ajustez son statut de publication pour l'afficher ou le masquer, ou utilisez les catégories et les étiquettes de produits pour organiser ce qui apparaît. Le personnaliseur WooCommerce vous permet également de modifier l'ordre de tri par défaut (popularité, note moyenne, nouveauté, prix) sous Apparence » Personnaliser » WooCommerce » Catalogue de produits.
Comment s'appelle le fichier modèle de la page de boutique WooCommerce ?
La page de boutique WooCommerce utilise le fichier modèle archive-product.php. Vous pouvez le trouver dans le dossier du plugin WooCommerce sous woocommerce/templates/. Pour le personnaliser avec du code, copiez-le dans le dossier woocommerce/ de votre thème et modifiez-le là. Cela évite que vos modifications ne soient écrasées lors des mises à jour du plugin.
Comment ajouter une bannière ou une section mise en avant à ma page de boutique WooCommerce ?
La façon la plus simple est d'utiliser le constructeur par glisser-déposer de SeedProd. Ouvrez le modèle de votre page de boutique dans SeedProd, puis faites glisser un bloc Carrousel d'images au-dessus de la grille de produits pour créer une bannière défilante. Pour une section de produits mis en avant, ajoutez une nouvelle section et déposez-y le bloc Produits les plus vendus ou Produits en vedette. Vous pouvez styliser chaque section indépendamment avec des arrière-plans, des couleurs et une typographie personnalisés.
Quelle est la différence entre la page boutique WooCommerce et les pages produits ?
La page boutique (également appelée archive produits) est une page de liste qui affiche tous vos produits sous forme de grille. Les pages produits sont des pages individuelles pour chaque article, montrant des descriptions détaillées, des images, le prix et le bouton Ajouter au panier. Les clients arrivent généralement d'abord sur la page boutique, parcourent, puis cliquent sur les pages produits individuelles. Les deux peuvent être personnalisées avec SeedProd.
Puis-je personnaliser chaque page de catégorie de produit WooCommerce différemment ?
Oui. Les blocs dynamiques comme le titre d'archive et les produits d'archive s'adaptent automatiquement à chaque catégorie, de sorte que chaque page affiche son propre en-tête et ses propres produits. Pour des différences plus importantes, telles qu'une bannière unique pour une catégorie, vous pouvez utiliser les conditions d'affichage de SeedProd pour contrôler quels modèles s'appliquent où.
Les pages de catégories personnalisées WooCommerce aident-elles au référencement ?
Elles peuvent aider. Les pages de catégories ciblent des mots-clés d'achat plus généraux que les produits uniques, et la plupart des boutiques les laissent presque vides, donc un petit effort porte ses fruits. Ajoutez une courte description de catégorie riche en mots-clés, un titre clair et des images de qualité. Un plugin SEO comme AIOSEO peut également définir un titre SEO personnalisé et une méta-description pour chaque page de catégorie.
Puis-je inclure des mots-clés dans le titre de ma page boutique WooCommerce ?
Oui, et cela peut aider votre SEO. Les moteurs de recherche utilisent le titre pour comprendre ce que votre boutique vend, donc un titre comme « Bijoux faits main » est plus efficace qu'un simple « Boutique ». Restez naturel, cependant. Écrivez d'abord le titre pour vos clients, et assurez-vous qu'il représente clairement ce que vous vendez.
Pourquoi l'ancien titre de ma page de boutique s'affiche-t-il toujours dans les résultats de recherche ?
Les moteurs de recherche ne mettent pas à jour leur index au moment où vous changez un titre. Il peut falloir des jours, voire des semaines, pour que le nouveau titre de la page de la boutique apparaisse dans les résultats. Pour accélérer les choses, demandez une nouvelle exploration de la page dans la Google Search Console, puis laissez à Google le temps de rattraper son retard.
Comment changer l'image par défaut d'un produit dans WooCommerce ?
L'image de produit par défaut est l'image mise en avant du produit. Pour la modifier, modifiez le produit, cliquez sur la photo actuelle dans le panneau « Image du produit » et choisissez-en une nouvelle dans la médiathèque. Cette image apparaît dans la grille de votre page de boutique et comme première image de votre galerie de produits.
Puis-je ajouter une galerie d'images de produits dans WooCommerce sans plugin ?
Oui. Le panneau « Galerie de produits » dans l'éditeur de produit est intégré à WooCommerce, et la plupart des thèmes affichent les images supplémentaires avec des miniatures. Le comportement du zoom, de la lightbox et du curseur dépend de votre thème. Un outil comme SeedProd vous donne le contrôle sur ceux-ci sans code.
Vous n'avez pas besoin d'un développeur ni d'écrire une seule ligne de code pour personnaliser votre page de boutique WooCommerce.
SeedProd gère la refonte complète de vos pages de boutique et de catégorie, l'éditeur WordPress couvre les ajustements d'affichage rapides, et renommer ou masquer le titre de la boutique prend quelques clics.
Vous pouvez commencer à personnaliser votre page de boutique dès maintenant.
Vous pourriez également aimer ce guide sur comment configurer le suivi des conversions WooCommerce pendant que vous y êtes. Ou celui-ci sur comment créer une page de panier WooCommerce personnalisée.
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.
