Comment personnaliser la page produit WooCommerce

Vous cherchez des moyens de personnaliser votre boutique et d'améliorer l'expérience de vos clients ? Nous avons l'article qu'il vous faut ! Dans ce guide, nous vous montrerons comment personnaliser votre page de produit WooCommerce pour vous aider à augmenter vos taux de conversion et à augmenter vos ventes.

Pourquoi personnaliser la page produit WooCommerce ?

Le design de votre fiche produit fait partie intégrante de l'expérience d'achat de votre client sur votre boutique en ligne. Vos produits sont la partie la plus unique et la plus reconnaissable de votre boutique WooCommerce. Vous devez donc personnaliser votre page produit et vous assurer qu'elle met en valeur vos produits et services. Cela inclut des sections de page de produit pratiques telles que des sections de détails supplémentaires, des tableaux de tailles, différents aperçus d'images pour les variations de produits, des options de commande supplémentaires, etc. Et c'est juste ajouter plus de contenu. Vous pouvez également réorganiser ces sections, supprimer celles par défaut, les reconcevoir et bien plus encore.

Indépendamment de ce que vous faites, votre objectif principal doit être d'améliorer l'expérience de vos clients sur votre boutique WooCommerce. Cela vous aidera naturellement à augmenter vos ventes. Si votre site est facile à naviguer et que les utilisateurs peuvent trouver facilement ce qu'ils recherchent, ils sont plus susceptibles d'acheter, de revenir et de recommander votre magasin. Par exemple, vous pouvez ajouter des boutons de paiement direct pour les aider à acheter rapidement, inclure des tableaux de comparaison pour les aider à choisir le bon produit ou ajouter des carrousels de variantes uniques pour afficher toutes les options pour les variantes d'un produit unique.

Il existe également des éléments astucieux de génération de leads que vous pouvez ajouter pour améliorer les ventes de votre produit en personnalisant votre page produit. Cela inclut l'ajout de produits connexes pour des ventes supplémentaires, des articles de vente incitative/inférieure, et bien plus encore.

Voyons maintenant les différentes options dont vous disposez pour modifier votre page produit dans WooCommerce.

Comment personnaliser la page produit WooCommerce

Il existe 3 manières principales de personnaliser la page produit WooCommerce :

1. Avec des plugins
2. Par programmation
3. Avec les constructeurs de pages

Toutes ces méthodes ont des avantages et des inconvénients. Dans ce guide, nous vous les montrerons tous afin que vous puissiez choisir celui qui vous convient le mieux.

1. Comment personnaliser la page du produit WooCommerce à l'aide de plugins

Il existe plusieurs plugins pour éditer la page produit dans WooCommerce. Jetons un coup d'œil à certains des meilleurs.

1) Paiement direct pour WooCommerce

Direct Checkout est le plugin parfait pour simplifier le processus d'achat et faciliter l'expérience d'achat de vos clients. Il est livré avec de nombreuses options pour personnaliser votre page produit en ajoutant des boutons d'achat rapide et des redirections astucieuses d'ajout au panier.

De cette façon, vous pouvez permettre à vos acheteurs d'acheter rapidement vos articles et d'augmenter vos taux de conversation. Cet outil vous permet également de personnaliser votre produit et votre page de paiement en ajoutant des options d'affichage rapide à vos catégories de produits et à vos pages d'archives, ce qui rend le processus de visualisation et d'achat d'articles plus pratique pour vos clients.

De plus, Direct Checkout inclut une personnalisation astucieuse du bouton AJAX d'ajout au panier pour accélérer le processus d'achat et supprimer le besoin de recharger la page lorsque les utilisateurs ajoutent un article à leur panier. En plus de cela, vous pouvez ignorer la page du panier et rediriger vos clients de la page du produit vers la caisse en un clic.

Principales caractéristiques

• C'est un excellent outil pour simplifier le processus d'achat et augmenter les taux de conversion
• Livré avec de nombreuses options pour personnaliser à la fois le produit et la page de paiement
• Boutons d'achat rapide pratiques en un clic à ajouter à vos pages de produits
• Boutons Ajouter au panier compatibles AJAX et redirections d'ajout au panier
• Possibilité de personnaliser les champs de paiement et d'ajouter des options d'affichage rapide aux archives et catégories de produits

