Comment modifier votre page de boutique WooCommerce (Tutoriel 2025)

Êtes-vous inexpérimenté dans l’organisation de votre boutique WooCommerce ? Si oui, vous souhaiterez probablement vous assurer que la page de la boutique correspond à l’esthétique globale de votre marque. La page de boutique WooCommerce par défaut peut ne pas correspondre à l’apparence dont vous avez besoin pour créer une expérience client cohérente. Cet article vous guidera à travers les étapes essentielles pour modifier et personnaliser rapidement la page de votre boutique WooCommerce. Vous apprendrez quelles sont les étapes à suivre, y compris les aborder avec la bonne pile d'outils.

Qu'est-ce qu'une page de boutique WooCommerce ?

La page de la boutique WooCommerce est la page par défaut d'un site Web WordPress alimenté par WooCommerce qui affiche tous les produits disponibles à la vente. Il sert de vitrine pour une boutique en ligne, présentant les produits sous forme de grille ou de liste, ainsi que des détails essentiels tels que les prix, les images, les descriptions et les options d'achat.

Par défaut, cette page extrait automatiquement les produits du catalogue de produits WooCommerce et les organise en fonction des paramètres (tels que les catégories ou les balises). Il peut être personnalisé davantage via des thèmes, des plugins et un codage personnalisé pour modifier sa présentation, son style et ses fonctionnalités en fonction des besoins spécifiques de la boutique en ligne.

Pourquoi personnaliser votre page de boutique WooCommerce ?

La personnalisation de la page de votre boutique WooCommerce offre plusieurs avantages qui peuvent avoir un impact significatif sur les performances et l'expérience utilisateur de votre boutique. Voici quelques-uns des principaux avantages :

• Expérience utilisateur améliorée : une page de boutique bien personnalisée offre aux clients une expérience d'achat plus intuitive et transparente. L'organisation des catégories de produits, l'ajout de filtres et l'amélioration de la navigation permettent aux acheteurs de trouver plus facilement ce qu'ils veulent.
• Cohérence de la marque : la personnalisation vous permet d'aligner la page de votre boutique sur l'identité unique de votre marque. Vous pouvez adapter la mise en page, les polices, les couleurs et la conception globale en fonction de votre image de marque, créant ainsi une apparence cohérente et professionnelle sur l'ensemble de votre site Web.
• Taux de conversion accrus : en optimisant la présentation et les fonctionnalités de la page de votre boutique, vous pouvez guider plus efficacement les visiteurs tout au long du parcours d'achat. Vous pouvez ajouter des fonctionnalités telles que des boutons d'appel à l'action, des offres à durée limitée ou des recommandations de produits personnalisées qui encouragent les clients à finaliser leurs achats.
• Meilleure présentation des produits : la personnalisation de la page de votre boutique WooCommerce vous permet d'afficher vos produits de la manière qui met le mieux en valeur leurs fonctionnalités. Vous pouvez choisir des mises en page uniques, ajouter des images de haute qualité et inclure des présentations de produits dynamiques telles que des curseurs ou des grilles.

La personnalisation peut aider à créer un magasin plus efficace, visuellement attrayant et convivial. Cependant, il est important d'avoir un plan pour votre page de boutique WooCommerce.

Méthodes de personnalisation d'une page de boutique WooCommerce

Avant de présenter Divi comme solution, explorons les méthodes courantes que de nombreux propriétaires de magasins utilisent pour personnaliser les pages de la boutique WooCommerce :

Pré-requis : configurer WooCommerce et les produits

Il est important d'avoir configuré WooCommerce sur WordPress avant de créer votre page de boutique WooCommerce. Consultez notre guide des paramètres WooCommerce, qui fournit des instructions étape par étape pour configurer chaque page essentielle.

Une fois la configuration terminée, nous ajouterons les produits à notre page boutique et leur attribuerons des catégories. Vous pouvez ajouter des produits un par un ou en masse à l'aide d'un fichier CSV. Dans notre cas, nous avons ajouté quatre produits de démonstration de types différents (simples, groupés, externes/affiliés et variables). Pour les ajouter individuellement, accédez à Produits > Ajouter un nouveau .

