Web Analytics
/ Accueil / English
WooCommerce - produit variable

Guide WooCommerce : comment créer un produit variable

Vidéo WooCommerce sur les produits variables
Voir cet article en vidéo

Deuxième partie de notre guide pratique

Un produit variable WooCommerce permet de proposer aux clients un ensemble de variations d’un produit. Il est possible de faire varier le prix, le stock, la photo, ainsi que les différents attributs. Un attribut dans WooCommerce est en fait une option. Si par exemple vous vendez des t-shirt, un attribut sera la taille (petite, moyenne, grande, etc.) ou bien la couleur (rouge, bleu, vert, etc.).

Voici un exemple du produit variable que nous allons créer. Comme nous sommes au Québec, nous allons proposer des glaçons (!) avec deux attributs: le nombre et la couleur :

Exemple d'un produit variable sur un site WooCommerce.

Création des attributs

Nous allons créer les deux attributs Nombre et Couleur. Se rendre dans le menu Produits / Attributs puis mettre le nom de l’attribut dans le champ Nom. Il n’est pas nécessaire de remplir le champ identifiant.

Valider en cliquant sur Ajouter un produit :

WooCommerce attributs

Les deux attributs s’affichent maintenant sur la droite de l’écran.

Création des termes

Les termes sont les options des attributs. Pour l’attribut Couleur, ce sera Noir & blanc et Couleur. Pour l’attribut Nombre, ce sera Un, Deux et Trois.

Cliquer sur Configurer les termes :

WooCommerce attributs
Cliquer pour agrandir
WooCommerce termes

Maintenant que les termes sont écrits, ils s’affichent à coté des attributs. Les termes de l’attribut Nombre ne sont pas ordonnés :

WooCommerce attributs et termes

Voici comment les ordonner :

WooCommerce terme ordre

Les attributs et les termes sont maintenant créés. Voyons maintenant comment les insérer dans un produit.

Configurer les attributs dans un produit variable sur WooCommerce

Dans la fiche produit, sélectionner l’option Produit variable puis dans le menu Attributs, ajouter les attributs en suivant les exemples des animations ci-dessous.

Ajout de l’attribut Couleur :

Configurer les attributs dans un produit variable sur WooCommerce - ajout attribut couleur

Ajout de l’attribut Nombre :

Configurer les attributs dans un produit variable sur WooCommerce - ajout attribut nombre

La case Visible sur la page produit permet d’afficher les attributs dans la fiche produit comme vous pouvez le voir sur la capture ci-dessous :

WooCommerce fiche produit attributs
Cliquer pour agrandir

Mise en place des variations dans la fiche du produit

Maintenant que les attributs sont définis pour ce produit, il faut configurer les variations. Pour cela, on va dans le menu Variations, et nous ajoutons toutes les variations en sélectionnant l’option Créer les variations pour tous les attributs.

Automatiquement, cela va créer les 6 variations de produits, (les 3 nombres x les 2 couleurs) :

WooCommerce variations
Ajout des variations au produit

Maintenant, les deux variations s’affichent sur la page du produit du site :

Guide WooCommerce

Modifier les options pour chaque variation

Pour chaque variation, on va pouvoir ajouter une photo, un prix, un poids, des dimensions, etc. Il faut développer chaque écran en cliquant sur la petite flèche comme indiqué dans la capture ci-dessous :

Guide WooCommerce

L’écran ci-dessous apparaît. Pour ajouter une photo, il faut cliquer sur la petite icône bleue. Ensuite vous pouvez ajuster les tarifs, l’état du stock, le poids, les dimensions, etc. :

Guide WooCommerce

Une fois que tout est complet, on enregistre en cliquant sur le gros bouton bleu Enregistrer les changements.

Image produit par défaut

Pour finir, il est possible d’ajouter une image par défaut pour le produit. C’est celle qui s’affichera si aucune variation n’est sélectionnée. Pour cela il faut ajouter une Image produit en cliquant sur Définir une image produit dans la partie droite de l’écran.

Guide WooCommerce

Prochain article

Dans notre prochain article, nous vous expliquerons comment installer et configurer WooCommerce.

Cliquez ici pour lire le premier article de cette série.

Cliquez ici pour lire le troisième article de cette série.

Foire aux questions (FAQ) sur les produits variables dans WooCommerce

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

