Comment personnaliser les pages de produits WooCommerce

Vos produits sont uniques, et les pages qui les présentent devraient l’être aussi.

La page “produit” par défaut de Woocommerce est idéale pour de nombreux commerces en ligne, mais vous souhaitez peut-être quelque chose qui reflète le style unique et les atouts de vos produits.

Avec l’aide des extensions et des fonctionnalités basique de Woocommerce, vous n’avez pas à être un développeur pour apposer votre propre signature sur ces pages de produit.

Les Produits “ Add-Ons”

L’extension Product Add-Ons permet d’ajouter des champs supplémentaires aux pages de vos produits afin que les acheteurs puissent personnaliser leurs achats.

Disposez les options à l’aide de champs de texte, de cases à cocher ou de menus déroulant et ajoutez des variations avec des exemples d’images – incluez-les pour des produits individuels ou pour l’ensemble de votre catalogue.

Parfait pour : les commerces en ligne qui offrent des options supplémentaires comme l’emballage cadeau et le monogramme.

  • Si vous êtes une boutique de vêtement qui offre de la broderie, proposez à vos clients de personnaliser les vêtements
  • Si vous êtes une boutique qui propose des coussins, proposer les tailles, les types de tissus et les modèles en option.
  • Si vous vendez des bijoux, laissez vos clients choisir le message qu’ils souhaitent graver sur la pièce.
  • Si vous distribuez des produits à offrir, prévoyez des options d’emballage cadeau ou un mot de remerciement.
  • Si vous vendez des produits électroniques, autorisez les acheteurs à acheter une garantie protégeant leur article.
  • Si vous êtes une organisation à but non-lucratif, indiquez aux personnes qui vous soutiennent d’inclure un don dans leur achat de marchandises.

Vous pouvez choisir de faire payer chaque module complémentaire ou de proposer des personnalisations gratuites. C’est un moyen efficace de fournir aux acheteurs les options dont ils ont besoin.

Échantillons et photos des déclinaisons

Si votre produit présente des déclinaisons de couleurs ou de motifs, les acheteurs veulent les voir en action. L’extension Échantillons de déclinaisons et photos affiche les déclinaisons – styles, tailles, motifs, couleurs, etc. – avec une image ou un échantillon de couleur pour donner aux clients une meilleure idée de ce qu’ils achètent exactement et améliorer la présentation de vos pages de produits.

Parfait pour : les commerces en ligne avec des produits déclinables

  • Si vous vendez des T Shirt,  affichez vos couleurs en option.
  • Si vous vendez des lunettes, montrer à vos clients tous les modèles possibles.
  • Si vous vendez des bijoux, mettez en évidence les pendentifs parmi lesquels les clients peuvent choisir.
  • Si vous vendez des skateboards, incluez des images des modèles que vous proposez.

WooCommerce 360º Image

Avec Woocommerce 360° Image, vous pouvez ajouter à vos pages de produit des photos rotatives dynamiques à 360° de cette manière les acheteurs peuvent visualiser tous les détails de votre produit. Ajoutez un groupe d’images à une galerie de produits, et l’image présentée sera remplacée par une belle image à 360º que les clients peuvent faire pivoter pour voir tous les aspects du produit. Cette fonction est également totalement intuitive, de façon à ce que les acheteurs sur les appareils mobiles aient la même expérience.

Parfait pour : les commerces en ligne qui veulent donner aux clients la sensation qu’ils tiennent physiquement un produit.

  • Si vous vendez des meubles, les clients peuvent comprendre son style de tous les angles.
  • Si vous vendez des pièces automobiles, les clients peuvent examiner de plus près les détails qui les importent.
  • Si vous vendez des montres, les clients peuvent zoomer sur chaque nuance, gravures et caractéristiques.

Les vidéos de produit pour Woocommerce

Les vidéos sont d’excellents moyens d’exposer vos produits en action. Utiliser l’extension de Woocommerce pour ajouter des vidéos à votre galerie d’image de vos produits, ou simplement pour remplacer les images présentées par des vidéos. Télécharger les vidéos sur la bibliothèque de média de WordPress ou via des services tiers comme Vimeo ou Youtube.

Parfait pour : les commerces en ligne avec des produits qui rendent meilleurs lorsqu’ils sont montrés en action

  • Si vous vendez des outils électriques, faites une démonstration de la taille de l’outil et de son fonctionnement.
  • Si vous vendez des vêtements, montrez comment un article s’adapte à différents types de morphologie et comment ces pièces peuvent s’associer avec d’autres vêtements.
  • Si vous vendez des jouets, faites inclure des vidéos d’enfants jouant avec vos produits et des témoignages de parents satisfaits

