Comment personnaliser facilement votre page de boutique WooCommerce 

Lorsque j'ai configuré pour la première fois une boutique WooCommerce, j'étais impatient de commencer à vendre, mais j'ai vite réalisé que la page de boutique par défaut semblait fade et ne correspondait pas du tout à ma marque.

Si vous êtes dans la même situation, ne vous inquiétez pas. WooCommerce est le moyen le plus populaire d'ajouter des fonctionnalités e-commerce à WordPress, et il existe des moyens simples de faire ressortir la mise en page de votre boutique WooCommerce sans écrire une seule ligne de code.

Vous pouvez personnaliser votre page de boutique WooCommerce à l'aide d'un constructeur par glisser-déposer comme SeedProd (aucun code requis) ou de l'Éditeur WordPress intégré. Les deux méthodes prennent moins de 30 minutes et ne nécessitent pas de développeur.

Ce sont les méthodes exactes que j'ai utilisées pour transformer ma page de boutique par défaut en quelque chose de plus épuré, plus attrayant et beaucoup plus efficace pour convertir les visiteurs en acheteurs.

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 magasin. 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)

Elle est générée dynamiquement à l'aide de votre thème WordPress et des fichiers modèles WooCommerce, et elle peut être personnalisée pour correspondre à votre marque et améliorer les conversions.

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 des étagères. Pas d'enseignes, pas de catégories, pas d'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
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

Nous utiliserons SeedProd pour créer une boutique WooCommerce personnalisée pour la première méthode.

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.

Lors des tests de performance, 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 page de paiement, 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.

Note : SeedProd propose une version gratuite pour créer des pages de destination simples. Cependant, nous utiliserons le plan Elite de SeedProd pour les fonctionnalités WooCommerce dont nous avons besoin.

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é

Nous utiliserons la fonctionnalité de constructeur de thèmes de SeedProd pour personnaliser votre page de boutique WooCommerce. Elle remplacera votre thème WordPress existant par vos personnalisations.

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 :

1. Créer chaque partie (modèle) de votre thème individuellement
2. 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 facilement changer le titre de votre page boutique WooCommerce.

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 ».

De plus, vous pouvez afficher 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.

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.

J'espère que cet article vous a aidé à apprendre comment personnaliser votre page boutique WooCommerce.

SeedProd vous donne un contrôle total sur la mise en page de votre boutique WooCommerce sans toucher une ligne de code. Le constructeur par glisser-déposer le rend simple, même si vous n'avez jamais personnalisé de boutique WooCommerce auparavant.

Prêt à augmenter vos ventes WooCommerce ?

Vous pourriez également aimer ce guide sur comment configurer le suivi des conversions WooCommerce pendant que vous y êtes. Ou celui-ci sur les meilleurs plugins d'affiliation 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.