Prix

Il s'agit d'un plugin freemium. Il a une version gratuite et trois plans premium qui commencent à un prix promotionnel de 19 USD (paiement unique). Cependant, vous pouvez utiliser le code suivant et bénéficier d'une remise de 10% :

 direct_ck10

2) WooThumbs

WooThumbs est un autre excellent outil qui vous permet d'afficher vos produits WooCommerce de la manière la plus excitante. Le plugin vous offre un autre moyen de configurer vos galeries de produits et vos images et permet un tout autre domaine de personnalisation de vos pages de produits.

De plus, vous pouvez ajouter des options pratiques pour faciliter la navigation dans les images de vos produits et améliorer les ventes de votre magasin. Cela inclut l'ajout de vignettes coulissantes, des conceptions de galerie uniques que vous pouvez personnaliser en fonction de votre thème, des options de zoom intégrées pour vos images et des tonnes d'options de galerie d'images supplémentaires. Enfin, vous pouvez également inclure des galeries d'images uniques pour les variantes de produits, ainsi que des vidéos intégrées dans vos galeries de produits pour davantage de conversions de ventes.

Principales caractéristiques

• Des tonnes d'options étendues pour personnaliser les galeries d'images de produits
• Options pour faire glisser les vignettes ainsi que les options de zoom pour les images de produits
• Galeries d'images flexibles pour les variations de produits pour ajouter des galeries d'images uniques pour chaque variation de produit

Prix

WooThumbs est un plugin premium qui commence à 79 USD par an et dispose d'un essai gratuit de 14 jours.

3) Compléments de produits

Product Add-Ons est un plugin essentiel si vous cherchez des moyens de gérer l'expérience d'achat de vos clients via vos pages de produits. Cet outil est conçu pour vous aider à améliorer vos conversions de ventes tout en offrant plus d'options à vos clients. Il vous permet d'ajouter des options de page de produit uniques telles que des sélections de produits basées sur des images, des cases à cocher de produits supplémentaires ainsi que des textes personnalisés pour une plus grande personnalisation des produits.

De plus, vous pouvez inclure des options de tarification personnalisées uniques pour rendre votre page produit plus polyvalente. Enfin, vous pouvez également ajouter la possibilité de facturer des frais fixes ou des frais en pourcentage pour plus d'options de service pour votre boutique WooCommerce. Pour plus d'informations sur la façon d'ajouter des frais à votre boutique, consultez ce guide.

Principales caractéristiques

• Ajouts supplémentaires à la page de produits tels que des sélections basées sur des images, du texte personnalisé, des exemples d'images, etc.
• Options d'extension de produit supplémentaires telles que les cases à cocher personnalisées et les entrées de texte.
• Options pour ajouter des frais fixes, des frais en pourcentage, ou même ajouter des prix personnalisés pour des options supplémentaires telles que des dons, des pourboires, etc.

Prix

Product Add-Ons est un plugin premium qui vous coûtera 49 USD par an.

4) Tarification spécifique au client WISDM

Si vous cherchez des moyens de rendre votre magasin et ses options de tarification plus intelligents et plus accommodants, alors ce plugin est certainement celui que vous devriez vérifier. WisdmLABS vous présente un plugin de tarification unique qui vous permet de définir des prix personnalisés pour différents clients, utilisateurs et groupes. Cela signifie que vous pouvez définir une tarification personnalisée pour les utilisateurs ayant différents rôles, des clients spécifiques ou des abonnés.

Mais ce n'est pas tout. La tarification spécifique au client WISDM propose d'autres options de tarification intelligentes, telles que la fourniture de codes de réduction et d'offres pour des catégories ou des quantités de produits, et même l'ajout de remises groupées pour des niveaux spécifiques pour des achats multiples.

En plus de cela, vous pouvez également définir des règles de remise sur le panier pour des montants spécifiques. De cette façon, vous pouvez intégrer les adhésions de votre site Web et inciter les utilisateurs à dépenser plus pour votre boutique en leur proposant des offres personnalisées.

