Comment modifier et personnaliser vos pages de produits WooCommerce

La page produit est cruciale pour le processus de vente. C'est là que l'acheteur décide de continuer et d'acheter l'article ou de partir sans garantie de retour. Votre objectif en tant que propriétaire de boutique en ligne est d'amener les visiteurs du site vers vos pages de produits, puis de leur faire suivre les dernières étapes d'ajout au panier et de paiement.

À cette fin, il est essentiel que vos pages de produits fassent le meilleur travail possible pour promouvoir l'article vendu. Le modèle de produit par défaut de WooCommerce est propre et professionnel, vous offrant une base solide pour votre page sur laquelle vous pouvez vous appuyer en utilisant les méthodes ci-dessous.

Comment optimiser votre modèle de page produit WooCommerce

Il existe plusieurs façons de personnaliser vos pages ou modèles de produits WooCommerce. Certaines méthodes sont incluses dans WooCommerce. Pour les autres, vous aurez besoin d'une extension. Vous pouvez également utiliser l'éditeur de site ou effectuer des personnalisations manuellement. Examinons de plus près chaque option.

Comment personnaliser votre page de produit WooCommerce à l'aide de fonctionnalités intégrées

De nombreuses optimisations de pages de produits peuvent être effectuées sans aucun module complémentaire ni codage. Des photos de haute qualité, des descriptions informatives et des informations clés sur le produit permettent au visiteur de se sentir plus à l'aise pour acheter le produit.

Activez les avis et les évaluations pour renforcer la confiance. Configurez des produits connexes, des ventes croisées et des ventes incitatives pour augmenter la taille moyenne des commandes et permettre aux clients de découvrir plus facilement de nouveaux articles. Incluez des témoignages de clients dans vos descriptions de produits ou onglets pour preuve sociale.

Une fois que vous avez optimisé le contenu de votre page, vous pouvez encore améliorer vos pages produit en utilisant les extensions WooCommerce, en modifiant votre modèle de page produit avec l'éditeur de site et en les personnalisant manuellement avec du code et des hooks.

Comment personnaliser votre page produit à l'aide des extensions WooCommerce

Une extension est un plugin WordPress spécialement conçu pour fournir des fonctionnalités supplémentaires aux magasins WooCommerce. Vous trouverez ci-dessous quelques extensions WooCommerce que vous pouvez utiliser pour fournir des informations supplémentaires sur les produits, améliorer l'expérience d'achat et étendre votre page au-delà de ses fonctionnalités par défaut. Vous pouvez trouver encore plus d'extensions pour une personnalisation plus poussée dans la bibliothèque d'extensions officielle de WooCommerce.

1. Variation de produit avancée pour WooCommerce

Les produits variables sont des articles avec des options telles que la taille et la couleur - des choix que l'acheteur fait avant de passer à la caisse. Sur le front-end, WooCommerce affiche une liste déroulante pour chaque attribut (comme la taille ou la couleur) avec une liste des variantes disponibles ci-dessous (comme Small, Medium ou Large).

Pour une approche plus visuelle, Advanced Product Variation for WooCommerce vous permet de présenter des variations de produits avec des échantillons (couleurs, images et texte), des galeries et des tableaux. Vous pouvez même inclure des vidéos dans vos échantillons.

Les échantillons de variation s'affichent sur la page Produit ou la page principale de la boutique, en fonction des paramètres que vous configurez. Vous pouvez créer des échantillons en tirant parti des images de produits existantes et des images en vedette.

Vous pouvez également personnaliser la disposition de la galerie de produits en la déplaçant de sa position par défaut sous l'image en vedette vers le côté gauche.

En savoir plus sur la variation de produit avancée pour WooCommerce.

2. Gestionnaire d'onglets WooCommerce

Les onglets de la page produit WooCommerce apparaissent sous le bouton Ajouter au panier et vous permettent de présenter des informations supplémentaires tout en conservant des éléments clés tels que le titre et le prix au-dessus du pli.

Ces informations supplémentaires peuvent inclure les matériaux et ingrédients du produit, les poids et dimensions, les tableaux de tailles, les tableaux de prix, les délais de livraison, les frais d'expédition, les vidéos explicatives - n'importe quoi cela aidera le client à se sentir en confiance lors de son achat.

