Créer des Attributs et Variations à un Produit sur WooCommerce

Quand il s’agit d’ajouter un produit à sa boutique WooCommerce, il est courant d’avoir besoin de décliner un produit en fonction de plusieurs critères. Il faudra par exemple sur une page produit unique, mettre à disposition un vêtement de tailles différentes ou de couleurs différentes. De la même manière, l’utilisateur pourra avoir besoin de proposer un livre dans deux formats différents, à savoir au format numérique ou au format papier. Via WooCommerce, la bonne nouvelle est qu’il est possible de bénéficier de cette possibilité de décliner un même produit sur plusieurs critères, le tout sur la page unique du produit. Cependant, si toutefois l’ajout d’une fiche produit est facilitée, l’ajout de ce type de déclinaisons est relativement plus compliquée. Nécessitant une configuration qui peut parfois sembler anxiogène. C’est pourquoi aujourd’hui, je vous propose un tutoriel pour découvrir comment ajouter  ces critères à un produit. Afin d’obtenir sur votre fiche produit un menu déroulant qui permettra au futur client de choisir sous quelle couleur, taille ou autre critère de votre choix, il souhaitera obtenir son produit.

Comprendre le vocabulaire WooCommerce

La première chose à faire est de comprendre le vocabulaire utilisé par et pour WooCommerce par rapport au langage courant. Dans le cas présent, quand il est question de décliner un produit selon sa taille ou encore son format, sur Woocommerce, on parlera d’Attribut. Ensuite, quand il sera question de lister les différentes tailles ou format dans le langage courant, on parlera alors de Variation dans WooCommerce.  D’où le besoin d’aller créer d’abord un Attribut dans l’outil de vente, afin d’indiquer à WooCommerce qu’on souhaite donner des tailles ou formats à un produit. Enfin, une fois notre attribut créé, il nous faudra créer des variations dans l’outil, afin que celui-ci liste chaque détail de notre critère (chaque taille du vêtement : S, M, L, XL… ou encore, chaque format d’un livre : Papier ou numérique…)

Comment Créer un Attribut pour un produit WooCommerce ?

Pour créer un Attribut, rendez-vous sur la partie Produits de WooCommerce comme suit via le menu latéral à gauche : Une fois sur cet espace, il restera simplement à créer l’attribut en question. Voici un exemple d’attribut, toujours pour un objet qui serait disponible avec différentes tailles : Il suffit enfin une fois l’attribut créé et son identifiant saisi, de cliquer sur Ajouter un Attribut pour en valider la création. Une fois l’attribut existant, reste alors à cliquer sur celui-ci dans la liste des attributs, pour aller créer les déclinaisons de cet attribut. Pour les tailles d’un vêtement, on pourrait donc avoir par exemple : S, M, L, XL et ainsi de suite… Dans le cas présent, je vais saisir des dimensions pour un site de vente de plantes dont l’attribut serait le diamètre du pot :) On constate d’ailleurs lors de la saisie de ce critère, qu’on peut associer une description à ce critère, ce que je fais ci-dessous dans notre exemple : Afin de rendre pertinente ma création de critère pour cet attribut, je fais de même avec d’autres dimensions/Diamètres, de manière à obtenir ce qui suit : Vous l’aurez compris, l’idée est de permettre à l’internaute et potentiel client de pouvoir choisir la dimension du pot de la plante sans qu’il change de page. Ce critère (ou en l’occurrence cette taille) pourrait alors être sélectionné par l’internaute via un menu déroulant. Concernant Woocommerce, afin d’activer cette fonctionnalité pour un produit, plusieurs produits ou tous les produits, il faudra alors indiquer sur chaque produit concerné, que celui-ci sera disponible sous différents aspects. Qu’il s’agisse de tailles différentes ou encore d’éventuelles différences de format. Pour cela, il convient d’indiquer sur la fiche Produit que ce produit n’est pas simple, mais variable.

Passer un Produit Woocommerce en Produit Variable

Rendez-vous sur votre page produit puis descendez jusqu’à la partie Données Produit de votre page Produit. Tout en haut et en face du titre de cette partie, vous avez un menu déroulant, qui affiche par défaut : Produit simple. En l’occurrence, afin de permettre à votre produit de se décliner sur un critère comme une taille ou un format, il vous suffira de le passer de Produit Simple à Produit Variable, exactement comme suit via le menu déroulant : Ensuite, rendez-vous à gauche sur Attributs, comme suit dans la capture : Puis cliquez sur le bouton AJOUTER, de manière à obtenir ce qui suit en sélectionnant l’attribut préalablement créé, puis enregistrez votre ou vos attributs. Dans notre exemple, nous ne prenons qu’un seul attribut qui est la taille : Votre attribut étant ajouté à votre produits, il va falloir lui associer différents détails, comme par exemple, sa disponibilité dans les tailles existantes. Si votre produit est disponible dans toutes les tailles existantes et préalablement saisies, alors on les ajoutera toutes. Si le produit n’est dispo qu’en 1 ou 2 critères, on ne choisira que les critères concernés, comme suit pour une plante dispo dans toutes les largeur de pots : Si vous souhaitez que cette information et déclinaison soit affichée sur la page produit, alors cochez la case concernée nommée ici : Visible sur la page produit. Enfin, si par exemple vous souhaitez que chaque taille soit associée à un prix différent, il nous faudra alors procéder à une énième saisie. Auquel cas, cochez immédiatement : Utilisé pour les variations. Enfin, rendez-vous sur l’onglet juste en dessous d’Attributs, à savoir Variations. Une fois sur Variations, nous allons procéder à la configuration de chacune d’entre elles.