Principales caractéristiques

• Options permettant de définir des prix spécifiques pour des clients, des abonnés et des rôles d'utilisateur individuels.
• Offrir des rabais et des offres de vente aux acheteurs en gros et aux acheteurs
• Définissez des règles de tarification pour les catégories de produits ainsi que des remises et des offres à l'échelle du magasin

Prix

Il s'agit d'un outil premium qui commence à 80 USD par an.

5) Elex WooCommerce Demander un devis

Si vous gérez une boutique WooCommerce où vous vendez des produits en vrac ou souhaitez proposer des prix différents en fonction de ce que veulent les clients, ce plugin peut vous faire gagner beaucoup de temps. WooCommerce Request a Quote ajoute un bouton astucieux "Demander un devis" que vos clients peuvent utiliser pour soumettre une demande de devis pour vous.

Vous pouvez alors répondre à toutes vos demandes de devis avec une bonne estimation des prix et satisfaire vos clients en toute simplicité. Cela rend le processus de demande et d'acceptation des devis plus facile et plus flexible.

Enfin, vous pouvez également accepter les commandes de produits en rupture de stock sans aucun problème et ajouter des ajustements de prix pour les utilisateurs susceptibles d'acheter vos produits dans différentes tailles de vrac.

Principales caractéristiques

• Demander un bouton de devis à utiliser pour commander
• Vérification des paiements et notifications de l'administrateur
• Options simples pour répondre, accepter ou refuser les devis des clients
• Options pour activer les demandes de devis à partir de rôles spécifiques

Prix

WooCommerce Request a Quote est un plugin premium qui commence à 59 USD (paiement unique).

Si vous cherchez plus de plugins pour éditer la page produit, jetez un œil à cet article.

Personnalisez la page produit avec Direct Checkout

Voyons maintenant comment vous pouvez modifier la page du produit dans WooCommerce à l'aide de Direct Checkout. Cet outil freemium compte plus de 60 000 téléchargements dans le référentiel WordPress et vous aidera à augmenter vos conversions. La version gratuite a des fonctionnalités de base, donc pour faire passer votre page produit au niveau supérieur, nous vous recommandons l'un des plans premium qui commencent à seulement 19 USD (paiement unique).

Jetons un coup d'œil à certaines des choses que vous pouvez faire avec Direct Checkout pour personnaliser votre page produit.

1. Ajouter un bouton d'achat rapide

L'une des options les plus intéressantes qu'offre cet outil est la possibilité d'ajouter un bouton d'achat rapide. De cette façon, le processus de paiement est beaucoup plus rapide.

Au lieu d'ajouter le produit au panier, rendez-vous sur la page du panier puis sur la page de paiement, vos clients pourront acheter en quelques clics. Et la meilleure partie est qu'il est très facile à configurer.

Après avoir installé et activé le plugin, allez dans WooCommerce > Direct Checkout > General , activez la redirection et paramétrez les options suivantes :

• Redirection ajoutée au panier : Oui
• Ajouté au panier rediriger vers : Paiement

Enregistrez les modifications et c'est tout ! Désormais, lorsque les utilisateurs appuieront sur le bouton d'achat rapide, ils ignoreront la page du panier et iront directement à la page de paiement.

Pour plus d'informations sur les achats rapides, consultez notre guide sur la façon d'ajouter un bouton d'achat rapide à votre boutique.

2. AJAX ajouter au panier

AJAX ajouter au panier est une autre excellente fonctionnalité de WooCommerce Direct Checkout. La fonction d'ajout au panier d'AJAX permet aux clients d'inclure des produits dans leur panier sans avoir à recharger tout le site. Cela améliore l'expérience utilisateur et vous aidera à augmenter vos ventes. De plus, comme les pages n'ont pas besoin d'être rechargées autant de fois, cela réduit la bande passante et la charge du serveur.

Pour activer la fonctionnalité d'ajout au panier AJAX, accédez à WooCommerce > Paiement direct > Produits et activez l'option Ajouter au panier AJAX .

Si vous ne souhaitez pas installer de plug-ins tiers sur votre site et que vous avez des compétences en matière de codage, vous pouvez également personnaliser la page du produit WooCommerce par programme. Voyons comment faire.

