Per­son­na­li­ser une page produit Woo­Com­merce : comment s’y prendre ?

Une page produit fa­ci­le­ment re­con­nais­sable et originale peut être un facteur décisif lorsqu’il s’agit de générer davantage de ventes ou d’éveiller l’intérêt pour votre boutique en ligne. Étant donné le peu de marge de manœuvre accordé par les fonctions standard de Woo­Com­merce en ce qui concerne la per­son­na­li­sa­tion des pages produit, des plugins tels que Sto­re­Cus­to­mi­zer et des gé­né­ra­teurs de pages tels qu’Elementor, sans parler des fonc­tion­na­li­tés intégrées à WordPress, vous offrent une plus grande flexi­bi­lité en matière de réglage et d’apparence.

Pourquoi modifier sa page produit Woo­Com­merce ?

La réponse à cette question est très simple : vous devez adopter un style qui vous est propre, uni­for­mi­ser l’apparence de votre page produit et sim­pli­fier son uti­li­sa­tion pour rendre votre boutique en ligne fa­ci­le­ment re­con­nais­sable et mettre en avant vos produits de la meilleure façon qui soit. Ce qui est vrai en magasin est également valable pour vous : la pré­sen­ta­tion d’un produit est presque aussi im­por­tante que sa qualité. Cela peut en effet en­cou­ra­ger les visiteurs à vous faire confiance et à acheter plus ra­pi­de­ment.

Si vous utilisez les pages produit standard de Woo­Com­merce, vous devez déjà savoir que vos pos­si­bi­li­tés de per­son­na­li­sa­tion y sont limitées. Si vous souhaitez lancer votre propre boutique en ligne, nous vous con­seil­lons au contraire de ne pas vous sa­tis­faire du minimum. Comme il peut s’avérer compliqué et risqué de per­son­na­li­ser vos pages produit en modifiant leur code source, nous vous re­com­man­dons plutôt de profiter des dif­fé­rents plugins gratuits, ainsi que des fonc­tion­na­li­tés déjà intégrées à WordPress et à Woo­Com­merce.

Per­son­na­li­ser une page produit Woo­Com­merce : les dif­fé­rentes méthodes

Dif­fé­rentes pos­si­bi­li­tés vous per­met­tent de per­son­na­li­ser vos pages produit en fonction de vos besoins :

Avec des plugins (comme Sto­re­Cus­to­mi­zer)

Pour modifier votre boutique en ligne et vos pages produit, les plugins tels que SeedProd, Sto­re­Cus­to­mi­zer ou Woo­Buil­der (qui fonc­tion­nent tous de la même manière qu’un gé­né­ra­teur de pages) cons­ti­tuent la solution la plus simple.

Déjà installé par plus d’un million d’uti­li­sa­tions, SeedProd, qui fait l’objet de mises à jour ré­gu­lières, compte d’ailleurs parmi les gé­né­ra­teurs de pages les plus utilisés. Les prin­ci­pales fonc­tion­na­li­tés con­cer­nant les pages produit ne sont toutefois dis­po­nibles que dans la version « Pro », qui est payante. Avec l’exemple de Sto­re­Cus­to­mi­zer, découvrez avec nous comment modifier gra­tui­te­ment vos pages produit à l’aide d’un plugin fonc­tion­nant sur la base du « glisser-déposer ». Attention : l’ins­tal­la­tion de plugins est im­pos­sible sur la version gratuite de WordPress.

Étape 1 : installez le plugin Sto­re­Cus­to­mi­zer en passant par le site Web du four­nis­seur ou di­rec­te­ment par la page de té­lé­char­ge­ment dédiée aux plugins WordPress. Une fois le plugin installé, activez-le.

Étape 2 : accédez main­te­nant à la page de votre boutique en ligne Woo­Com­merce. Cliquez sur « Design », « Per­son­na­li­ser », « Sto­re­Cus­to­mi­zer » et « Page de la boutique en ligne Woo­Com­merce ». Vous pouvez utiliser dif­fé­rentes fonc­tion­na­li­tés du plugin afin de per­son­na­li­ser votre page. Vous pouvez consulter tous les pa­ra­mètres et toutes les fonctions dis­po­nibles dans la barre de menu se trouvant sur la gauche. Ceux-ci vous per­met­tent notamment de modifier la taille de la police et les couleurs, mais aussi l’apparence et la dis­po­si­tion de vos pages.

