Comment personnaliser les pages de produits de WooCommerce (méthode sans code).

Vous souhaitez personnaliser vos pages de produits WooCommerce pour obtenir plus de ventes ?

Une page produit bien conçue est essentielle pour capter l’attention des clients/clientes potentiels. Plus la page produit est attrayante et informative, plus il est facile pour le client/cliente de prendre une décision d’achat.

Dans cet article, nous allons vous afficher comment personnaliser les pages produits de WooCommerce sans écrire de code.

Pourquoi personnaliser les pages produits de WooCommerce dans WordPress ?

Par défaut, WooCommerce créera des pages de produits dans votre magasin en ligne au cours de l’assistant de configuration. Malheureusement, ces pages ne sont pas les plus belles ni les plus optimisées pour les conversions.

En optimisant vos pages produits, vous pouvez aider les internautes à décider si le produit leur convient et éventuellement convertir plus de visiteurs en acheteurs. C’est l’un des moyens les plus simples d’augmenter votre chiffre d’affaires sans générer plus de trafic vers votre stock.

Sur ce, voyons comment vous pouvez personnaliser vos pages de produits WooCommerce sans aucun code. Vous pouvez utiliser ces liens rapides pour naviguer dans ce guide :

Tutoriel vidéo

Si vous préférez les instructions écrites, continuez à lire.

Étape 1 : Installer et activer l’extension SeedProd

La façon la plus simple de créer une page produit WooCommerce personnalisée est d’utiliser SeedProd.

SeedProd est le meilleur constructeur de pages WordPress par glisser-déposer et est livré avec plus de 300 modèles conçus par des professionnels.

Mieux encore, vous pouvez utiliser le constructeur de thème avancé de SeedProd pour créer un thème WordPress personnalisé sans écrire une seule ligne de code.

Vous pouvez utiliser ce constructeur de thème par glisser-déposer pour personnaliser chaque partie de votre boutique en ligne, y compris vos pages de produits.

SeedProd dispose même de modèles WooCommerce prêts à l’emploi et de blocs e-commerce qui vous permettent de créer une boutique en ligne à fort taux de conversion, rapidement.

Sachez simplement que cette méthode remplacera votre thème WooCommerce actuel.

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

Une fois activé, allez dans SeedProd  » Réglages et saisissez votre clé de licence.

Vous trouverez ces informations dans votre compte sur le site de SeedProd. Après avoir saisi/saisie la clé de licence, cliquez sur le bouton ‘Verify Key’.

Étape par étape : Choisissez un Kit de Modèle WooCommerce

Ceci étant fait, il est temps de choisir le kit de modèle WooCommerce que vous utiliserez pour votre stocker en ligne. Il suffit de se rendre sur SeedProd  » Theme Constructeur et de cliquer sur le bouton  » Theme Modèle Kits « .

Puisque nous créons un thème WooCommerce personnalisé, cliquez sur l’onglet  » WooCommerce  » pour voir tous les différents kits d’e-commerce.

Pour prévisualiser un dessin ou modèle, il suffit de le survoler avec la souris, puis de cliquer sur la loupe.

Cela ouvre le kit de modèle dans un nouvel onglet.

Il s’agit d’une Prévisualisation directe, vous pouvez donc voir d’autres modèles du kit en cliquant sur les liens, les menus de navigation, les boutons et d’autres contenus interactifs.

Puisque vous créez une page produit WooCommerce personnalisée, assurez-vous de vérifier la conception de la page produit. Voyez s’il peut constituer une bonne base que vous pourrez personnaliser ultérieurement.

Lorsque vous trouvez un kit de modèles que vous souhaitez utiliser, survolez-le, puis cliquez sur la coche lorsqu’elle apparaît. Dans ce guide, nous utilisons le  » starter theme  » de WooCommerce, mais vous pouvez utiliser le modèle de votre choix.

SeedProd importera l’ensemble du kit dans votre site WordPress, afin que vous puissiez l’utiliser pour créer une archive de produits personnalisée, une page de boutique, un index de blog, et bien plus encore.

Pour voir tous ces modèles, rendez-vous sur SeedProd  » Theme Constructeur.

Étape 3 : personnaliser le Modèle de page produit de WooCommerce.

Après avoir installé votre Modèle, vous êtes prêt à commencer à personnaliser la page produit.