2. Comment personnaliser la page produit WooCommerce par programme

Une autre alternative consiste à modifier la page du produit dans WooCommerce par programmation. Nous ne recommandons pas cette méthode aux utilisateurs débutants, mais si vous savez ce que vous faites et souhaitez ajouter des fonctionnalités personnalisées à votre page produit sans aucun outil supplémentaire, c'est une excellente option.

Pour cela, nous utiliserons des codes astucieux construits autour de WooCommerce Hooks . Si vous ne les connaissez pas, consultez ce guide complet sur l'utilisation des hooks WooCommerce. Le guide vous fournit également des informations sur la personnalisation des fichiers de modèle WooCommerce , ce qui est une excellente option si vous souhaitez modifier votre boutique.

Il y a beaucoup de choses que vous pouvez faire si vous savez coder. Pour cette démonstration, nous allons nous concentrer sur la façon dont vous pouvez supprimer ou réorganiser des éléments de votre page produit WooCommerce. Si vous voulez plus d'exemples de choses que vous pouvez faire, vous pouvez consulter notre guide dédié sur la façon de modifier la page produit WooCommerce par programme.

REMARQUE : Comme nous allons modifier certains fichiers principaux avant de commencer, assurez-vous de créer une sauvegarde complète de votre site. De plus, nous vous recommandons d'utiliser un thème enfant. Pour ce faire, vous pouvez soit le créer, soit utiliser l'un de ces plugins.

Suppression d'éléments de la page produit WooCommerce

Pour ajouter ces codes, ouvrez votre éditeur de thèmes WordPress dans votre tableau de bord WordPress en allant dans Thèmes > Éditeur de thèmes. Ensuite, cliquez sur le fichier Functions.php dans la liste des fichiers dans la colonne la plus à droite. Ici, vous pouvez ajouter vos propres scripts WooCommerce pour commencer à personnaliser votre boutique.

WooCommerce vous propose plusieurs crochets pour personnaliser n'importe quel élément de votre boutique. Ces crochets fonctionnent avec des éléments spécifiques, vous devez donc utiliser le bon crochet avec la bonne fonction et la bonne valeur de priorité pour supprimer ou réorganiser ces éléments. Vous pouvez voir tous les crochets et leurs paramètres associés sur cette page ou le fichier content-single-product.php du plugin WooCommerce.

Voyons maintenant comment vous pouvez ajouter un script pour supprimer la méta, la description et les étoiles du produit de votre page de produit WooCommerce.

Pour cela, collez simplement le code suivant dans votre fichier functions.php :

 // supprimer les étoiles de classement
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10);
// supprimer la méta du produit 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// supprimer la description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

Ensuite, cliquez sur le fichier de mise à jour , et votre page de produit WooCommerce devrait avoir ces éléments supprimés.

Réorganiser les éléments de la page produit WooCommerce

Vous pouvez également réorganiser les éléments de page de produit WooCommerce à l'aide de crochets. Par défaut, les éléments WooCommerce ont leur propre ordre de priorité. Si vous ne les connaissez pas, vous pouvez consulter cette page.

Maintenant, pour réorganiser les éléments, vous pouvez simplement supprimer l'élément et le rajouter à l'aide du crochet add_action . Vous pouvez ensuite ajouter votre propre ordre de priorité sur le crochet, afin que les éléments apparaissent dans votre ordre préféré.

Par exemple, si nous voulons que la section de description apparaisse juste après le titre, nous pouvons lui donner un ordre de priorité personnalisé de 6. Puisque le titre a un ordre de 5, cela ajoutera votre description juste en dessous.

Pour ce faire, ajoutez ce script à votre fichier functions.php et cliquez sur Mettre à jour le fichier .

 // change l'ordre de la description
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );
add_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6); 

Ce ne sont là que quelques exemples de ce que vous pouvez faire pour personnaliser votre page produit WooCommerce par programmation . Cependant, il y a beaucoup d'autres choses que vous pouvez faire. Si vous cherchez de l'inspiration, consultez notre guide dédié sur la façon de modifier la page produit à l'aide de code.

