07 Nov 2022
Création d'un produit variable sur Woocommerce

Produit variable Woocommerce

Aujourd’hui nous allons voir comment créer un produit variable avec Woocommerce, la solution e-commerce sous le CMS WordPress. Il est indispensable pour un site e-commerce de proposer des produits simples et d’autres avec des variations qui permettent au client de choisir une déclinaison du produit proposé.

En vidéo : créer des attributs et des variations sur Woocommerce

J’ai réalisé un tutoriel Woocommerce en Français sur Youtube concernant les produits variables. Si vous préférez suivre mes recommandations en vidéo, je vous invite à regarder la vidéo ci-dessous et vous pouvez vous abonner à ma chaîne Youtube.

Qu’est ce qu’un produit variable ?

Pour les habitués de Prestashop nous pouvons appeler cela une déclinaison, sinon, c’est tout simplement un produit qui a plusieurs options (taille, couleurs…).

Cependant sur Woocommerce, nous appelons cela un produit variable. Il dispose de plusieurs variations qui sont rattachées à des attributs spécifiques.

Il faut dans un premier temps créer des attributs qui vont nous servir à générer des variations de produits.

Une variation est égale à un produit puisqu’il dispose de son propre prix, image, référence…

Par exemple, un t-shirt rouge en taille M dispose de 2 attributs. Une couleur rouge et une taille M. Les 2 ensembles sont égales à une variation.

Cet article a été réaliser avec la Version 2.2.8 de Woocommerce mais c’est toujours le même principe en 2022 avec la version 7.0.1 et plus.

Création d’un produit variable avec Woocommerce

Si vous souhaitez suivre ce tutoriel WordPress en vidéo, je vous invite à descendre en bas de cette page pour voir ma vidéo Youtube.

Ajouter un produit sur Woocommerce
On commence par créer un nouvel article depuis le menu “produits” dans votre administration WordPress.

Produit variable dans les données de Woocommerce
Sur votre produit, dans la section “Données produit“, par défaut il y a “produit simple“, choisissez “Produit Variable“.

Ajouter des attributs à un produit Woocommerce
Ensuite rendez-vous dans l’onglet attributs de la section “Données produit” et faites “Ajouter”.

Utiliser les attributs pour les variations Woocommerce
Ici vous devez donner un titre à vos attributs, pour exemple j’ai mis taille. Ensuite il faut rentrer vos valeurs. Attention il faut séparer vaut valeurs avec un pipe (|).
Petite astuce pour faire un pipe : Mac -> shift + alt + L | Pc -> AltGr + 6 (du pavé principal).
Une fois les valeurs écrites, sélectionnez “Utiliser pour les variations” et faîtes “Sauvegarder les attributs”.

Lier les variations d'un produit Woocommerce
Maintenant dans l’onglet variations, par défaut les valeurs sélectionnées sont vos attributs. Vous pouvez faire “Lier toutes les variations“. Vous allez avoir un pop-up de votre navigateur web qui indique “Êtes-vous sur de vouloir lier toutes les variations ? …” faites valider.

Modifier le prix d'un produit variable Woocommerce
Maintenant vos variations sont créées, il ne vous reste plus qu’à remplir le prix et le stock pour le voir afficher en front office. Ensuite vous pouvez personnaliser chaque variations (image, prix, poids etc)

Exemple d'un produit variable Woocommerce
Voilà le résultat 🙂

Cela ne fonctionne pas ? Vous avez un message du type : “désolé le produit n’est pas disponible” ?

Essayez de :

  • De mettre des quantités à votre produit et votre variation, cependant il faut activer la gestion des stocks
  • Mettre un prix à la variation sinon le processus d’achat ne fonctionnera pas
  • Vérifiez si vous n’avez pas une erreur javascript avec l’inspecteur d’éléments de votre navigateur

Comment trier les produits Woocommerce ?

Depuis votre menu Produits dans le back-office, vous pouvez effectuer un tri pour vous permettre de visualiser ce que vous souhaitez.

Une fois dans l’onglet, sélectionner “tous” ou trier et utilisez le système de filtre en dessous pour trouver votre bonheur.

Utilisez le filtre “Filtrer par type de produit” pour sélectionner les produits variables, cliquez ensuite sur le bouton filtrer. Maintenant vous allez avoir un affichage avec uniquement les produits qui comportent des variations.

Afficher les couleurs des attributs sur les produits Woocommerce

Pour aller plus loin dans la présentation de vos produits, vous pouvez personnaliser vos labels et mettre des icônes aux variations (par exemple, des blocs couleurs) avec le module  YITH WooCommerce Color and Label Variations.

Afficher les couleurs des variations sur une fiche produit

Il dispose d’une version gratuite. La version premium va offrir beaucoup de choix et d’éléments de personnalisation pour vos produits variables. Vous pouvez notamment importer vos propres images sur chaque attribut.

Importer en masse les produits variables sur Woocommerce

Si vous avez compris le système de création, vous pouvez donc continuer et créez de nombreux produits sur votre e-shop.

Cependant vous pouvez avoir une problématique de temps si vous devez importer plusieurs centaines de produits ou juste énormément de variations.

Effectivement, en créant tout ça via le back-office, vous allez passer pas mal de temps sur vos produits. Il existe cependant un moyen plus rapide.

Vous pouvez créer un fichier CSV pour importer vos produits variables sur Woocommerce.
J’ai réalisé une vidéo sur ce sujet, avec des produits simples et des explications ceux avec variations.
Je mets aussi à disposition sous la vidéo, des fichiers à importer dans votre Woocommerce.

Fichier import simple produit Woocommerce (5462 téléchargements )
Fichiers Import Woocommerce (6095 téléchargements )

Vous souhaitez personnaliser un peu plus votre boutique en ligne ?

La création de vos produits est primordiale pour votre boutique. Vous devez présenter au mieux votre offre pour informer et convertir au mieux vos visiteurs et acheteur.

Il ne faut pas négliger le reste de votre boutique, avec quelques astuces, vous pouvez faire d’importantes modifications sur votre plugin Woocommerce.

Je vous invite à lire un de mes articles blog avec beaucoup de conseils sur ce sujet. Il est aussi disponible en vidéo, voici donc l’article : Personnaliser facilement Woocommerce avec n’importe quel thème

Vous avez besoin d’aide pour la création de vos variations ?

– Création d’un produit variable
– Correction d’un problème d’affichage
– Correction d’un bug fonctionnel

Vous pouvez commander un ticket d’intervention Woocommerce pour que j’intervienne directement sur votre site.

Hébergement spécialisé WordPress chez Hostinger