Avec WooCommerce Tab Manager, vous pouvez renommer, réorganiser et supprimer les onglets par défaut - Description longue, Informations supplémentaires et Avis - et personnaliser cette section en créant vos propres onglets globaux, à l'échelle de la catégorie et spécifiques au produit.

Utilisez le plugin pour définir un ordre de tabulation par défaut qui peut être remplacé au niveau du produit. Avec une interface glisser-déposer, vous n'avez pas besoin de modifier les fichiers de thème ou d'entrer dans le code.

Si vous avez déjà des onglets personnalisés via d'autres plugins, WooCommerce Tab Manager les détecte, vous donnant la possibilité de les afficher ou de les masquer. Un avantage majeur de ce plugin est que le contenu de vos onglets est inclus dans les résultats de recherche de votre site.

En savoir plus sur WooCommerce Tab Manager.

3. FAQ sur les produits

Les questions fréquemment posées, ou FAQ, sont un moyen convivial d'organiser et de présenter des informations sur les produits à vos visiteurs. Avec l'extension Product FAQs, vous pouvez ajouter un onglet FAQ dédié à chaque produit avec un nombre illimité de questions et de réponses.

Le plugin fonctionne avec tous les types de produits et ajoute une section FAQ lorsque vous créez ou modifiez une page de produit.

Sur le front-end, les FAQ sont affichées en accordéon avec animation.

En savoir plus sur la FAQ des produits.

4. Produits composites

Avec Composite Products, vos clients peuvent créer des kits ou des produits configurables.

Pour chaque produit composite, vous permettrez aux clients de choisir entre des sélections prédéterminées à partir de l'inventaire existant. Vous pouvez attribuer des frais supplémentaires à des sélections spécifiques et autoriser certaines catégories à être facultatives.

Par exemple, un collier peut contenir des options pour la chaîne (argent, or), la pierre (rubis, grenat, émeraude) et une breloque facultative (plusieurs choix de formes).

Pour chacun des éléments constitutifs du kit - chaîne, pierre et breloque - vous pouvez sélectionner les SKU parmi lesquels le client peut choisir ou le laisser choisir n'importe quelle option dans une catégorie de produits entière.

La logique conditionnelle vous permet d'afficher ou de masquer les options en fonction des choix précédents (par exemple, la chemise rouge n'est pas disponible dans des tailles spécifiques) et le suivi au niveau des composants prend en charge la gestion avancée des stocks. Si vous disposez d'un grand nombre d'options, vous pouvez créer des vues avec tri, filtrage et pagination pour faciliter vos achats.

En savoir plus sur les produits composites.

5. Produits complémentaires

L'extension Product Add-Ons permet à vos acheteurs de personnaliser et de mettre à niveau leurs achats grâce à des extras gratuits et payants.

Les modules complémentaires peuvent inclure des garanties, des matériaux de meilleure qualité, des options d'expédition prioritaire ou des personnalisations telles que des monogrammes et des gravures personnalisés. Si les gens achètent souvent vos produits en cadeau, vous pouvez ajouter une option d'emballage ou un champ de message cadeau.

Les organisations à but non lucratif pourraient permettre aux acheteurs d'inclure un don avec leur achat et de faire un don en l'honneur de quelqu'un en ajoutant un nom et un message.

Si vous avez des réservations WooCommerce, les modules complémentaires de produit vous permettent de créer des options pour des services supplémentaires (rinçage des cheveux après la coupe de cheveux) ou des surclassements VIP pour des sièges et un accès spéciaux. Il fonctionne également avec les abonnements WooCommerce afin que vous puissiez proposer des modules complémentaires à vos produits d'abonnement.

Vos modules complémentaires peuvent inclure des champs personnalisés affichés sous forme de zones de texte, de listes déroulantes, de cases à cocher, de sélections basées sur des images et des entrées de prix personnalisées pour des éléments tels que des pourboires et des dons. Ces champs peuvent être appliqués à l'ensemble de votre catalogue ou affectés à des produits spécifiques.

Une fois que vous avez configuré vos modules complémentaires, ils apparaissent sur les pages de produits au-dessus du bouton Ajouter au panier dans l'ordre que vous choisissez.

En savoir plus sur les produits complémentaires.

