Lorsque vous lancez une boutique WooCommerce pour la première fois, vous vous concentrez probablement sur les éléments de base comme l’ajout de nouveaux produits, la configuration de votre panier et la rationalisation du processus de paiement. Cependant, la configuration d’un produit variable WooCommerce peut être un peu mystérieuse pour vous.

Ou, à tout le moins, ce n’est pas quelque chose qui est une priorité absolue. Mais lorsque vous rencontrez un produit avec de nombreuses variations, cela devient soudainement une question assez urgente.

Consultez notre guide vidéo sur la création d’un produit variable dans WooCommerce

Heureusement, l’ajout de variations de produits dans WooCommerce est simple et ne nécessite pas beaucoup de connaissances techniques. Mais si vous êtes nouveau sur la plateforme de commerce électronique, il est normal d’être un peu désorienté en naviguant dans vos options.

Nous voulons vous aider aujourd’hui. Nous allons couvrir ce que sont les produits variables, les différences entre les variables et les attributs, comment créer un produit variable WooCommerce, et comment mieux optimiser les variations de vos produits à l’aide d’extensions.

Commençons.

Qu’est-ce qu’un produit variable WooCommerce ?

Un produit variable WooCommerce peut être facilement défini comme un produit disponible en plusieurs types, styles ou variations différents. Des exemples de variations incluent des choses comme :

  • Couleur
  • Taille
  • Style
  • Matériaux

Ce n’est pas tout à fait la même chose qu’un filtre de produit dans WooCommerce. Même lorsque vous filtrez des produits, vous devez toujours sélectionner des variables.

Lorsqu’un client visite une page de produit avec des variables, il devra effectuer une sélection quelconque avant d’ajouter l’article à son panier. De nombreux types de boutiques et d’entreprises font usage de produits variables. Voici quelques exemples populaires :

  • Un magasin de vêtements qui propose des articles dans différentes tailles et options de couleur.
  • Une pizzeria qui permet aux clients de sélectionner des garnitures dans un menu déroulant ou de type case à cocher avant d’ajouter l’article au panier.
  • Un artiste qui vend des impressions personnalisées sur divers matériaux comme la toile ou le bois, dans plusieurs options de taille.
  • Un vendeur d’articles de maison a besoin que les clients sélectionnent les matériaux et/ou les tissus pour les articles de mobilier.

Et la liste continue. Pratiquement chaque type de boutique aura besoin de produits variables à un moment ou à un autre.

La bonne nouvelle est que WooCommerce peut créer des produits variables de manière intégrée. Et ce n’est pas si difficile à configurer. Mais avant de sauter dans le tutoriel étape par étape sur la façon de le faire, nous devons d’abord faire une distinction essentielle entre les variations et les attributs.

Attributs ou variations

La distinction la plus importante entre les variations et les attributs dans WooCommerce est que les variations peuvent être interagies par le client alors que les attributs ne le peuvent pas.

Tout d’abord, les attributs sont ce qui définit les variations. Ce sont les différents styles tels que la couleur, le motif, etc. Vous pouvez également trier par ces attributs dans WooCommerce. Mais ils sont simplement informatifs et ne sont accompagnés d’aucune fonctionnalité.

Les attributs sont également utilisés pour définir les caractéristiques d’un produit spécifique. Une page de produit pour un sac à main peut énumérer les dimensions, le tissu utilisé et le matériau de la poignée comme attributs. Ce sont des faits énoncés sur le produit – ses attributs – et le client ne peut pas faire de choix sur la base de ces attributs.

D’autre part, les variations mettent les attributs à profit par le biais de produits variables et permettent aux utilisateurs d’acheter des articles d’un certain attribut. Les variations couvrent également différentes combinaisons de ces attributs, ce qui peut créer des options de produit distinctes.

Par exemple, supposons que vous ayez des attributs de couleur et de logo pour un produit. Dans ce cas, ceux-ci peuvent être combinés en différentes variations, c’est-à-dire un chapeau avec un logo de dauphin bleu, un chapeau avec un logo vert de salamandre, et ainsi de suite.

Ce qu’il faut retenir, c’est qu’un client peut sélectionner des variations avant de passer à la caisse dans le cadre du processus de conversion, alors que les attributs ne le peuvent pas.

Cependant, il serait utile que vous ayez établi des attributs avant de mettre en place des variations. Mais avant que vous ne couriez dans les collines par pure confusion, ne vous inquiétez pas : le processus est assez simple.

Comment créer un produit variable WooCommerce

Nous en arrivons maintenant à la partie tutoriel de l’article. Avant de commencer, nous supposerons que vous avez déjà installé WooCommerce et que vous avez déjà ajouté quelques produits à votre boutique.