Pour Premiers pas, survolez le Modèle de page produit, puis cliquez sur le lien  » Modifier la conception  » lorsqu’il apparaît.

Cela ouvrira le modèle dans l’éditeur par glisser-déposer de SeedProd, avec une Prévisualisation de votre modèle WooCommerce à droite et quelques réglages de blocs à gauche.

SeedProd affichera un exemple de l’aspect de la page produit en utilisant le contenu de l’un de vos produits WooCommerce.

Tous les modèles WooCommerce sont livrés avec des blocs intégrés, qui sont un élément cœur de tous les modèles de SeedProd.

Pour personnaliser un bloc, il suffit de cliquer pour le sélectionner dans la Prévisualisation de la page, puis d’effectuer les modifications dans le menu de gauche.

Version, le modèle est livré avec un bloc intégré de produits en vedette que vous pouvez personnaliser de quelques manières différentes.

Pour commencer, vous pouvez modifier la taille et l’alignement du bloc à l’aide des Réglages du menu de gauche.

Vous trouverez d’autres réglages dans l’onglet « Avancé ». Vous pouvez y faire ressortir l’image en lui ajoutant une bordure ou une ombre, une animation CSS, etc.

Au fur et à mesure que vous apportez des modifications, la Prévisualisation directe se met à jour automatiquement, ce qui vous permet d’essayer différents Réglages pour voir ce qui se présente le mieux sur votre stock en ligne.

Le modèle WooCommerce dispose également d’un bouton d’appel à l’action Ajouter au panier. Cela permet aux acheteurs d’acheter vos produits, donc vous voudrez faire ressortir le bouton.

Premiers pas, vous pouvez remplacer le bouton « Ajouter au panier » par votre propre message personnalisé, tel que  » Achetez maintenant » ou « Obtenez-le aujourd’hui ». Pour effectuer cette modification, il vous suffit de sélectionner le bouton Ajouter au panier et de saisir le nouveau texte dans le champ « Texte du bouton ».

Vous pouvez également ajouter une police d’icônes au bouton pour aider les internautes à comprendre d’un coup d’œil ce que fait ce bouton.

SeedProd est livré avec une bibliothèque intégrée de plus de 1400 icônes Font Awesome que vous pouvez utiliser sur vos pages de produits. Dans le menu de gauche, cliquez pour déplier la section  » Icônes « .

Vous pouvez maintenant choisir d’afficher l’icône avant ou après le texte du bouton.

Il vous suffit de prendre votre décision et de cliquer sur le bouton « Choisissez une icône ».

Vous verrez maintenant toutes les différentes icônes Font Awesome que vous pouvez utiliser. Lorsque vous trouvez une icône qui vous plaît, cliquez dessus.

Lorsque vous êtes satisfait du message du bouton, vous pouvez en modifier l’aspect en cliquant sur l’onglet « Modèles ». Vous trouverez ici différents modèles de boutons que vous pouvez utiliser.

Pour utiliser l’un de ces modèles, il suffit de cliquer sur celui que vous souhaitez.

Après avoir choisi un modèle, vous pouvez affiner l’apparence du bouton en cliquant sur l’onglet « Avancé ». Vous pouvez modifier l’espacement entre le bouton et la case de quantité, augmenter le rayon de la bordure pour créer des coins incurvés, etc.

Une autre option consiste à ouvrir le menu déroulant « Style de bouton » et à choisir un nouveau style dans la liste.

La plupart des réglages sont explicites, il est donc utile de les passer en revue pour découvrir les différents types d’effets que vous pouvez créer.

Une autre section importante est le bloc des onglets de données sur les produits. Il affiche aux acheteurs des informations détaillées, telles que les identifiants, les attributs et les catégories des produits.

Cela étant, il est intéressant de cliquer pour sélectionner le bloc, puis de voir les modifications que vous pouvez apporter dans le menu de gauche. Par exemple, vous pouvez modifier la couleur de l’arrière-plan, la couleur du texte, augmenter la marge interne, etc.

Pour retirer l’un des blocs par défaut, il suffit de survoler ce bloc avec la souris.

Cliquez ensuite sur l’icône de la corbeille lorsqu’elle apparaît.

Vous pouvez également déplacer les blocs dans la page en utilisant la fonction « glisser-déposer » de l’éditeur.

Étape 4 : Optimiser votre page de produit WooCommerce personnalisée