Un produit variable permet d’offrir plusieurs options pour un même produit, comme différentes tailles, couleurs ou formats. Chaque combinaison (variation) peut avoir son propre prix, inventaire, image, etc.

Quelle est la différence entre un attribut et une variation ?

Un attribut est une caractéristique (comme la couleur ou la taille), tandis qu’une variation est une combinaison d’attributs (ex. : T-shirt rouge, taille moyenne). Les variations sont ce que les clients sélectionnent avant d’ajouter un produit au panier.

Est-ce possible de définir un prix différent pour chaque variation ?

Oui, WooCommerce permet d’assigner un prix spécifique à chaque variation d’un produit, ainsi que d’autres détails comme le poids, les dimensions et l’image.

Dois-je créer manuellement chaque variation ?

Non. WooCommerce propose une option automatique pour générer toutes les combinaisons possibles à partir des attributs. Une fois créées, tu peux modifier chaque variation individuellement.

Pourquoi ajouter une image par défaut à un produit variable ?

L’image par défaut s’affiche avant qu’un client ne sélectionne une variation. Cela donne une apparence plus professionnelle à la fiche produit et permet de mettre en valeur le produit dans la boutique.

Auteur.e de l'article

Gilles Duquerroy

Flexocodeur
Gilles, c’est d’abord et avant tout un parcours hors du commun. Passionné par les ordinateurs depuis sa plus tendre enfance, il devient professeur de technologies et part enseigner dans divers lycées français d’Afrique pendant plus de 15 ans. Autodidacte, il commence à créer des sites Web dès qu’intervient la démocratisation d’internet. En 2013, après avoir complété sa formation universitaire au Conservatoire National des Arts et Métiers d’Amiens, en France, il décide de se consacrer à ses premières amours : les langages de programmation Web!

À découvrir sur notre blogue

2017-11-01

Votre entreprise sur Facebook : 4 raisons de vous abstenir

David Barbier / Shaman programmeur

Avant de vous lancer sur Facebook et commencer à construire une communauté autour de votre entreprise, vous devriez considérer les 5 points suivants.

Lire la suite
2024-06-27

Créer des pages sur Shopify : guide étape par étape

Marie-Michel Tremblay / Intégratrice Web, Graphiste

Cette vidéo vous fournira les connaissances nécessaires pour créer des pages attrayantes et fonctionnelles sur Shopify.

Lire la suite
2017-05-09

Les étapes de pré-production d’une interface Web

Marie-Michel Tremblay / Intégratrice Web, Graphiste

Avant d’effectuer la création de l’interface d’un site Web, vous devez faire une analyse du projet. Voici la liste des étapes à suivre.

Lire la suite
2021-03-04

Le SEO (optimisation organique) pour un site Web d’organisme sans but lucratif, OSBL ou OBNL

Roger Guévremont / Spécialiste marketing (SEO) et rédacteur Web

Les organismes ou associations à but non lucratif devraient utiliser le SEO de façon régulière pour communiquer leurs messages efficacement.

Lire la suite

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

The reCAPTCHA verification period has expired. Please reload the page.