1. Créer des attributs de produit

Votre premier ordre du jour ici est de créer quelques attributs de produit. Vous pouvez aller dans Produits > Attributs dans le tableau de bord WordPress.

Ajout d'un nouvel attribut à WooCommerce.
Ajout d’un nouvel attribut à WooCommerce.

Dans cette section, vous pouvez créer un nouvel attribut pour votre boutique en ligne. Lorsqu’il est installé pour la première fois, un attribut par défaut « Color » est ajouté à WooCommerce.

Nous avons ajouté ici un attribut supplémentaire « Size » Il suffit de saisir le nom de l’attribut (Size), un slug associé (taille), puis de cliquer sur le bouton bleu Ajouter un attribut lorsque vous avez terminé.

Attributs dans WooCommerce.
Attributs dans WooCommerce.

À partir de là, vous pouvez cliquer sur le lien qui se lit Configurer les conditions à côté de l’attribut que vous venez de créer.

Ajout du terme Medium à l'attribut Size.
Ajout du terme Medium à l’attribut Size.

Dans cette section, vous pouvez ajouter autant de termes à associer à votre nouvel attribut. Pour « Size », nous avons ajouté le terme « Médium » ici. Le processus est le même que pour l’ajout d’attributs. Il suffit de saisir le nom (pour notre exemple, nous avons utilisé « Medium »), un slug (medium), et une description si vous le souhaitez. Lorsque vous avez terminé vos modifications, appuyez sur le bouton bleu Ajouter une nouvelle taille .

Ajout du terme « Green » à l'attribut « Color ».
Ajout du terme « Green » à l’attribut « Color ».

Nous avons également ajouté des termes supplémentaires pour l’attribut « Color ». Vous pouvez voir « Green » ci-dessus.

Vous pouvez ajouter autant d’attributs et de termes associés pour chacun que vous le souhaitez dans WooCommerce de cette manière. Les attributs et les termes ainsi que leur nombre dépendent du type de boutique que vous gérez et des types de produits que vous vendez.

2. Créer un produit WooCommerce variable

L’ordre du jour suivant est de créer une page de produit où vos attributs peuvent être appliqués. Pour ce faire, vous devez aller dans Produits > Ajouter.

Donnez un nom et une description à votre produit, ajoutez les images que vous souhaitez et modifiez-le comme bon vous semble. Ensuite, faites défiler la page jusqu’à la section Données du produit .

En haut, cliquez sur le menu déroulant et sélectionnez Produit variable.

Création d'un produit variable.
Création d’un produit variable.

Ensuite, vous pouvez remplir tous les détails pertinents sous l’onglet Général, comme le prix.

3. Assigner des attributs

Votre produit étant défini comme un produit variable, vous pouvez maintenant lui ajouter les attributs que vous avez créés précédemment. Cliquez sur l’onglet Attributs et sélectionnez l’un des attributs que vous avez créés. Cliquez ensuite sur le bouton Ajouter.

Une section appelée Valeur(s) apparaîtra, sous laquelle vous verrez tous les termes que vous avez assignés à cet attribut plus tôt. Sélectionnez les termes qui s’appliquent à ce produit particulier (ou cliquez sur Sélectionner tout si cela s’applique et est plus facile).

Assurez-vous que la case à côté de « Visible sur la page du produit » est cochée si vous voulez que ces attributs soient disponibles pour que vos clients puissent les sélectionner.

Et si vous souhaitez créer des variations à partir de ces attributs, cochez également la case à côté de « Utilisé pour les variations ».

Assigner des attributs à un produit.
Assigner des attributs à un produit.

Terminez cette section en cliquant sur Enregistrer les attributs.

4. Ajouter des variations

Votre dernière tâche ici est d’ajouter les variations elles-mêmes à votre page produit. Cliquez sur l’onglet Variations .

Ajout de variations dans WooCommerce.
Ajout de variations dans WooCommerce.

Dans cette section, vous devriez voir une liste déroulante qui dit Ajouter une variation. Cliquez sur le bouton à côté de celui-ci qui dit Go.

Un nouveau menu déroulant apparaît alors, dans lequel vous pouvez sélectionner les attributs qui s’appliquent à ce produit particulier. Sélectionnez tous les attributs qui s’appliquent au produit.

Sous chaque variation, vous pouvez également ajuster les réglages, comme la définition des prix pour chaque variation, un prix de vente, le numéro UGS, l’état des stocks, le poids et les dimensions. Toutefois, seul le prix est nécessaire.

Lorsque vous avez fini d’apporter des modifications à votre variation, cliquez sur le bouton bleu Enregistrer les modifications.