Dans notre cas, nous avons ajouté 12 produits à notre boutique en ligne, mais vous pouvez en ajouter autant que possible. Voici comment faire la liste de nos produits d'achat avant de commencer notre processus de personnalisation.

Gérez votre stock de produits avec les fonctionnalités d'inventaire de WooCommerce et consultez notre guide complet sur la configuration de l'expédition dans WooCommerce.

1. Méthode 1 : utiliser l'éditeur de blocs et les blocs WooCommerce

Avec l'introduction de l'éditeur de blocs WordPress, la personnalisation des pages de la boutique WooCommerce est devenue plus accessible, en particulier pour les utilisateurs qui ne sont pas familiers avec le codage. Les blocs WooCommerce vous permettent d'ajouter, d'organiser et de personnaliser divers éléments de votre page de boutique directement dans l'éditeur. À l'aide de blocs, vous pouvez ajouter des grilles de produits, des boutons, des informations sur les produits, des images et même du contenu personnalisé.

Accédez à Pages > Toutes les pages et localisez la page de votre boutique WooCommerce dans le tableau de bord WordPress. Si aucune page de boutique n'a été créée, WooCommerce en attribue une automatiquement lorsque vous configurez le plugin. Cliquez sur Modifier pour ouvrir la page de la boutique dans l'éditeur de blocs.

Une fois que vous êtes dans l'éditeur, vous pouvez ajouter des blocs spécifiques à WooCommerce à la mise en page de votre boutique. Pour afficher une grille de tous les produits, cliquez sur l'icône + pour ajouter un bloc, recherchez « Produits » et sélectionnez le bloc Tous les produits. Ce bloc affichera automatiquement tous les produits de votre boutique WooCommerce.

Vous pouvez personnaliser l'apparence et les fonctionnalités du bloc en ajustant le nombre de produits par ligne et par page. De plus, vous pouvez trier les produits par popularité, note ou date d'ajout.

Si vous souhaitez mettre en avant un produit spécifique, vous pouvez utiliser le bloc Produit vedette. Après avoir ajouté le bloc, recherchez le produit que vous souhaitez présenter par son nom. Il s'affichera ensuite avec l'image du produit, le prix et le bouton « Ajouter au panier ». Ceci est utile pour attirer l’attention sur des promotions spéciales ou des articles à marge élevée.

2. Méthode 2 : WooCommerce Builder comme Divi

Les constructeurs WooCommerce permettent à chacun de créer facilement une page de boutique personnalisée. Par exemple, Divi dispose d'une vaste bibliothèque de modules spécialement conçus pour WooCommerce. Ces modules vous permettent de tout personnaliser, des grilles de produits aux présentations de catégories.

L'éditeur visuel en temps réel de Divi vous donne un contrôle total sur chaque aspect de la conception, ce qui facilite la prévisualisation des modifications pendant que vous travaillez. Ce niveau de personnalisation vous permet de créer une expérience d'achat véritablement unique sans avoir besoin de compétences avancées en codage. Une autre caractéristique remarquable de Divi réside dans ses options de conception réactive. Il vous permet de personnaliser indépendamment les versions mobile, tablette et ordinateur de votre page de boutique, garantissant une expérience cohérente et conviviale sur tous les appareils.

Divi possède également des outils puissants qui rendent votre travail efficace. Divi Quick Sites donne accès à une collection de sites de démarrage WooCommerce prédéfinis, vous permettant de créer une boutique en ligne à part entière en quelques minutes seulement. D'autre part, Divi AI vous assiste dans la création de mises en page personnalisées adaptées à vos spécifications. Vous pouvez saisir les exigences de votre page de boutique et Divi AI générera une mise en page personnalisée qui correspond à votre vision.

Commencez avec Divi

Comment personnaliser votre page de boutique WooCommerce avec Divi

Nous nous concentrons sur la création et la personnalisation d’une page de boutique WooCommerce à part entière. Cependant, si vous êtes débutant et que vous avez du mal à comprendre la dynamique de WooCommerce, vous devriez consulter notre guide pour créer une boutique en ligne.