Étape 3 : il convient de préciser qu’avec Sto­re­Cus­to­mi­zer, vous avez la pos­si­bi­lité de supprimer des éléments de page préins­tal­lés sur Woo­Com­merce, comme le nom de votre boutique ou encore les résultats de tri. Il vous suffit pour cela de cocher chacun des éléments que vous souhaitez supprimer.

Étape 4 : vous pouvez également choisir le nombre de produits que vous souhaitez voir ap­pa­raître sur chaque page ou ligne et mettre l’accent sur les nou­veau­tés en leur ap­pli­quant le nouveau badge réservé aux produits récemment ajoutés. Indiquez sim­ple­ment la période pendant laquelle ces produits doivent être con­si­dé­rés comme nouveaux après avoir été ajoutés. N’hésitez pas non plus à activer les sta­tis­tiques de vente de vos produits au niveau du frontend, et ainsi à mettre en avant vos meil­leures ventes.

Étape 5 : à l’aide des fonc­tion­na­li­tés proposées par l’éditeur, per­son­na­li­sez les boutons de votre boutique et les des­crip­tions de vos produits ou modifiez l’apparence desdits boutons ou des dif­fé­rents éléments de votre page, comme les bannières ou les marges.

Étape 6 : Sto­re­Cus­to­mi­zer vous permet de per­son­na­li­ser tous les éléments de vos pages produit, notamment les onglets, le bouton d’ajout au panier, l’in­di­ca­tion du prix, les photos, le nombre de produits vendus, la des­crip­tion ou encore l’affichage d’articles si­mi­laires ou d’éva­lua­tions laissées sur vos produits.

Sans plugins (édition, per­son­na­li­sa­tion et codage CSS)

Si vous n’avez pas envie d’installer des plugins « superflus », vous pouvez tirer parti de trois fonc­tion­na­li­tés intégrées à WordPress, dis­po­nibles dans le menu de gauche (sous « Apparence ») : « Éditeur », « Per­son­na­li­ser » et « CSS sup­plé­men­taire ».

L’éditeur WordPress

Prise en charge par l’éditeur de blocs de WordPress, l’édition intégrale du site permet à chaque uti­li­sa­teur de per­son­na­li­ser les pages de sa boutique. Dans sa version bêta, l’éditeur fonc­tionne par glisser-déposer. Vous pouvez donc ajouter dif­fé­rents éléments cons­ti­tuant votre page (pa­ra­graphes, images, vidéos, etc.) ou les modifier, le tout sous forme de blocs.

Étape 1 : cliquez sur « Apparence », puis sur « Éditeur » dans la barre de menu se trouvant sur la gauche.

Étape 2 : pour ajouter un nouveau bloc de contenu, il vous suffit de cliquer sur le symbole « + » de l’éditeur.

Étape 3 : une liste des dif­fé­rents blocs est désormais visible, et plusieurs pos­si­bi­li­tés s’offrent à vous pour vos articles ou les éléments de votre page. Pour utiliser l’une d’elles, il vous suffit de cliquer sur l’élément souhaité et de le déposer au niveau du bloc cor­res­pon­dant. Vous pouvez notamment opter pour des éléments textuels tels qu’un pa­ra­graphe, une liste, un tableau ou encore une citation.

Étape 4 : les autres éléments dis­po­nibles pour votre page sont par exemple les dif­fé­rents médias et les multiples options liées à son apparence et à sa dis­po­si­tion, ainsi que les widgets.

Per­son­na­li­ser

La rubrique « Per­son­na­li­ser » vous permet de modifier la dis­po­si­tion, l’apparence ou les éléments de vos pages exis­tantes.

Dif­fé­rentes con­fi­gu­ra­tions sont dis­po­nibles dans la rubrique « Per­son­na­li­ser » : vous pouvez notamment décider des réglages de couleur et de police et définir votre propre CSS.

CSS sup­plé­men­taire

L’option « CSS sup­plé­men­taire » vous permet d’effectuer ma­nuel­le­ment quelques mo­di­fi­ca­tions simples à l’aide du CSS, mais vous devez pour cela disposer de con­nais­sances suf­fi­santes en matière de codage. Pour ce faire, il est également important d’apprendre les bases de la pro­gram­ma­tion, ou d’avoir au moins quelques com­pé­tences dans ce domaine. Vous devez utiliser la version « Pro » (payante) de WordPress pour accéder à l’option « CSS sup­plé­men­taire ».