Vous pouvez ensuite répéter le processus pour toutes les autres variations que vous souhaitez créer.

Optimisation des variations de produits WooCommerce

Maintenant que vous savez ce que sont les produits variables et comment les créer dans WooCommerce, vous pouvez plonger un peu plus profondément dans la façon de les faire vraiment briller. Voici plusieurs options d’extension WooCommerce qui peuvent faire ressortir le meilleur de vos pages de produits et stimuler les conversions.

Consultez notre guide vidéo sur l’optimisation des variations de produits WooCommerce

1. Swatches

Variation Swatches
Variation Swatches

La première extension dont nous allons parler ici est Variation Swatches for WooCommerce. Elle offre un moyen simplifié et esthétique d’afficher les attributs et les variations des produits. Cette extension offre également de plus grandes options pour la façon dont les clients peuvent sélectionner ces options, sous la forme de blocs de couleurs, de libellés et d’images. Il s’agit d’une façon élégante d’afficher les variations de produits et élimine complètement le menu déroulant.

Ces options fonctionnent dans la vue rapide des produits ainsi que sur les pages de produits. Vous pouvez même sélectionner la forme des variations – arrondie ou circulaire. Parmi les autres fonctionnalités, citons les infobulles au survol et les capacités CSS personnalisées.

Variation Swatches for WooCommerce est gratuite.

2. Additional Variation Images

Additional Variation Images Gallery for WooCommerce.
Additional Variation Images Gallery for WooCommerce.

Ensuite, nous avons Additional Variation Images Gallery for WooCommerce, qui permet d’afficher plus d’une image pour les variations de produits. Par défaut, WooCommerce vous permet d’afficher une image par variation de produit, mais cette extension étend cela et vous permet d’afficher une galerie pour chaque variation.

Donner aux clients plus de vues de votre produit peut stimuler les ventes, après tout. Ainsi, lorsqu’un client passe d’une variation de produit à une autre sur une page de produit, il verra un ensemble différent d’images. Plus d’informations = une meilleure compréhension de ce que vous vendez. Et cela peut se traduire par une plus grande confiance dans votre marque.

L’extension Additional Variation Images Gallery for WooCommerce est gratuite.

3. Product Attribute Filter

Product Filter par WooBeWoo
Product Filter par WooBeWoo

Product Filter by WooBeWoo est une autre excellente option d’extension qui vaut le coup d’œil. Elle permet aux visiteurs de votre boutique en ligne de trier vos produits selon une plus grande variété de facteurs, notamment la catégorie, les étiquettes, la taxonomie, le prix et les attributs.

Les principales fonctionnalités incluses ici sont le filtrage par n’importe quel critère comme le statut en vente, l’évaluation ou le fait que l’article soit en stock ou non. Il vous permet également d’afficher des filtres sur l’interface publique de votre site web en utilisant plusieurs options, notamment un menu déroulant, une liste de cases à cocher, une liste de boutons radio et des icônes. Elle prend également en charge la recherche en direct AJAX et fonctionne avec Elementor.

Product Filter by WooBeWoo est gratuite.

4. Customize Product Feed

Product Feed PRO
Product Feed PRO

Une autre extension à vérifier est Product Feed PRO, qui permet de créer des flux de produits à des fins de marketing. Avec lui, vous pouvez créer un nombre illimité de produits et de flux en utilisant plus de 100 modèles différents pour divers lieux de marketing en ligne. Elle inclut un support pour Google Shopping, Facebook Remarketing, Pricerunner, Bing Ads, Skroutz, etc.

Les autres fonctionnalités comprennent le mappage des champs, le mappage des catégories, le filtrage et la prise en charge des variables de produits. Vous pouvez également utiliser cette extension pour ajouter un pixel Facebook à votre site, un pixel Google Dynamic Remarketing et une API de conversion Facebook.

Product Feed PRO est gratuite.

5. Add More Product Options

Add More Product Options
Add More Product Options

Si vous avez besoin d’afficher encore plus d’options sur chaque produit, Extra Product Options for WooCommerce est un excellent choix. Il vous permet d’ajouter des champs de produits personnalisés à vos pages de produits en toute simplicité. Au lieu de créer vous-même des mises en page personnalisées ou de travailler dans l’éditeur de page produit standard, cette extension ajoute des champs avancés à la page produit, vous permettant ainsi de créer des pages qui répondent vraiment aux besoins de vos clients.