Personnalisez votre page produit à l'aide de l'éditeur de site

Avec les thèmes de bloc, vous pouvez personnaliser l'apparence de votre page de produit en modifiant le modèle de page de produit unique dans l'éditeur de site. Dans l'admin WordPress, allez dans Apparence → Éditeur .  

Choisissez "Parcourir tous les modèles" dans le menu déroulant en haut au centre de la page. Choisissez le modèle de produit unique dans la liste qui s'affiche.

La mise en page par défaut contient l'en-tête, le pied de page et le bloc de produit unique WooCommerce, qui affiche les informations sur le produit, le prix et les éléments d'image.

Vous devez sauvegarder votre site avant d'apporter des modifications à votre modèle de page produit. Certains changements - par exemple, la suppression accidentelle du bloc Produit unique et l'enregistrement - rendront impossible pour vos visiteurs de magasiner ou d'acheter.

Comment modifier les modèles d'en-tête et de pied de page de produit unique

L'onglet Modèle sous Paramètres (l'icône d'engrenage en haut à droite) contient des liens pour gérer l'en-tête et le pied de page. Cliquez sur l'une ou l'autre des options pour gérer cette partie du modèle de page. Vous pouvez également cliquer directement dans une zone du modèle pour commencer l'édition. N'oubliez pas que toute modification apportée ici sera appliquée à tous les produits utilisant le modèle.

Dans l'en-tête, vous pouvez modifier le titre du site et les liens dans votre menu de navigation principal, et même ajouter de nouveaux blocs pour personnaliser spécifiquement votre page produit. Utilisez cet espace pour ajouter des images, du texte et plus encore afin d'améliorer le pouvoir de vente de votre page produit. Vous pouvez ajouter une note promotionnelle ou de politique ou une bannière pour informer les acheteurs d'une vente en cours ou comment obtenir la livraison gratuite sur les commandes supérieures à un certain montant.

Vous pouvez faire quelque chose de similaire avec le pied de page du produit. Par exemple, ajoutez un témoignage client ou des informations sur une politique de garantie de satisfaction.

Comment personnaliser le corps du produit unique

Le bloc Produit unique affiche un avertissement en gras en haut, « Ne supprimez pas ce bloc ! La suppression de ce blocage entraînera des effets inattendus sur votre magasin. » Prenez ce message au sérieux !

Cependant, vous pouvez ajouter de nouveaux blocs autour du bloc Produit unique pour personnaliser complètement la conception de votre page produit.

Utilisez l' icône + pour ajouter des éléments au-dessus ou au-dessous du bloc Produit unique, puis incluez les blocs que vous souhaitez personnaliser la page.

Utilisez un bloc Paragraphe pour inclure les offres actuelles (« Dépensez 100 $ ou plus pour la livraison gratuite »), une garantie de satisfaction ou tout ce qui aidera les visiteurs à prendre la décision d'acheter. Ajoutez un bloc Vidéo qui donne un aperçu des coulisses de vos processus. Ou incluez des produits recommandés spécifiques que vous souhaitez promouvoir. Le ciel est la limite ici !

Et pour chaque bloc, vous pouvez modifier des paramètres tels que la couleur d'arrière-plan, la typographie et l'espacement pour le personnaliser vraiment.