3. Modifier la page du produit WooCommerce à l'aide des constructeurs de pages

Les constructeurs de pages sont une réponse universelle à la personnalisation de vos pages WooCommerce. Cela inclut non seulement votre page de produit, mais toute autre page de votre site. Les constructeurs de pages WordPress ont la possibilité supplémentaire de définir et d'utiliser des modèles de page WooCommerce. De cette façon, non seulement vous pouvez utiliser une grande variété d'éléments personnalisés pour personnaliser vos pages de produits, mais également utiliser des modèles et des pages préconçus pour vous faciliter la vie.

Il existe une grande variété de constructeurs de pages compatibles avec WooCommerce que vous pouvez utiliser. Même s'ils fonctionnent de manière similaire, ils présentent quelques différences, nous vous recommandons donc de consulter nos guides dédiés pour vous aider à personnaliser vos pages produits.

• Comment personnaliser la page produit WooCommerce dans Divi
• Comment personnaliser la page produit WooCommerce dans Elementor

Bonus : personnalisation de vos éléments WooCommerce à l'aide de CSS

Vous pouvez également explorer la possibilité de personnaliser vos éléments WooCommerce en ajoutant des extraits CSS à votre thème WordPress. Cela vous permet d'explorer des idées telles que la personnalisation des tailles de police pour les titres, les couleurs des boutons Acheter maintenant, et bien plus encore.

Pour ajouter des extraits CSS à votre thème WordPress, allez dans Apparence > Personnaliser et cliquez sur CSS supplémentaire.

Ici, vous pouvez ajouter des extraits CSS et personnaliser n'importe quel élément de votre choix. Il y a beaucoup de choses que vous pouvez modifier mais pour vous donner quelques idées, nous laisserons quelques extraits ci-dessous. De plus, vous pouvez utiliser ce sélecteur de couleurs HTML pour trouver le bon code hexadécimal à ajouter à vos codes CSS de couleur.

 Modifier la taille de la police du titre du produit
.woocommerce div.product .product_title {
taille de police : 42px ;
}

Changer la couleur du titre du produit
.woocommerce div.product .product_title {
couleur : #AAb733 ;
}

 Modifier la couleur du bouton Acheter maintenant
.woocommerce div.produit .bouton {
arrière-plan : #000000 ;
}

Après avoir ajouté vos extraits, n'oubliez pas de cliquer sur Publier pour finaliser les modifications.

Conclusion

Dans l'ensemble, la modification de votre page produit est essentielle pour améliorer l'expérience d'achat de vos clients et augmenter vos ventes. Dans ce guide, nous avons vu différentes manières de personnaliser la page produit dans WooCommerce :

• Utiliser des plugins dédiés
• Par programmation, en utilisant des crochets et des modèles WooCommerce
• Utiliser des constructeurs de pages tels que Divi et Elementor

Chacune de ces méthodes a ses avantages et ses inconvénients, alors choisissez celle qui correspond le mieux à vos compétences et à vos besoins. Si vous n'avez pas de compétences en codage, l'utilisation d'un plugin est votre meilleur choix. Il existe plusieurs outils, mais si vous voulez quelque chose de facile à utiliser, efficace et économique, Direct Checkout est fait pour vous.

D'autre part, si vous aimez coder et que vous souhaitez créer une solution personnalisée, vous pouvez personnaliser votre boutique par programmation avec certains scripts. Les options sont infinies et vous pouvez pratiquement tout faire, alors inspirez-vous de nos scripts et créez vos propres solutions.

Si vous recherchez d'autres guides pour personnaliser votre boutique, consultez les articles suivants :

• Comment personnaliser la page de la boutique WooCommerce
• Comment modifier la page Mon compte
• Guide complet pour personnaliser le bouton Ajouter au panier dans WooCommerce
• Comment ajouter des frais à la caisse
• Comment masquer les produits associés dans WooCommerce

Quelle méthode avez-vous utilisée pour modifier votre page produit ? Avez-vous rencontré des problèmes en suivant ce guide ? Faites-le nous savoir dans les commentaires ci-dessous et nous ferons de notre mieux pour vous aider.