Ce plugin est livré avec 17 champs personnalisés différents à utiliser, y compris le texte, le mot de passe, caché, l’e-mail, le numéro, l’URL, le téléphone, la zone de texte, la sélection, les boutons radio, la case à cocher, le curseur de groupe de cases à cocher, le sélecteur de date, le sélecteur de couleur, le titre et le paragraphe.

L’extension Extra Product Options for WooCommerce est gratuite. Il existe également une option premium qui ajoute 7 options de produit supplémentaires, notamment le sélecteur de temps, le HTML, la palette de couleurs, le téléversement de fichiers, la sélection multiple, le sélecteur de données et de plages de temps, et le groupe d’images. La version premium coûte 39 $ pour une licence pour un seul site.

6. Add Dynamic Pricing for Variations

Add Dynamic Pricing for Variations
Add Dynamic Pricing for Variations

L’extension Advanced Dynamic Pricing a également sa place chez de nombreux vendeurs. Elle fonctionne en ajoutant des fonctions de tarification dynamique ou de remise à votre boutique WooCommerce avec la possibilité d’activer et de désactiver ces règles quand vous le souhaitez.

Vous pouvez définir des montants en dollars, des pourcentages et des produits fixes pour des produits individuels ou des groupes de produits. D’autres fonctionnalités incluent la tarification en gros et les prix basés sur les rôles. Ainsi, vous pouvez définir une remise pour les produits d’une catégorie entière, et mettre en place des offres spéciales où si un client achète un certain nombre d’articles, il obtient un pourcentage de remise ou établit des offres BOGO.

Les options sont assez flexibles et vous permettent d’être créatif avec vos prix et vos ventes. Advanced Dynamic Pricing for WooCommerce est gratuite, mais il existe une version premium disponible avec des règles et des fonctionnalités supplémentaires. La tarification premium commence à 50 $ par an.

7. Display Variations in a Table

Display Variations in a Table
Display Variations in a Table

L’extension Product Variations Table for WooCommerce est un autre outil solide à avoir sous la main, surtout si vous vendez des produits avec des variations complexes et simultanées. Les clients peuvent utiliser cette extension en filtrant et en triant les variations sur chaque page de produit.

Elle fonctionne en vous permettant d’afficher les variations de produits sous la forme d’un tableau avec lequel les clients peuvent interagir via des fonctions de tri et de filtrage Ajax. Les clients peuvent même rechercher des produits par variation dans ce format de tableau. Et il inclut des boutons Ajouter au panier à côté de chaque article du tableau, ce qui améliore les chances de conversion. Les clients peuvent même exporter les informations sur les variations dans des fichiers téléchargés au format PDF, Excel ou CSV.

Tous les tableaux que vous créez peuvent être personnalisés pour correspondre à l’image de marque de votre boutique et comprennent un code court pour une application facile. L’extension Product Variations Table for WooCommerce coûte 49 $ par an.

8. YITH WooCommerce Color and Label Variations

YITH WooCommerce Color and Label Variations
YITH WooCommerce Color and Label Variations

Enfin, il y a YITH WooCommerce Color and Label Variations, qui offre un moyen facile d’afficher des options de produits sur vos pages de produits. Et il le fait d’une manière attrayante qui est conçue pour convertir plus efficacement.

L’idée ici est de mettre toutes les options de vos produits à portée de main de vos clients pour qu’ils sachent exactement quelles options ils ont et ce qui est disponible pour eux. Chaque variation de produit peut être affichée au moyen d’icônes ou d’images personnalisées de votre choix.

YITH WooCommerce Color and Label Variations est une offre premium et son prix est de 89,99 $ par an.

Résumé

Et voilà, vous l’avez. Créer des produits variables dans WooCommerce n’est plus si intimidant maintenant, n’est-ce pas ? Une fois que vous avez bien compris ce que sont les variables et comment elles fonctionnent, vous pouvez les créer avec une relative facilité.

Aujourd’hui, nous avons abordé ce que sont les produits variables et comment ils fonctionnent. Nous avons parlé des différences entre les variations et les attributs, et de la façon dont vous pouvez créer un produit variable et ses attributs associés.

Nous avons compilé quelques extensions qui améliorent les caractéristiques des produits variables en termes de forme et de fonction. Il y en a pour tous les goûts ici. Nous espérons que vous pouvez maintenant créer des produits variables et les faire fonctionner pour votre boutique en ligne.

Et si vous avez besoin de plus de conseils pour stimuler les ventes de WooCommerce, nous avons un guide complet pour cela.

Salman Ravoof

Salman Ravoof is a self-taught web developer, writer, creator, and a huge admirer of Free and Open Source Software (FOSS). Besides tech, he's excited by science, philosophy, photography, arts, cats, and food. Learn more about him on his website, and connect with Salman on Twitter.