Comme par exemple, associer un prix pour la plante disponible à la taille de pot de 5 cm et ainsi de suite. Attention, pour obtenir et pouvoir configurer les détails de vos variations, il faut bien que soit cochée la case Utilisé pour les variations dans l’onglet précédant, à savoir Attributs. Dans le cas présent, je veux que mon produit soit disponible dans les 3 tailles et je veux un prix différent pour chaque taille. Aussi je sélectionne ce qui suit : Créer les variations pour tous les attributs : Enfin je clique sur le Bouton Aller qui va faire apparaître mes 3 tailles différentes relatives à mon Attribut « TAILLE » : Je vais ainsi pouvoir procéder à la configuration de chacun de mes Variations.

Configurer une Variation pour un Produit Woocommerce

Classer mes Variations

Je vais commencer par trier et mettre dans l’ordre mes variations car je souhaite que dans le menu déroulant de ma page produit, les tailles apparaissent dans l’ordre croissant, soit de la plus petite taille à la plus grande. Aussi, au survol de chaque ligne de variation à droite, je vais avoir une petite icône et un commentaire qui m’indiqueront qu’en drag & drop ou en glisser déposer, je pourrait classer en montant ou descendant, chacune de mes variations : Le piège ;) Hélas, cela ne les classe que dans la partie back office de woocommerce. Cela ne sera pas visible sur la page produit ! C’est n’est pas fluide il faut bien le reconnaître.

Pour classer votre variation, il vous faudra vous vous rendre à nouveau dans le menu latéral sur Attributs puis à cliquer sur votre attribut de manière à avoir votre liste de variations. Là, au survol de vos variations (dans le cas présent les tailles, à droite) vous verrez l’icône ci-dessous qui vous permettra lors de sa glisse à l’aide du curseur souris, de déplacer la variation vers le haut ou le bas :

Configurer mes variations

Ensuite, je vais aller déterminer chaque détail de mes 3 variations. Je commence en dépliant la variation pour la taille 5 cm. Dans le cas présent, la saisie est minimaliste car ce critère différenciant est relativement simple : On peut voir dans la capture ci-dessous que le critère important pour ma variation est le prix. Prix fixé à 2 euros pour notre exemple du pot de 5 cm de diamètre. Il sera bien entendu possible d’étendre au maximum le détail de la variation avec la saisie du poids et de chaque dimension… Je fais de même pour mes 2 autres variations, en saisissant pour chacune d’elle, d’autres prix (par exemple 4 euros pour le pot de 8 cm et 6 euros pour le pot de 12 cm…). Puis j’enregistre bien mes saisies en cliquant sur le bouton Enregistrer les changements.

Vérifier la configuration de mon attribut avec variations en frontal

Enfin, je mets à jour ma fiche produit et vais vérifier en frontal sur la page produit si les modifications sont bien prises en compte et donc visibles. Si elles sont bien visibles, j’en profite pour choisir chacune d’entre elles, tour à tour, afin de m’assurer que le Prix change bien en fonction de la taille choisie : Et là ouf :) Mes tailles sont d’abord bien présentes mais également bien affichées dans l’ordre croissant attendu. Quant aux prix, ils changent bien en fonction de chaque taille et donc variation choisie ! J’étends le test avec ajout au panier et vérifie dans le panier : On distingue bien le détail de la variation : 5 cm. Le tarif quant à lui est toujours cohérent pour mon produit fictif et sa taille prédéfinie. Bref, tout fonctionne bien comme attendu, pour un cas très simple d’un attribut unique avec 3 variations.

Vous savez désormais comment ajouter un critère de choix qui pourra s’afficher sur votre page produit via un menu déroulant.

Ici, il était question d’exemples basiques comme la taille d’un produit ou encore son format. Cependant, cela peut-être valable pour toutes sortes de détails, comme la matière d’un produit, une version… L’important est de retenir que si vous souhaitez notamment conditionner le prix d’un produit en fonction d’une variation, c’est possible !

Inutile de surcharger votre boutique WooCommerce avec des extensions qui peuvent parfois être coûteuses. Alors que les fonctionnalités attendues sont proposées nativement et gratuitement via l’outil WooCommerce.

Si vous recherchez comment exclure des pays de la vente, c’est ici !