Les blocs intégrés du Modèle sont un excellent début, mais pour vous assurer d’obtenir les meilleurs résultats sur vos pages produits, vous devez les optimiser.

SeedProd a beaucoup de blocs WooCommerce que vous pouvez utiliser pour créer une place de marché ou un magasin en ligne à fort taux de conversion. Pour vous aider, voici quelques blocs que vous pourriez vouloir ajouter à votre page produit WooCommerce.

Afficher les produits WooCommerce similaires

Vous pourrez peut-être augmenter vos ventes et le montant moyen des commandes en affichant des articles similaires sur vos pages de produits. Il peut s’agir de produits que les clients achètent fréquemment ensemble ou d’articles qui se complètent.

Par exemple, si un client/cliente achète un ordinateur portable, il peut également être intéressé par une sacoche pour ordinateur portable.

SeedProd est livré avec un bloc de produits similaires prêt à l’emploi. Cependant, pour tirer le meilleur parti de ce bloc, vous devrez configurer des produits liés dans l’extension WooCommerce, comme vous pouvez le voir dans l’image suivante.

Pour des instructions étape par étape sur la façon d’ajouter des produits liés, Veuillez consulter notre guide sur la façon de faire des ventes incitatives dans WooCommerce.

Une fois cela fait, il suffit de trouver le bloc Produits similaires dans l’éditeur SeedProd et de le faire glisser sur votre mise en page.

Par défaut, le bloc affiche un produit lié à un autre dans une seule colonne.

Vous pouvez afficher davantage de produits en saisissant de nouveaux chiffres dans les champs « Colonnes » et « Publications par page » ou en cliquant sur les boutons fléchés.

Si vous affichez plusieurs produits, vous pouvez modifier la façon dont ces articles sont classés à l’aide de la case « Commander par ». Par exemple, vous pouvez afficher en premier les produits les mieux évalués, car les clients/clientes semblent les apprécier le plus.

Vous pouvez également ouvrir le menu déroulant « Ordre » et choisir d’afficher les articles similaires dans l’ordre croissant (ASC) ou décroissant (DESC).

Ajouter une évaluation par étoiles

Afficher une évaluation étoiles par produit peut aider à rassurer les acheteurs sur la qualité de vos articles. Pour ce faire, vous pouvez faire glisser le bloc Évaluation par étoiles sur votre modèle.

Pour obtenir les meilleurs résultats, nous recommandons d’afficher l’évaluation par étoiles en haut de l’écran, là où les clients/clientes peuvent facilement la repérer. Cela peut aider les acheteurs à prendre des décisions d’achat plus rapidement puisqu’ils peuvent immédiatement voir si d’autres acheteurs recommandent un produit.

Utiliser le FOMO en affichant le stock de produits

LeFOMO, ou « peur de manquer », incite les acheteurs à passer à l’action dès maintenant.

Si vous vendez des modifications en édition limitée ou si vous avez régulièrement un petit stock, vous pouvez afficher le nombre de produits restants. Cela peut convaincre les acheteurs d’acheter maintenant plutôt que d’attendre et de risquer que le produit soit épuisé.

Pour afficher ces informations, faites glisser le bloc Stock de produits sur votre dessin ou modèle.

Par défaut, le bloc affiche le nombre d’articles restants, suivi de la mention « en stock ». Vous pouvez ajouter votre propre message à ce texte par défaut.

Pour ce faire, il suffit de taper dans le petit éditeur/éditrices de texte dans le menu de gauche. Si vous ajoutez du texte, veillez à ne pas modifier l’identifiant ‘[sp_product_stock]’, qui autorise SeedProd à afficher le nombre total d’articles restants.

Remplacer l’image mise en avant par un produit

Une image mise en avant d’un produit permet aux acheteurs de voir ce qu’ils achètent dans un magasin en ligne.

Cependant, il peut arriver que vous souhaitiez remplacer une image mise en avant par une galerie de produits. Par exemple, vous pouvez afficher le même produit sous différents angles. Certains magasins utilisent même des images interactives à 360 degrés pour que les acheteurs puissent explorer un produit plus en détail.

Si vous avez ajouté une galerie à vos produits WooCommerce, il est alors logique de remplacer le bloc par défaut Product Featured Image mise en avant par un bloc de galerie.