Tableau des tailles pour WooCommerce

Si vous vendez des produits avec des tailles différentes, un tableau aide les clients à comprendre quel est l’article à acheter et permet de réduire le nombre de retours.

L’extension de Woocommerce permet d’ajouter des tableaux de tailles à vos pages de produit. Télécharger le vôtre, ou créez-le à partir de votre tableau de bord. Vous pouvez opter de déployer les tableaux dans la case description de votre produit ou seulement sous forme de pop-up.

Parfait pour : les commerces en ligne qui vendent des produits en plusieurs tailles.

  • Si vous vendez des T-shirts, ajoutez un tableau des tailles avec les mesures des épaules, de la poitrine et de la taille.
  • Si vous vendez des meubles, ajoutez un tableau des tailles avec les mesures de longueur, de hauteur et de profondeur.
  • Si vous vendez des autocollants, ajoutez un tableau des tailles avec les mesures de hauteur et de largeur.

Recommandations sur les produits

Les ventes directes et les ventes croisées sont des moyens efficaces d’augmenter la taille du panier des clients et vos ventes globales. Utilisez les recommandations de produits pour montrer aux clients ce qui les intéresse. Ajoutez des produits recommandés en fonction de ce qui est populaire, de ce qui est nouveau, de ce qui est en promotion, de ce qui complète un look, et plus encore. N’hésitez pas à les afficher en fonction de ce qui se trouve déjà dans le panier de votre client.

Parfait pour : les commerces en ligne qui ont plus d’un produit.

  • Si vous vendez des chaussures, recommandez des chaussettes et/ou lacets.
  • Si vous vendez des boucles d’oreilles, recommandez des bracelets et colliers de la même collection.
  • Si vous vendez des jouets, recommandez des puzzles similaires à celui que le client possède dans son panier.
  • Si vous vendez des plantes, recommandez d’autres variétés populaires ou des terreaux.

De simples changements CSS, pas d’extensions nécessaires.

Le CSS est un langage de codage qui contrôle la conception de votre site web, des polices aux couleurs en passant par la taille des boutons et de l’arrière-plan. Si vous avez des connaissances de base en CSS, naviguez vers Affichage → Personnalisez → CSS supplémentaire dans votre tableau de bord et apportez les modifications suivantes :

Modifier la taille de la police des titres de produits
Utilisez le code ci-dessous pour modifier la taille des titres de vos produits à 36px. Remplacez le “36” par le nombre que vous souhaitez.

.woocommerce div.product .product_title {

        font-size: 36px;

}

Changer la couleur des titres des produits
Un code hexadécimal est un code à six chiffres qui représente une couleur spécifique en ligne. Utilisez le code ci-dessous pour changer la couleur du titre de votre produit pour le code hexadécimal #FF5733. Remplacez le code hexadécimal par ce que vous voulez ; vous pouvez utiliser le sélecteur de couleurs HTML pour obtenir le code de la couleur de votre choix.

.woocommerce div.product .product_title {

        color: #FF5733;

}

Mettre en gras les étiquettes de déclinaison
Utilisez le code ci-dessous pour afficher vos titres de déclinaisons en gras.

.woocommerce div.product form.cart .variations label {

   font-weight: bold;

}

Mettre en italique les étiquettes de déclinaison
Utilisez le code ci-dessous pour mettre en italique les étiquettes de déclinaison.

.woocommerce div.product form.cart .variations label {

   font-style: italic;

}

Changez les couleurs du bouton “Acheter maintenant” :
Utilisez ce code pour modifier la couleur de fond de votre bouton “Acheter maintenant”. Là encore, utilisez le sélecteur de couleur HTML pour obtenir le code hexadécimal de la couleur que vous souhaitez utiliser.

.woocommerce div.product .button {

   background: #000000;

}

Commencez à personnaliser vos pages de produits
WooCommerce est synonyme de flexibilité et de personnalisation, c’est pourquoi il fournit tous les outils dont vous avez besoin pour modifier la conception et les fonctionnalités des pages de produits. En ajoutant des champs, des vidéos, des tableaux de tailles, etc., vos pages peuvent être aussi uniques que les produits qu’elles présentent.

Synchronisez votre WooCommerce avec votre gestion commerciale en temps réel avec le E-connecteur WooCommerce.

Source : https://woocommerce.com/posts/customize-product-page/