Pré-requis : Installer et activer Divi

Pour démarrer le didacticiel, vous devez avant tout vous assurer que Divi est installé et activé sur votre boutique WooCommerce.

Divi est disponible chez Elegant Themes avec une licence annuelle au prix de 89 $ ou une licence à vie pour 249 $ . Une fois que vous avez acheté le thème, téléchargez-le et installez-le sur votre site WordPress en suivant ces étapes :

1. Accédez à Apparence > Thèmes .
2. Cliquez sur Ajouter nouveau , puis sélectionnez Télécharger le thème .
3. Cliquez sur le fichier Divi.zip que vous avez téléchargé initialement et cliquez sur Installer maintenant .
4. Après l’installation, cliquez sur Activer pour faire de Divi votre thème actif.

Regardez la vidéo ci-dessous pour plus de détails.

Commencez avec Divi

Une fois la configuration terminée, vous êtes prêt à commencer la construction. Si vous souhaitez en savoir plus avant de vous lancer, jetez un œil à notre tutoriel sur l’utilisation du Divi Builder.

1. Créez un modèle de page de boutique

Avec Theme Builder de Divi, vous pouvez créer un modèle personnalisé pour votre page de boutique WooCommerce. Commencez par accéder au Theme Builder depuis le menu Divi, puis ajoutez un nouveau modèle spécifiquement pour la page Boutique.

Une fois le modèle créé, vous verrez des options pour ajouter un en-tête, un corps et un pied de page personnalisés. Si vous souhaitez ajouter le corps personnalisé, cette action ouvre l’interface Divi Builder.

Vous pouvez commencer à concevoir la mise en page de votre page de boutique. Vous aurez la possibilité d'utiliser les modules WooCommerce de Divi pour créer une mise en page unique, incorporant des éléments tels que des grilles de produits, des filtres et des en-têtes personnalisés.

Une fois que vous avez créé la structure de votre page de boutique, vous pouvez appliquer le modèle pour garantir que la conception est cohérente à chaque fois que quelqu'un visite votre boutique.

2. Importez un modèle de page de boutique prédéfini

Divi facilite la création d’une page de boutique WooCommerce entièrement personnalisée sans repartir de zéro. Avec la vaste bibliothèque de mises en page WooCommerce de Divi, vous pouvez rapidement sélectionner un modèle de page de boutique conçu par des professionnels et l'adapter à votre marque. Ces mises en page sont livrées avec tous les éléments essentiels du commerce électronique, vous permettant de créer une page de boutique soignée et professionnelle avec un minimum d'effort.

Divi propose une variété de mises en page spécialement conçues pour les boutiques en ligne et les pages de boutiques, couvrant différents styles et formats. Parcourez les options de mise en page en filtrant les mises en page spécifiques au commerce électronique ou à WooCommerce. Choisissez-en un qui correspond aux préférences esthétiques et structurelles de votre marque.

La bibliothèque de mise en page classe de nombreuses conceptions prédéfinies par type de page, y compris les pages de boutique ou de produits. Parcourez les options disponibles et prévisualisez-les pour voir à quoi elles ressemblent sur votre site.

Après avoir importé la mise en page, vous pouvez personnaliser chaque élément pour vous l'approprier. Remplacez le contenu de l'espace réservé par les images, les descriptions et les éléments de marque de vos produits, tels que les couleurs et les polices.

3. Personnalisez votre page boutique avec les modules WooCommerce de Divi

Les modules WooCommerce de Divi vous permettent d'extraire de manière dynamique des informations sur les produits, des images et des prix de votre boutique WooCommerce et de les afficher dans des mises en page personnalisées. Les options de conception intégrées de Divi vous permettent de modifier chaque élément de votre page de boutique sans toucher à aucun code. Une fois que vous avez utilisé la mise en page prédéfinie, vous pouvez la personnaliser en activant Divi Visual Builder.