Personnalisez votre page produit manuellement (à l'aide de code et de crochets)

Pour les options avancées - sans le coût ni la maintenance des plugins - vous pouvez modifier et personnaliser manuellement votre page de produit à l'aide de code et de crochets.

Avant d'apporter des modifications à vos fichiers, il est important que vous preniez le temps de sauvegarder WooCommerce. Si vous utilisez Jetpack VaultPress Backup, cela se fait automatiquement pour vous, en temps réel. Ainsi, si l'une de vos modifications entraîne la panne de votre site, vous pouvez restaurer une sauvegarde en quelques clics, même si vous n'avez pas accès à votre tableau de bord WordPress.

Et vous souhaiterez également utiliser un thème enfant pour effectuer ces modifications. Sinon, lorsque vous mettez à jour votre thème ou WooCommerce, vous risquez de perdre toutes vos personnalisations. Une autre option consiste à utiliser un plugin comme Code Snippets, qui vous permet d'ajouter du code personnalisé à votre site dans des extraits que vous pouvez activer et désactiver selon vos besoins.

Personnalisez les pages de produits WooCommerce à l'aide de crochets

Les crochets permettent aux propriétaires de sites d'ajouter du code et de personnaliser des pages sans les dangers associés à la modification des fichiers principaux. Il existe deux types de hooks : les actions et les filtres. Les actions vous permettent d'insérer du code à des points spécifiques, tandis que les filtres vous permettent de manipuler et de renvoyer une variable.

Par exemple, vous pouvez utiliser des actions pour ajouter un nouveau champ de paiement, puis utiliser des filtres pour modifier les étiquettes ou les espaces réservés des champs de paiement existants. Vous pouvez trouver la liste des crochets WooCommerce disponibles ici.

Voici quelques exemples supplémentaires de modifications que vous pouvez apporter à vos pages de produits à l'aide de crochets :

• Modifiez le texte du bouton Ajouter au panier. Par exemple, vous pourriez dire « Faire un don maintenant » à la place.
• Personnalisez le fil d'Ariane WooCommerce. Changez le séparateur de chapelure, supprimez complètement la chapelure, etc.
• Supprimez, renommez et réorganisez les onglets de produits. Ajoutez un onglet Ingrédients, par exemple, ou incluez une vidéo dans l'un des onglets.

Personnalisez les pages de produits WooCommerce à l'aide de CSS

CSS est un langage de codage utilisé pour contrôler les éléments de conception (par opposition à JavaScript, qui contrôle les actions). Vous pouvez l'utiliser pour modifier le design de vos pages produits. Une fois que vous avez appris les bases du CSS, vous pouvez tout personnaliser, des couleurs et des polices aux tailles des éléments individuels.

Vous pouvez facilement ajouter du code CSS en accédant à Apparence → Personnaliser → CSS supplémentaire dans votre tableau de bord WordPress. Par exemple, si vous vouliez changer la couleur de la police des titres de vos produits, vous utiliseriez le code suivant, en remplaçant le code hexadécimal de la couleur par le vôtre :

 .woocommerce div.product .product_title { color: #222222; }

Si vous vouliez changer la couleur du bouton Acheter maintenant, vous utiliseriez ce code, en remplaçant à nouveau le code hexadécimal par la couleur de votre choix :

 .woocommerce div.product .button {   background: #000000; }

Vous pouvez voir plus d'exemples dans cet article de WooCommerce.

Comment augmenter la vitesse de chargement de votre page produit

Les sites à chargement rapide sont importants pour les visiteurs et les moteurs de recherche. Les gens ne veulent pas attendre et les moteurs de recherche ne veulent pas envoyer les gens vers des sites peu performants.

Littéralement, chaque seconde compte - un retard d'une seconde dans les temps de chargement peut réduire les taux de conversion de 20 % !

Jetpack Boost est la meilleure solution d'optimisation de la vitesse et des performances du site Web pour WordPress. Il a un processus de configuration rapide et facile - aucun développeur n'a besoin - et affiche des résultats qui battent les cinq meilleurs plugins de performance lors d'un test en tête-à-tête.

Après avoir installé le plugin gratuit, vous pouvez exécuter un audit et obtenir un rapport sur les scores de performance actuels de votre site. Ceux-ci serviront de références que vous pourrez utiliser pour mesurer les améliorations de vos Core Web Vitals, des mesures que Google utilise pour évaluer l'expérience utilisateur et les performances techniques de votre site.

Un tableau de bord simple facilite la configuration des options d'optimisation via des activations en un clic. Cela vous donne la possibilité de tester les modules de performance individuellement et de configurer Jetpack Boost pour s'adapter parfaitement à n'importe quel scénario.

Pour plus de façons d'accélérer vos pages de produits, consultez Neuf façons d'accélérer une boutique WooCommerce.

Foire aux questions sur la personnalisation des pages de produits

Vous avez encore des questions ? Jetez un œil aux réponses à certaines questions courantes ci-dessous.

Quelle est la meilleure façon de personnaliser une page de produit WooCommerce ?

Il n'y a pas de meilleur moyen. La meilleure façon pour vous dépend de votre niveau de confort avec les différentes approches.

L'éditeur de site met tout le pouvoir entre vos mains, vous permettant de faire glisser et de déposer des éléments pour créer votre propre page de produit personnalisée sans avoir à modifier le moindre code. C'est une excellente solution pour les débutants comme pour les utilisateurs avancés !

Si vous recherchez des fonctionnalités supplémentaires spécifiques, les extensions WooCommerce sont une excellente option. Ils sont vérifiés et approuvés par WooCommerce et offrent aux commerçants des options de personnalisation avancées sans code personnalisé.

La personnalisation et le codage manuels offrent la plus grande flexibilité, mais nécessitent également les connaissances les plus techniques. Par rapport à l'utilisation de blocs ou d'extensions, cette méthode a le plus de chances de causer un problème ou même de casser le site.

Dois-je sauvegarder mon site avant de modifier le modèle de page produit ?

Oui. Contrairement aux pages et aux publications, les modèles de site n'ont pas d'historique de révision. Sauvegardez votre site avant de mettre à jour votre modèle de page produit, afin de pouvoir effectuer une restauration rapide en cas de problème.

Jetpack VaultPress Backup est un plugin de sauvegarde WordPress en temps réel, ce qui signifie que votre site n'est pas simplement sauvegardé selon un calendrier quotidien ou lorsque vous effectuez une copie manuelle. Au lieu de cela, il est enregistré automatiquement chaque fois que vous apportez une modification à votre site, qu'un client passe une commande ou qu'un visiteur laisse un commentaire. Chaque fois qu'il se passe quelque chose d'important ? C'est sauvé !

Les magasins de commerce électronique ne peuvent pas se permettre de perdre des données, en particulier lorsque ces données représentent des commandes clients réelles. Ne vous contentez pas de solutions qui ne sauvegardent votre site qu'occasionnellement ou qui nécessitent une longue interaction avec le service client pour restaurer les éléments en cas de problème.

Avec Jetpack VaultPress Backup, vous pouvez restaurer votre site en un clic et vous remettre en ligne rapidement. Avec l'application mobile Jetpack, vous pouvez restaurer à tout moment, n'importe où, même si le site est complètement indisponible.

La meilleure partie pour les propriétaires de magasins ? Toutes vos données clients et vos commandes sont protégées et restent à jour.

Quelles sont les meilleures pratiques pour personnaliser une page de produit WooCommerce ?

Quelle que soit la méthode que vous utilisez pour modifier et personnaliser votre page de produit WooCommerce, suivez ces meilleures pratiques pour vous protéger, protéger votre site et vos clients.

Sauvegardez d'abord votre site, à chaque fois . Lorsque vous ajoutez ou mettez à jour le code du site, une seule erreur peut entraîner des problèmes. Vous devez être prêt à restaurer le site dès que possible, sans perdre une seule commande. Jetpack VaultPress Backup est la meilleure solution de sauvegarde automatique en temps réel pour WordPress.

C'est fait pour vous, vous n'avez donc même pas à vous soucier de sauvegarder votre site avant de tester les modifications.

Effectuez vos modifications de code en dehors de vos fichiers de thème parent . Lorsque vous modifiez un fichier de thème ou de plugin, ces modifications seront écrasées et annulées la prochaine fois que le thème ou le plugin sera mis à jour.

Il existe plusieurs façons d'ajouter du code à votre site sans modifier directement les fichiers de thème ou de plug-in. Vous pouvez utiliser le plug-in Code Snippets pour ajouter, modifier ou supprimer des éléments sur une page et styliser votre site via le champ CSS supplémentaire dans le personnalisateur de thème. Vous pouvez également créer un thème enfant. L'important est d'apporter vos modifications là où elles ne seront pas affectées par les mises à jour du thème ou du plugin.

Gardez un œil sur la vitesse. Quelle que soit la façon dont vous personnalisez vos pages de produits, vous voulez vous assurer que la vitesse de votre site n'en souffre pas. Avec Jetpack Boost, vous pouvez instantanément améliorer les domaines clés qui améliorent à la fois l'expérience utilisateur et la perception de Google de la qualité de votre site. Un site plus rapide signifie que les clients seront plus susceptibles de rester et Google sera plus susceptible de vous recommander dans les résultats de recherche. Un coup de pouce rapide peut aller très loin.