Avec des outils de gé­né­ra­tion de pages

Si vous utilisez déjà un gé­né­ra­teur de pages pour WordPress, tel qu’Elementor ou Divi, celui-ci peut également vous servir à con­fi­gu­rer vos pages produit. Vérifiez toutefois que votre gé­né­ra­teur de pages offre bien les fonctions de bloc spé­ci­fi­que­ment requises par Woo­Com­merce. Elementor propose par exemple des modèles de pages produit préins­tal­lés pour Woo­Com­merce ; vous pouvez donc présenter vos produits de manière at­trac­tive, et ce en toute sim­pli­cité. La plupart des gé­né­ra­teurs de pages per­for­mants ne sont pas gratuits, ou les fonctions propres à Woo­Com­merce sont uni­que­ment dis­po­nibles dans le cadre des versions payantes.

Nous pouvons vous re­com­man­der ces gé­né­ra­teurs de pages per­for­mants :

• Elementor
• Visual Composer
• WPBakery
• Oxygen
• Beaver Builder
• Divi

Côté pratique : ex­ten­sions et plu­gins­Woo­Com­merce pour les pages produit

Woo­Com­merce propose plusieurs ex­ten­sions et plugins qui vous per­met­tent d’ajouter dif­fé­rentes fonctions à votre page produit. Nous vous con­seil­lons de tester les ex­ten­sions suivantes :

• Modules com­plé­men­taires pour les produits : avec des modules com­plé­men­taires tels que Product Add-Ons, vous pouvez proposer des services sup­plé­men­taires : emballage cadeau, message per­son­na­lisé, gravure, don, etc. Sur votre site, les visiteurs n’ont plus qu’à sé­lec­tion­ner les modules com­plé­men­taires souhaités en les cochant.
• Variantes d’images produit : couleur, imprimé, taille, forme… Si vous proposez plusieurs variantes d’un même produit, nous vous re­com­man­dons d’ajouter d’autres images ou galeries de photos pour celles-ci. Pour ce faire, utilisez le plugin Ad­di­tio­nal Variation Images.
• Éva­lua­tions et re­com­man­da­tions : avec une extension telle que Re­com­men­da­tion Engine, vous pouvez par exemple ajouter des avis sur vos produits ou des re­com­man­da­tions con­cer­nant des articles si­mi­laires ou fré­quem­ment achetés ensemble.
• Vidéos produit : par défaut, vous pouvez uni­que­ment ajouter des images pour vos produits. Les outils tels que Product Video vous per­met­tent également d’intégrer à votre page des vidéos issues de YouTube, Facebook ou même Vimeo ; vous pouvez ainsi mieux expliquer le fonc­tion­ne­ment ou présenter l’apparence de vos produits.
• Badges et labels : si vous avez souvent recours à des offres pro­mo­tion­nelles et à des ré­duc­tions, vous pouvez utiliser des badges et des labels dis­tinc­tifs pour signaler celles-ci. Un plugin tel que Product Badges peut tout à fait vous y aider.

In­for­ma­tions requises sur chaque page produit

Pour réussir la création de votre boutique en ligne avec WordPress, vous devez connaître tous les éléments à indiquer sur vos pages produit. Pour présenter un produit, veillez à n’oublier aucun des aspects ci-dessous :