Pour afficher les produits WooCommerce, le module Woo Product est le point central. La commande des produits s'effectue par défaut. Cependant, si vous souhaitez apporter d'autres modifications à l'organisation du produit, vous pouvez consulter l'onglet de contenu des paramètres du module. Vous pouvez ajuster le nombre de produits par ligne, modifier la disposition de la grille à la liste et choisir d'afficher les produits en fonction de leurs catégories. Dans notre cas, nous trierons la commande en affichant trois produits par ligne.

Divi vous permet également de masquer ou d'afficher certains éléments au sein de votre module Woo Product. Par exemple, dans notre cas, nous avons décidé de masquer le badge de vente et le prix du produit. Si les clients trouvent le produit souhaité, ils cliqueront sur le produit pour accéder à la page produit et obtenir toutes les informations souhaitées.

En combinaison, nous pouvons nous concentrer sur un produit particulier en utilisant le module Woo Product Tabs.

1. Commencez par ajouter un module de texte pour annoncer la remise spéciale et donner une brève introduction à un produit spécifique ajouté.
2. Ensuite, ajoutez le module Woo Products pour afficher le produit ajouté.
3. Pour offrir des détails, des spécifications et des avis clients plus approfondis, ajoutez le module Woo Product Tabs.
4. Ajoutez un module de boutons sous la description du produit et les onglets pour encourager les achats immédiats avec un appel à l'action (CTA) convaincant.

Autres modules Divi WooCommerce

Voici les autres modules Divi WooCommerce que vous pouvez utiliser pour personnaliser la page de votre boutique WooCommerce :

1. Galerie de produits Woo : affiche une galerie d'images de produits pour des produits individuels.
2. Prix ​​​​du produit Woo : affiche le prix d'un produit individuel.
3. Évaluation du produit Woo : affiche l'évaluation du produit en fonction des avis des clients.
4. Woo Product Description : vous permet de placer la description complète ou courte d'un produit sur n'importe quelle section de votre page.
5. Stock de produits Woo : affiche le niveau de stock d'un produit (disponible ou faible).
6. Woo Breadcrumbs : ajoute un fil d'Ariane pour améliorer la navigation
7. Woo Product Reviews : affiche les avis sur les produits des clients.

Chaque module peut être personnalisé en fonction de vos préférences de conception et de vos besoins fonctionnels, vous donnant un contrôle total sur la présentation et les fonctionnalités de votre boutique en ligne. Pour avoir un aperçu de chacun d’entre eux, parcourez notre documentation.

4. Conseils de personnalisation supplémentaires et cas d'utilisation

Au-delà de la mise en page de base et des WooModules, Divi propose également des fonctionnalités avancées qui permettent des personnalisations encore plus créatives et fonctionnelles. Ces conseils de personnalisation supplémentaires peuvent vous aider à débloquer de nouvelles possibilités pour votre page de boutique WooCommerce, améliorant à la fois son attrait esthétique et son expérience utilisateur.

Ajouter des fonctionnalités de contenu dynamique

Divi vous permet également d'intégrer dynamiquement les données des produits WooCommerce dans divers modules. Par exemple, le module Countdown Timer peut afficher du contenu dynamique n'importe où sur la page de votre boutique. Dans notre cas, nous voulons rendre l’occasion du Black Friday mémorable en proposant un produit WooCommerce à prix réduit. Voici les étapes à suivre pour ce faire :

1. Ajoutez un module Compte à rebours à la mise en page de votre boutique.
2. Apportez-y des ajustements
3. Cliquez sur l'icône Dynamic Content (une icône de base de données) dans les paramètres du module.
4. Sélectionnez les informations sur le produit WooCommerce auxquelles vous souhaitez vous connecter, telles que les liens vers des produits, des projets ou des médias. Dans notre cas, ce sera le lien produit.
5. Sélectionnez le produit WooCommerce

Cette fonctionnalité vous permet d'extraire dynamiquement des informations sur le produit et de les placer n'importe où sur la page de votre boutique, vous donnant un contrôle total sur sa mise en page et son design.

Intégrer l'affichage conditionnel