17 commentaires pour “Guide WooCommerce : comment créer un produit variable”

  1. […] Cliquez ici pour lire le deuxième article de cette série. […]

  2. Denis dit:

    Pourquoi lorsque je défini une image produit, les images de variations n’apparaissent plus? Si j’enlève l’image produit, les variations affichent chacune leur image mais je n’ai plus d’image dans la grille de produits. Merci .

    1. Bonjour,
      Ce n’est pas normal, l’image produit sert d’image par défaut tandis que l’image de variation c’et quand on choisit la variation. Si voulez qu’on vérifie votre site veuillez nous envoyé les accès et l’adresse de votre site à info@wenovio.com et nous estimerons le travaille à faire.

  3. Julie dit:

    Bonjour Vincent , je suis tombée sur votre acticle et je me demandais, mon site est en fontion depuis 2 ans et des listes de variation pour moi semble compliqué alors je me demandais si c’était facile de le faire avec des cases choix de couleur. Je vend des pompons de fourrure, en duo , alors le premier pompon de couleur X et le deuxieme de couleur X mais j’ai 25 couleurs par produit. Un peu du style en boutique de vêtement; S,M.L,XL . Les clients click sur la case S , moi je voudrais des couleurs dans ces case 😉 Je me suis dégourdie à date pour faire 2 choix en attributs ensuite : couluer 1 , couleur2 . Merci de vos conseils à l’avance 😉

    1. Bonjour Julie,
      Oui c’est assez simple à mettre en place il suffit d’ajouter une extension qui ajoute les champs, voici un exemple d’extension parmi tant d’autre https://fr-ca.wordpress.org/plugins/woo-custom-product-addons/

  4. Bonjour, merci pour ce tuto
    Savez vous s’il est possible d’avoir un style de variation comme ceci

    Exemple:
    Variation Pull cachemire avec choix Couleur 1/2/3
    Et une variation en dessous Pull laine sans choix de couleur…

    Merci à vous 😉

    1. Bonjour,
      Non il faudrait que ce soit deux produits différent autrement il faut prendre une extension pour créer des options sur un produits simple.

  5. alexis dit:

    Bonjour, pouvez vous me dire pourquoi après avoir créé une variable d’un produit (par exemple une taille), on peut sélectionner cette variable (en option) sur la fiche produit mais elle n’apparait pas dans le panier. En effet, cela est plutot génant pour être sur d’un client commander la bonne taille et aussi pour que je puisse connaitre la taille à envoyer par la suite. merci

    1. Bonjour, normalement les attributs sont dans le panier. Dans le panier il y a le titre du produit ensuite un tiret et les variations séparées par des virgules. Si ce n’est pas le cas, c’est peut-être dû à une fonction filtre qui modifie le texte affiché, la fonction est peut-être dans le thème ou dans une extension.

  6. Kambro dit:

    Merci pour cet article.
    Je n’ai pas chez moi le menu déroulant : « Type » (Détermine la manière de sélectionner les attributs des produits)
    Y a-t-il moyen d’enregistrer une série d’attributs « simples » afin de gagner du temps lors de l’entrée de chaque nouveau produit. Par « simple » j’entends des détails du produits (éditeur, traducteur, illustrateur, ISBN, nombre de pages, etc) que nous retrouvons sur chacun des produits de notre librairie mais qui ne sont pas des variables.
    Par défaut, Woocommerce ne propose que les dimensions et le poids.

    Je vous remercie d’avance.

    1. Bonjour Kambro,
      Oui c’est possible d’avoir des attributs simples, il suffit d’aller dans le menu produits et sous-menu attributs pour ensuite ajouter un attribut et ses choix de valeur. Ensuite dans l’ajout ou l’édition du produit il suffit d’ajouté l’attribut et sa valeur dans l’onglet attribut, mais si c’est un attribut simple il suffit de ne pas l’ajoutez dans l’onglet variable juste dans attribut. Il est aussi possible d’ajouter des champs personnalisés avec une extension.

  7. Anaïs dit:

    Bonjour,
    Le petit menu déroulant ne s’affiche pas pour sélectionner “produit variable” seriez vous me dire pourquoi ?

    Merci à vous !

    1. Bonjour Anaïs,

      Si tout est à jour (WordPress, thème, extension et version de PHP), essayez de sauvegarder à nouveau les permaliens dans le menu Réglages/Permaliens. Ensuite, sauvegardez de nouveau.

      Si pas tous à jour, mais WordPress l’est, ajoutez l’extension suivante qui règle des soucis de compatibilité. Depuis la version 5.5 de WordPress, jQuery migrate, qui est encore utilisé par beaucoup d’extensions et thèmes, a été supprimé.

      https://fr-ca.wordpress.org/plugins/enable-jquery-migrate-helper/

      Si aucune de ces options ne fonctionne, il faudrait regarder dans le menu WooCommerce/État pour voir s’il y des problèmes.

  8. diane dit:

    Merci beaucoup pour l’article. Y a t il une facon simple et automatique pour configurer des prix différents lorsque l’on a par exemple trois attributs et au moins 10 variations par attributs… manuellement ca devient vite ingérable. Autrement dit: chaque variation fait varier mon prix et je cherche une facon simple de configurer tout ca.

    1. Bonjour,
      Avec WooCommerce seulement ce n’est pas possible, il existe peut-être une extension pour le faire, mais je ne la connais pas. Vous pouvez par contre changez le prix pour tous d’un seul coup avec le menu déroulant en haut add variation, il suffit de choisir Set regular price et de rajouté un prix.
      Néanmoins je sais que vous pouvez créer un produit simple et y ajouter une extension pour ajouter des options aux produits et les options seraient payantes avec des prix différents par options.

  9. Serge-Jérôme dit:

    Merci beaucoup pour votre article.