Pour ce faire, il suffit de survoler le bloc Produit en vedette, puis de cliquer sur l’icône de la corbeille lorsqu’elle apparaît.

Vous pouvez ensuite trouver le bloc Image de la galerie de produits dans le menu de gauche et le faire glisser sur votre page.

Nous recommandons d’ajouter ce bloc vers le haut de la page afin que les internautes puissent voir immédiatement ce qu’ils achètent.

Les acheteurs peuvent zoomer sur l’image en survolant la galerie de produits avec leur souris.

Par défaut, l’icône de zoom apparaît dans le coin supérieur droit de l’image mise en avant, mais vous pouvez la modifier à l’aide des diapositives « Position en haut » et « Position à droite ».

Vous pouvez également agrandir ou réduire l’icône de la loupe à l’aide du Diaporama « Taille de la police » ou modifier la couleur de l’icône et de l’arrière-plan.

Il est également possible d’ajouter des bordures autour des différentes images en utilisant les réglages « Bordure de l’image » et « Miniatures ».

Créer un buzz sur les réseaux sociaux avec les boutons de partage

Si un acheteur partage votre produit sur les réseaux sociaux, alors cela peut conduire plus de gens à votre magasin en ligne. Dans cette optique, il est judicieux d’ajouter des boutons de partage social à vos pages de produits.

SeedProd dispose d’un bloc de partage social qui supporte Facebook, Twitter, LinkedIn et Pinterest. Il suffit de faire glisser ce bloc sur votre page et il ajoutera automatiquement les boutons de partage Facebook et Twitter.

Pour ajouter de nouveaux réseaux sociaux, il suffit de cliquer sur le bouton « Ajouter un nouveau partage ».

Vous pouvez ensuite choisir un site de réseau social dans le menu déroulant.

Après avoir ajouté tous les réseaux que vous souhaitez utiliser, vous pouvez modifier la taille des boutons de partage à l’aide du menu déroulant « Taille ».

Des boutons de partage social plus gros ressortiront davantage, même s’ils risquent de détourner l’attention des autres contenus de la page, notamment l’appel à l’action Ajouter au panier.

Afficher les témoignages de clients/clientes et les Avis d’entreprises

Outil de personnalisation permet aux clients d’émettre des avis sur vos produits individuels, mais vous pouvez également afficher des témoignages de clients/clientes. Il peut s’agir de citations tirées de vos meilleurs Avis, de commentaires sur votre excellent service client, ou de tout autre contenu que vous souhaitez mettre en avant.

Le bloc Montant de SeedProd vous permet de créer des témoignages rotatifs, ce qui est un excellent moyen d’afficher beaucoup d’informations dans un espace réduit.

En savoir plus, veuillez consulter notre guide sur l’ajout de témoignages tournants dans WordPress.

Mettre en évidence les produits récemment vus dans WooCommerce.

Une section « Vues récemment » encourage les clients/clientes à revenir sur les produits qu’ils ont vus récemment mais qu’ils n’ont pas ajoutés à leur panier. Cela aide les clients/clientes à comparer les produits et à trouver l’article qui leur convient.

Cela leur donne également la possibilité de changer d’avis et d’acheter un produit qu’ils ont récemment visité mais qu’ils n’ont pas ajouté à leur panier.

Ceci étant dit, vous pouvez ajouter le bloc Produits récents de SeedProd à votre design.

Après avoir ajouté le bloc, vous pouvez modifier le nombre de colonnes à l’aide des Réglages du menu de gauche.

Si vous souhaitez afficher un grand nombre de produits différents, vous pouvez ajouter une pagination en activant le permutateur « Pagination ».

Si vous activez la fonction « Pagination », vous aurez accès à des réglages supplémentaires.

Pour commencer, vous pouvez afficher le nombre total de résultats en haut du bloc Produits récents en activant la permutation « Afficher le nombre d’articles ».

Vous pouvez également activer le Diaporama « Afficher commander par », qui permet aux internautes de trier les produits récents.

Comme vous pouvez le voir dans l’image suivante, cela ajoute un menu déroulant « Tri par défaut » à la zone.

Affichez vos produits WooCommerce les plus populaires

Vous pouvez afficher les produits les plus vendus ou les mieux évalués sur vos pages produits. Comme ces articles sont déjà performants, les afficher à un plus grand nombre de personnes peut être un moyen facile d’obtenir plus de ventes.