La fonctionnalité d'affichage conditionnel de Divi vous permet d'afficher ou de masquer certains éléments sur votre page boutique en fonction de conditions spécifiques, telles que le comportement de l'utilisateur ou les attributs du produit. Par exemple, supposons que vous reveniez à la section dédiée à une vente à prix réduits. Dans ce cas, vous pouvez définir une condition selon laquelle il ne sera affiché qu'aux clients connectés à votre site Web. Les paramètres de condition se trouvent dans l’onglet avancé du module, de la ligne ou de la section.

Afficher des témoignages personnalisés à l'aide du module de témoignage

Les témoignages de clients sont un excellent moyen d’instaurer la confiance et d’encourager les acheteurs potentiels à acheter. Le module de témoignage de Divi vous permet d'afficher facilement les commentaires et avis des clients directement sur la page de votre boutique WooCommerce. Après avoir ajouté le module, saisissez le nom du client, le texte de l'avis et d'autres informations pertinentes telles que les produits achetés ou les notes par étoiles.

Il est important que vos témoignages affichés soient conformes au thème de votre page boutique. Pour cela, vous pouvez personnaliser l'affichage de vos modules dans l'onglet design de ses paramètres.

Intégrez les inscriptions par e-mail et la génération de leads

Le marketing par e-mail est l’un des moyens les plus efficaces de fidéliser vos clients et de fidéliser vos clients. Avec Divi, vous pouvez facilement intégrer des inscriptions par e-mail sur votre page de boutique WooCommerce pour capturer des prospects et développer votre liste de diffusion. Le module d'inscription par courrier électronique vous permet d'intégrer facilement des formulaires de génération de leads dans votre page de boutique WooCommerce.

Divi propose également plusieurs mises en page prédéfinies pour les pages de boutique qui intègrent les inscriptions par courrier électronique. Par conséquent, vous pouvez facilement les consulter et apporter les modifications nécessaires pour correspondre à votre image de marque.

Outils supplémentaires pour améliorer les pages de votre boutique

Bien que Divi fournisse une solution complète pour concevoir et personnaliser votre page de boutique WooCommerce, plusieurs outils supplémentaires peuvent vous aider à optimiser les performances et à améliorer l'expérience utilisateur. Ces plugins fonctionnent de manière transparente avec Divi et WooCommerce, offrant des fonctionnalités avancées pour faire passer votre boutique au niveau supérieur. Voici quelques outils hautement recommandés à considérer :

• EWWW Image Optimizer : réduisez la taille des fichiers image sans compromettre la qualité, améliorant ainsi les performances de votre site et l'expérience utilisateur. EWWW compresse automatiquement les images lorsque vous les téléchargez sur votre site.
• RankMath : optimisez vos pages WooCommerce pour une meilleure visibilité sur les moteurs de recherche. L'outil vous aide à optimiser les méta-titres, les descriptions et les mots-clés pour une meilleure visibilité dans les résultats des moteurs de recherche. Il inclut également un balisage de schéma spécifique à WooCommerce, garantissant que vos données produit (telles que les prix, la disponibilité et les avis) sont correctement affichées dans les résultats des moteurs de recherche.
• WP-Rocket : Améliorez la vitesse de chargement de votre boutique WooCommerce en optimisant les facteurs liés aux performances. L'outil optimise votre base de données, nettoie les données inutiles et réduit le temps de chargement de la page de votre boutique.
• WooCommerce Product Table de Barn2 : ce plugin tiers vous permet d'afficher vos produits sous forme de tableau, ce qui est particulièrement utile pour les magasins disposant de grands catalogues de produits ou les magasins B2B où les clients peuvent préférer un aperçu rapide plutôt que de parcourir une grille d'images. .

Pourquoi Divi est-il la meilleure option pour personnaliser les pages de la boutique WooCommerce ?

Divi se distingue comme l'un des meilleurs choix pour personnaliser les pages de la boutique WooCommerce en raison de ses fonctionnalités uniques, de sa flexibilité et de son interface conviviale. Voici cinq raisons clés pour lesquelles Divi est une excellente option :

1. Modules WooCommerce complets

