Comment personnaliser votre page de produit WooCommerce
Publié: 2022-10-18Les pages de produits sur tout site Web de commerce électronique sont exigées comme la partie la plus essentielle. Parce qu'il contient tous les détails concernant un produit de manière ordonnée avec des informations supplémentaires telles que les produits connexes, etc.
La page de produit WooCommerce par défaut convient à la vue rapide du produit de base , à l'ajout au panier et à d'autres fonctionnalités de base, mais cela ne suffit tout simplement pas dans l'environnement de commerce électronique concurrentiel moderne. La page produit joue une fonction cruciale dans toute plate-forme commerciale construite par WooCommerce en tant que l'une des pages les plus importantes. Cependant, la page par défaut ne suffit pas.
L'importance de la personnalisation des pages de produits ne peut être surestimée.
En personnalisant vos pages de produits, vous offrez essentiellement à vos clients une expérience d'achat unique, ce qui est également important pour la fidélisation des visiteurs et l'augmentation du nombre de ventes.
Dans cet article, nous vous expliquerons comment utiliser un éditeur de pages de produits WooCommerce et des widgets WooCommerce personnalisés pour créer des pages de produits attrayantes, et plus encore.
Table des matières
Outils nécessaires pour personnaliser la page produit WooCommerce ?
Avant tout, vous devez avoir la dernière version de WordPress installée sur votre serveur, et en plus, le plugin WooCommerce doit être installé afin de prendre en charge toutes les fonctionnalités de la page boutique/boutique.
Vous avez également besoin d'un thème WordPress de commerce électronique axé sur les fonctionnalités et, enfin et surtout, vous aurez besoin d'un plugin WooCommerce Elementor Shop Builder . Avec le plug-in de création de boutique Elementor, vous pourrez contrôler et personnaliser entièrement les pages de la boutique individuelle et la grille de produits du marché, la liste des produits, les blocs de comparaison de produits, etc.
Comment personnaliser la page produit WooCommerce
Nous espérons que vous avez une installation fonctionnelle de WordPress et un thème de commerce électronique fonctionnel déjà installé sur votre serveur. Passons maintenant au processus étape par étape de personnalisation de la page produit en commençant par les ressources et outils WordPress supplémentaires nécessaires.
Étape 1 : Installation d'un plugin Elementor WooCommerce Add-on
Dans cet exemple en direct de personnalisation d'une page de produit WooCommerce avec divers éléments et échantillons de variantes de produits WooCommerce qu'une page de produit moderne doit être présentée aux clients, nous utiliserons quelque chose de similaire au compositeur visuel du constructeur de page de produit WooCommerce - appelé ShopReady.
Le constructeur de boutique ShopReady Elementor est un incroyable outil complet pour créer des sites Web de magasins de commerce électronique robustes. Le plugin est livré avec plus de 105 widgets conçus par des professionnels avec des fonctions et des outils spécifiques à chaque cas d'utilisation. Par exemple, avec ce plugin de commerce électronique, vous pouvez créer un filtre de produit WooCommerce fonctionnel capable de filtrer les produits avec les prix, la taille, le poids, la couleur, la note, l'expédition, etc.
Pour commencer avec ce plugin complémentaire WooCommerce, commencez par le télécharger. Pour ce faire, connectez-vous à votre tableau de bord WordPress , accédez à Et cliquez sur le bouton Installer .
Attendez la réussite de l'installation du plugin et cliquez sur Activer .
Le menu ShopReady apparaîtra sur votre tableau de bord WordPress. À partir de là, vous aurez accès à tous les widgets, modules et contenus prédéfinis fournis par le plug-in de personnalisation de la page de la boutique.
À partir de ce menu simple, vous pouvez activer/désactiver les widgets, créer des modèles et insérer des clés API pour diverses fonctions.
Une autre grande fonctionnalité de ce plugin est son commutateur de devises pour la capacité WooCommerce. Pour activer cette fonction, vous devrez suivre les instructions ci-dessous.
Pour ajouter votre clé API de devise créée par Exchangerate , cliquez sur l'onglet API.
Connectez-vous au tableau de bord de votre compte Exchangerate et copiez votre clé API pour l'obtenir. Après avoir collé votre clé API, accédez à votre tableau de bord WordPress > ShopReady > API et cliquez sur Étape 2 : Utilisez un modèle de page de produit prédéfini ou créez-en un à partir de zéro
La prochaine étape consiste à commencer à travailler sur une page de produit, mais avant cela, vous devrez ajouter des produits à votre site Web WooCommerce. Si vous ne savez pas comment procéder, vous pouvez suivre ce guide sur – Comment ajouter rapidement un produit WooCommerce .
Maintenant, pour commencer à personnaliser une page pour une vitrine de produits, utilisez ShopReady - WooCommerce Builder pour créer une page de produit simple en accédant au tableau de bord du plug-in et en cliquant sur l' onglet Modèles . Activez la catégorie Modèle de produit et recherchez la configuration Produit unique. Cliquez maintenant sur l'icône d'édition.
Et vous serez redirigé vers l' écran Elementor Editor . Maintenant, pour commencer à personnaliser la page, cliquez sur le symbole plus pour ajouter des sections Elementor. Il existe différents types de sections Elementor que vous pouvez ajouter à votre page en fonction de l'apparence que vous souhaitez donner à votre page et des widgets que vous souhaitez utiliser.
Étape 3 : Personnalisation de la page produit WooCommerce avec les widgets Elementor
- Ajout d'un titre de produit
Maintenant que vous avez placé une structure de section Elementor de base pour votre page de produit WooCommerce, vous pouvez commencer par ajouter un titre de produit. Pour ce faire, vous devrez glisser-déposer le widget Titre du produit sur la page du produit.
Et pour afficher le titre de produit approprié, cliquez sur l' onglet Contenu , et sous celui-ci, vous trouverez les options d' actualisation de l'éditeur . Sélectionnez le titre du produit approprié dans l' option Produit de démonstration .
Vous devez ajouter ou modifier les informations de produit appropriées à partir du tableau de bord des produits WooCommerce afin que ces données affichent le titre de produit approprié.
- Ajout d'une image en vedette à la page produit
Ensuite, vous aurez besoin de votre galerie d'images de produits et de l'image caractéristique de votre produit. À cette fin, vous pouvez utiliser l'un des multiples widgets d'image fournis par l' addon Elementor tout-en-un pour le commerce électronique.
Pour cet exemple, nous utiliserons le widget ShopReady Thumbnail with Zoom, il fait ce que son titre suggère. Avec ce widget, vous pouvez montrer à vos clients une version zoom survolée du produit WooCommerce de l'image de votre produit lorsqu'ils survolent l'image de votre produit.
Comme précédemment, vous pouvez sélectionner la bonne image de produit dans l' option Produit de démonstration , onglet Contenu .
- Ajout d'un bloc pour le widget de tarification
Un autre élément important à avoir sur votre page de produit de commerce électronique est le bloc de prix du produit. Pour cela, vous devrez mettre à jour les attributs du produit WooCommerce avec les mises à jour correctes et utiliser le widget ShopReady Price , qui doit être placé sous le titre du produit.
Pour afficher le prix correct, sélectionnez le titre du produit dans l' option Produit de démonstration , sous l' onglet Contenu .
- Ajout de la description du produit
Vous avez également la possibilité d'ajouter des descriptions de produits hautement personnalisables à l'aide de ce widget de description de produit des modules complémentaires de produit WooCommerce . À partir de l'onglet Style, vous aurez la possibilité de personnaliser la façon dont la description du produit apparaîtra aux masses.
- Ajout de la fonctionnalité Ajouter au panier
Ajouter au panier est une autre fonctionnalité très importante à avoir, permettant à vos clients d'avoir plusieurs produits sur leur page de panier avant de passer à la page de paiement.
Pour disposer d'une fonction Ajouter au panier robuste sur la page de votre boutique de commerce électronique, vous pouvez utiliser le widget Ajouter au panier ShopReady. Avec ce widget, vous pouvez laisser vos clients augmenter et diminuer la quantité de produits de leur panier directement à partir du bloc Ajouter au panier.
Vous personnalisez également votre bouton d'ajout au panier Elementor à partir de la typographie, de la couleur, de l'arrière-plan, de la marge, du rembourrage, etc. de l'onglet Elementor Style du produit WooCommerce .
- Ajout de métadonnées à la page produit
Pour offrir une meilleure expérience d'achat à vos clients, vous devez implémenter un filtre de produit WooCommerce en utilisant les métadonnées et les attributs de produit que vous avez ajoutés lors de l'ajout de produits à WooCommerce .
Pour présenter ces données sur votre page produit, recherchez le widget ShopReady Meta et déposez-le sous le bouton Ajouter au panier.
Vos balises et métadonnées de produit doivent apparaître correctement lorsque vous sélectionnez le titre de produit correct dans l' option Produit de démonstration , sous l' onglet Contenu .
- Ajout de boutons de partage de médias sociaux à la page produit
Vos clients peuvent également partager vos publications de produits sur les réseaux sociaux directement depuis votre page de produit WooCommerce en utilisant un simple bloc de boutons de partage sur les réseaux sociaux. Que vous pouvez créer en utilisant simplement le widget Elementor Social Share glisser-déposer.
Le bloc peut être personnalisé avec n'importe quelle icône de réseau social, texte et liens partageables, directement depuis l' onglet Contenu . Et peut également être personnalisé pour modifier l'apparence des blocs de partage social à partir de l' onglet Style Elementor.
Et vous avez terminé avec les bases de la personnalisation des pages de produits WooCommerce.
Étape 4 : Ajouter des produits associés à la page produit WooCommerce
Un excellent moyen d'augmenter les ventes en ligne consiste à présenter des produits connexes sur votre page produit en utilisant le widget Produits connexes des modules complémentaires WooCommerce. Avec le widget ShopReady Related Products , vous pouvez créer un superbe bloc de curseur de produit dans les sections.
Pour utiliser le widget, il vous suffit de faire glisser et de déposer le widget sous le bloc de produit unique et de sélectionner individuellement chaque produit que vous souhaitez présenter sous votre page de produit unique.
En conclusion
Nous espérons que ce guide informatif vous a aidé à mieux comprendre la personnalisation des modèles de pages de produits WooCommerce et comment vous pouvez utiliser ces outils incroyables pour pimenter votre site Web de commerce électronique avec de meilleures fonctionnalités.
Avec les détails des produits contextuels WooCommerce dans le tableau de comparaison des produits, tout ce dont un marché de commerce électronique a besoin, ShopReady peut fournir. Si vous avez des questions à ce sujet, n'hésitez pas à nous contacter dans la section des commentaires ci-dessous.