Une autre option consiste à afficher les produits en cours de vente. Cela peut inciter les acheteurs à se procurer ces articles dès maintenant afin de commander la meilleure offre.

SeedProd a quelques blocs qui peuvent récupérer ces produits automatiquement. Si vous souhaitez afficher vos produits les plus vendus, ajoutez le bloc Best Selling Products à votre design.

En savoir plus, Veuillez consulter notre guide sur l ‘affichage des produits populaires sur les pages produits de WooCommerce.

Si vous souhaitez afficher les produits dont l’évaluation étoiles est la plus élevée, vous pouvez faire glisser le bloc Produits les mieux notés sur la page.

Enfin, un bloc « Produits en vente » affiche tous les articles actuellement en vente.

Aucun des blocs que vous ajoutez ne doit être sélectionné en cliquant dessus, puis en examinant les Réglages dans le menu de gauche. Tous ces réglages sont simples, il est donc utile de les passer en revue pour voir les différents effets que vous pouvez créer.

Étape 5 : Publier votre page produit WooCommerce personnalisée

Lorsque vous êtes satisfait de l’aspect de la page produit, il est temps d’enregistrer vos modifications. Il vous suffit de cliquer sur la flèche déroulante située à côté de « Enregistrer », puis de sélectionner l’option « Publier ».

La page de produit personnalisée n’apparaîtra pas sur votre boutique en ligne tant que vous n’aurez pas activé l’ensemble du thème WooCommerce personnalisé. Cela vous donne l’occasion de regarder les autres conceptions dans votre kit de thème, puis d’apporter des modifications à l’aide du constructeur par glisser-déposer de SeedProd.

Par exemple, vous voudrez généralement modifier les modèles d’en-tête et de pied de page pour mettre en avant vos propres menus de navigation, le logo personnalisé de votre magasin et d’autres contenus. Pour vous inspirer, veuillez consulter notre liste de contrôle des éléments à ajouter au pied de page de votre site WordPress.

Pour modifier n’importe quel autre modèle, allez dans SeedProd  » Theme Constructeur. Ensuite, survolez le modèle que vous souhaitez personnaliser.

Vous pouvez ensuite cliquer sur le lien « Modifier le dessin ou modèle » lorsqu’il apparaît.

Il ne vous reste plus qu’à modifier le design en ajoutant d’autres blocs, puis en les personnalisant à l’aide des réglages du menu de gauche.

Répétez ces étapes jusqu’à ce que vous soyez satisfait de la façon dont tous les modèles sont configurés.

Lorsque vous êtes prêt à rendre le thème WooCommerce personnalisé en direct, allez à SeedProd  » Constructeur de thème. Vous pouvez alors cliquer sur le permuter  » Enable SeedProd Theme  » pour qu’il affiche  » Yes « .

Maintenant, si vous visitez votre boutique en ligne, vous verrez la page de produit WooCommerce personnalisée en direct.

Astuce bonus : Ajouter des notifications de vente en direct pour encourager les achats

Outre l’optimisation de vos pages produits, les notifications de vente en temps réel constituent un autre moyen d’augmenter les ventes. Il s’agit de petits messages qui s’affichent pour indiquer qu’un client/cliente a acheté un produit spécifique lorsque vous êtes sur un site.

Grâce à ces notifications, les utilisateurs/utilisatrices peuvent voir que des personnes réelles achètent un produit chez vous. Ces clients/clientes potentiels peuvent ainsi se sentir plus en confiance pour commander, ce qui est important lorsque vous dirigez une petite entreprise.

Si vous souhaitez ajouter des notifications de vente en direct à votre stock, vous pouvez utiliser TrustPulse. Cette extension est la meilleure option pour ajouter des notifications de preuve sociale en temps réel sur votre site.

Vous pouvez en savoir plus sur TrustPulse dans notre Avis complet sur TrustPulse. Si vous voulez plus de recommandations de plugins de preuve sociale, consultez notre liste des meilleurs plugins de preuve sociale pour WordPress et WooCommerce.

Nous espérons que cet article vous a aidé à personnaliser vos pages de produits WooCommerce sans codage. Vous pouvez également consulter notre guide sur la création d’une fenêtre surgissante WooCommerce pour augmenter les ventes ou notre choix d’experts des meilleures extensions WooCommerce pour votre stocker.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.