Divi fournit un ensemble robuste de modules WooCommerce qui permettent un contrôle complet sur la conception de votre page de boutique, la rendant hautement personnalisable et polyvalente pour n'importe quelle disposition de magasin. Ces modules sont spécialement conçus pour WooCommerce, comprenant des options telles que des listes de produits, des grilles de catégories, des boutons d'ajout au panier, des affichages de prix et des avis clients.

Il existe plus de 200 modules WooCommerce fournis par Divi que vous pouvez utiliser de manière dynamique sur votre boutique en ligne. Vous pouvez mettre en évidence les fonctionnalités clés du produit, inclure des appels à l'action et ajouter des éléments interactifs attrayants tels que des effets de survol et des filtres dynamiques.

2. Apportez des modifications avec Divi Theme Builder

Contrairement aux constructeurs de pages traditionnels, Divi Theme Builder vous permet de créer des modèles personnalisés qui peuvent être appliqués à l'ensemble du site ou à des pages, catégories et même produits individuels spécifiques. Cette fonctionnalité est particulièrement utile pour WooCommerce, car elle vous permet de concevoir une apparence unifiée sur votre boutique et vos pages produits.

Le Theme Builder offre une flexibilité de conception et de personnalisation, vous permettant d'ajouter des en-têtes, des pieds de page et des barres latérales personnalisés à vos pages WooCommerce. Vous pouvez également utiliser des modules globaux pour effectuer des mises à jour rapides sur plusieurs pages, ce qui est particulièrement utile pour appliquer des éléments de marque tels que des jeux de couleurs, des polices et des logos.

3. Outils marketing intégrés

Divi propose une gamme d'outils marketing intégrés conçus pour aider les propriétaires de magasins WooCommerce à améliorer l'engagement client et à générer des conversions. Une fonctionnalité remarquable est Divi Leads, qui vous permet d'exécuter des tests fractionnés (tests A/B) sur différents éléments ou modules de conception. Cette fonctionnalité vous permet d'expérimenter différentes mises en page, appels à l'action et présentations de produits pour déterminer quelle version est la plus performante.

En plus des tests Divi, Divi propose des outils comme Bloom et Monarch pour soutenir votre stratégie marketing plus large. Bloom est un plugin d'inscription par e-mail qui vous permet de créer des fenêtres contextuelles, des fly-ins et des formulaires en ligne ciblés pour capturer des prospects et développer votre liste de diffusion. Monarch, l'outil de partage social de Divi, ajoute des boutons de réseaux sociaux à la page de votre boutique, permettant aux clients de partager facilement des produits sur des plateformes comme Facebook, Instagram et Twitter.

4. Divi Quick Sites et Divi AI pour créer une page de boutique de marque

Voulez-vous créer une page de boutique WooCommerce en quelques clics ? Divi Quick Sites est là pour vous car il propose une variété de sites de démarrage spécifiques à WooCommerce qui peuvent être importés et personnalisés en quelques clics.

La meilleure chose à propos de l’utilisation de Quick Sites est qu’il installera automatiquement WooCommerce sur votre boutique en ligne. Tout ce que vous avez à faire est de cliquer sur l’option boutique, ce qui permet à cette fonctionnalité de créer des modèles de page pertinents.

Divi AI fait passer la personnalisation à un niveau supérieur en permettant la génération de mises en page alimentées par l'IA et adaptées à vos besoins spécifiques. Il peut créer une mise en page personnalisée qui correspond à votre vision en saisissant des détails tels que les couleurs de votre marque, vos préférences de style et les besoins de la page de boutique.

Obtenez Divi + WooCommerce

Conclusion

La personnalisation de la page de votre boutique WooCommerce est une étape cruciale pour se démarquer dans le paysage concurrentiel du commerce électronique de 2024. Divi est une excellente solution pour utiliser le constructeur visuel et avoir un contrôle total sur la conception. Ces méthodes vous permettent d'affiner la mise en page, d'améliorer la navigation et de mettre en œuvre des fonctionnalités qui génèrent des conversions.

Vous souhaitez créer et personnaliser une boutique WooCommerce bien conçue ? Découvrez Divi et renforcez votre marque. N'hésitez pas à explorer notre sélection de plugins et d'outils qui pourraient être utiles pour la page de votre boutique.

Commencez avec Divi