• Photo du produit : utilisez vos propres photos pro­fes­sion­nelles. Leur style doit cor­res­pondre à celui de votre boutique ou reprendre une es­thé­tique fa­ci­le­ment re­con­nais­sable. Les visiteurs seront ainsi plus confiants vis-à-vis de votre offre. De plus, il vaut mieux pho­to­gra­phier votre produit sous tous les angles, de manière à offrir dif­fé­rentes pers­pec­tives aux clients po­ten­tiels.
• Nom du produit : le nom du produit doit indiquer les prin­ci­pales in­for­ma­tions le con­cer­nant ; il s’agit du nom qui apparaît gé­né­ra­le­ment dans les pages de résultats des moteurs de recherche. Ainsi, n’oubliez pas que le nom de votre produit doit être attractif dès lors qu’il apparaît sur Google.
• Prix, offres pro­mo­tion­nelles et frais de port : il est essentiel que le prix (com­pre­nant déjà la TVA) soit bien mis en évidence. N’oubliez pas non plus de rendre visible toute in­di­ca­tion con­cer­nant les offres pro­mo­tion­nelles, les ré­duc­tions et les frais de port.
• Des­crip­tion du produit : celle-ci doit être ex­haus­tive tout en restant in­tel­li­gible, et trans­mettre toutes les prin­ci­pales in­for­ma­tions de manière aisément com­pré­hen­sible tout en étant suf­fi­sam­ment con­vain­cante pour les clients qui pour­raient encore hésiter.
• In­for­ma­tions sup­plé­men­taires con­cer­nant le produit et/ou son ex­pé­di­tion : selon le type de produits que vous vendez, des in­for­ma­tions com­plé­men­taires sur son poids, ses di­men­sions, sa pro­ve­nance et le ou les matériaux utilisés peuvent s’avérer utiles pour les personnes sou­hai­tant prendre une décision d’achat éclairée. Des plugins per­met­tent d’ailleurs d’afficher ou de calculer le prix de plusieurs options d’ex­pé­di­tion ou tarifs de livraison en fonction du poids du produit.
• Commande et modes de paiement : si possible, proposez aux visiteurs de votre site les modes de paiement Woo­Com­merce les plus utilisés, de manière à ce qu’une tran­sac­tion ne soit pas annulée en raison de la non-dis­po­ni­bi­lité de l’un d’entre eux.
• Position, couleur et taille du bouton d’achat : le bouton d’achat, également connu sous le nom de « bouton d’ajout au panier », peut tout à fait faire pencher la balance en votre faveur. Dans l’idéal, celui-ci doit être placé près de la photo et du nom de votre produit, et au-dessus de sa des­crip­tion. Le visiteur ne doit pas avoir à faire défiler la page vers le bas pour le trouver. Choi­sis­sez une couleur ac­cro­cheuse et un visuel attrayant si vous souhaitez générer davantage de ventes.
• Produits si­mi­laires et ventes croisées : l’uti­li­sa­tion d’un élément de page pré­sen­tant d’autres produits si­mi­laires vous permet de proposer à vos clients des produits sus­cep­tibles de leur convenir davantage, et donc les inciter à acheter. Vous pouvez ainsi afficher un plus grand nombre de produits sur votre page sans pour autant sur­char­ger celle-ci. Les ventes croisées (c’est-à-dire des re­com­man­da­tions visant à « compléter » les services offerts par le produit proposé) peuvent également con­tri­buer à l’aug­men­ta­tion de votre chiffre d’affaires.
• Avis et éva­lua­tions : les avis clients peuvent souvent être dé­ter­mi­nants pour les décisions d’achat. Si les clients rédigent des avis positifs sur vos produits, il est judicieux de les faire ap­pa­raître sur votre page produit, sous la forme d’étoiles ou de citations par exemple. Vous pouvez intégrer ces éva­lua­tions à votre page à l’aide des plugins d’avis clients WordPress. Ceux-ci vous per­met­tent également d’inviter vos clients à donner leur avis ou de leur envoyer des rappels pour qu’ils évaluent le ou les produits achetés.

En résumé : créez des pages produit fa­ci­le­ment re­con­nais­sables

WordPress et le plugin Woo­Com­merce sont des outils per­for­mants, mais les thèmes WordPress, un design Web avec des effets de couleurs ou une large gamme de produits ne suffisent pas à réussir le lancement d’une boutique en ligne. Ainsi, n’oubliez pas qu’il est essentiel de présenter vos produits sur des pages à la fois claires et modernes, avec des fonc­tion­na­li­tés adaptées.

N’hésitez pas à utiliser des plugins tels que Sto­re­Cus­to­mi­zer ou SeedProd pour modifier vos pages produit ou à faire appel à un gé­né­ra­teur de pages per­for­mant comme Elementor. Certaines fonc­tion­na­li­tés déjà intégrées à WordPress, comme « Éditeur », « Per­son­na­li­ser » ou « CSS sup­plé­men­taire », peuvent également suffire si vous avez besoin d’apporter des mo­di­fi­ca­tions rapides et efficaces à vos pages. Ayez toujours à l’esprit que l’aspect visuel de vos pages produit peut attirer l’œil des clients et les pousser à vous faire confiance, et donc vous permettre de conclure davantage de ventes.