Dans ce tutoriel, vous trouverez :<\/p>\n
- \n
- Une d\u00e9finition des attributs WooCommerce<\/li>\n
- Comment ajouter des attributs \u00e0 votre boutique<\/li>\n
- Comment donner des attributs aux produits<\/li>\n
- Comment faire appara\u00eetre les attributs sur les pages de produits<\/li>\n
- Comment afficher des \u00e9chantillons de couleur au lieu de menus d\u00e9roulants<\/li>\n<\/ul>\n
Commen\u00e7ons par un aper\u00e7u des attributs du produit.<\/p>\n
Quels sont les attributs du produit WooCommerce ?<\/h2>\n
Les attributs WooCommerce vous permettent d’ajouter des donn\u00e9es suppl\u00e9mentaires aux produits afin que vous puissiez cr\u00e9er des variantes de produits.<\/p>\n
Par exemple, si vous avez un chapeau \u00e0 vendre en vert et en jaune, vous ne voudriez pas vendre les couleurs comme deux produits distincts. Comme il s’agit du m\u00eame chapeau mais de couleurs diff\u00e9rentes, vous utiliseriez plut\u00f4t un attribut. Vous ajouteriez un nouvel attribut "couleur", puis ajouteriez des variations de couleur "verte" et "jaune" \u00e0 votre chapeau.<\/p>\n
Mettons-nous en pratique avec quelques captures d’\u00e9cran et des exemples r\u00e9els.<\/p>\n
Comment ajouter de nouveaux attributs de produit<\/h2>\n
Les attributs peuvent \u00eatre ajout\u00e9s \u00e0 partir du menu Attributs r\u00e9pertori\u00e9 sous le menu Produits.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ea4c51b.png\")
<\/a><\/p>\nSi vous avez ex\u00e9cut\u00e9 l’assistant de configuration WooCommerce, vous verrez des attributs de couleur et de taille d\u00e9j\u00e0 cr\u00e9\u00e9s.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ecd59c2.png\")
<\/a><\/p>\nVous pouvez d\u00e9j\u00e0 voir des \u00ab\u00a0termes\u00a0\u00bb ajout\u00e9s pour les attributs de couleur et de taille<\/p>\n
Pour ajouter un nouvel attribut, il vous suffit de saisir un nom et un slug et de cliquer sur Ajouter un attribut.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ef5db4d.png\")
<\/a><\/p>\nUn slug est un nom tout en minuscules utilis\u00e9 pour les URL. Remplacez les espaces par des tirets dans le slug.<\/p>\n
Une fois que vous avez cr\u00e9\u00e9 votre nouvel attribut, cliquez sur le lien Configurer les termes pour ajouter des options \u00e0 l’attribut.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f15d5c2.png\")
<\/a><\/p>\n\u00ab\u00a0Termes\u00a0\u00bb est un mot vague, mais c’est le mot que WooCommerce utilise pour les options de votre attribut. Par exemple, \u00ab\u00a0Couleur\u00a0\u00bb est un attribut et \u00ab\u00a0bleu, \u00ab\u00a0gris\u00a0\u00bb et \u00ab\u00a0vert\u00a0\u00bb sont certains de ses termes.<\/p>\n
Dans mon exemple, j’ai cr\u00e9\u00e9 un attribut appel\u00e9 \u00ab\u00a0Mat\u00e9riau\u00a0\u00bb, donc je vais ajouter de nouveaux mat\u00e9riaux, comme \u00ab\u00a0verre\u00a0\u00bb et \u00ab\u00a0plastique\u00a0\u00bb.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f3cebf1.png\")
<\/a><\/p>\nVous pouvez ajouter autant d’attributs avec autant de termes que vous le souhaitez.<\/p>\n
Bien que vous puissiez cr\u00e9er des attributs sp\u00e9cifiques \u00e0 des produits individuels, il est pr\u00e9f\u00e9rable de les ajouter ainsi via le menu Attributs. Cela les maintient disponibles pour tous les produits et rend la gestion beaucoup plus facile. L’ajout d’attributs \u00e0 des produits individuels deviendra rapidement compliqu\u00e9 et difficile \u00e0 manier.<\/p>\n
Maintenant que vous avez cr\u00e9\u00e9 votre propre attribut personnalis\u00e9, voici comment vous pouvez l’ajouter \u00e0 un produit.<\/p>\n
Comment ajouter des attributs \u00e0 un produit<\/h2>\n
Une fois vos attributs cr\u00e9\u00e9s, vous \u00eates pr\u00eat \u00e0 les affecter \u00e0 vos produits.<\/p>\n
Commencez par visiter l’un de vos produits dans le tableau de bord de l’administrateur. Recherchez ensuite la section Donn\u00e9es du produit et cliquez sur la fl\u00e8che \u00e0 droite pour la d\u00e9velopper.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f5dbe8e.png\")
<\/a><\/p>\nUne fois d\u00e9velopp\u00e9, cliquez sur la section Attributs dans la barre lat\u00e9rale gauche.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f7b6e44.png\")
<\/a><\/p>\nDans mon exemple, le produit a d\u00e9j\u00e0 un attribut, Couleur, r\u00e9pertori\u00e9 ici\u00a0:<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8f9a85b2.png\")
<\/a><\/p>\nSi vous cliquez sur un attribut, il se d\u00e9veloppe afin que vous puissiez ajouter et supprimer diff\u00e9rentes valeurs\/termes.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8fb9e1f7.png\")
<\/a><\/p>\nLe bouton Ajouter un nouveau permet d’ajouter des termes enti\u00e8rement nouveaux qui deviennent ensuite disponibles pour tous les produits.<\/p>\n
Vous pouvez cliquer dans la section Valeur(s) pour s\u00e9lectionner les termes existants \u00e0 ajouter au produit.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8fd6df65.png\")
<\/a><\/p>\nCes termes proviennent du menu Produit > Attributs<\/strong><\/p>\n
Vous pouvez ajouter plus d’attributs au produit en utilisant cette option d\u00e9roulante\u00a0:<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c8ff8fb6d.png\")
<\/a><\/p>\nSi vous vous demandez comment cela fonctionnerait, un exemple serait un t-shirt qui n\u00e9cessite \u00e0 la fois des options de couleur et de taille. Vous ajouteriez \u00e0 la fois un attribut de couleur et un attribut de taille.<\/p>\n
Comme je l’ai d\u00e9j\u00e0 mentionn\u00e9, je ne recommande pas de cr\u00e9er des attributs de produit personnalis\u00e9s, mais vous pouvez s\u00e9lectionner des attributs pr\u00e9existants avec le s\u00e9lecteur d\u00e9roulant pr\u00e9sent\u00e9 ci-dessus.<\/p>\n
Une chose \u00e0 laquelle vous ne pouvez pas vous attendre est qu’une fois que vous avez ajout\u00e9 vos attributs, ils n’apparaissent pas automatiquement sur la page du produit.<\/p>\n
Comment afficher vos attributs sur la page du produit<\/h2>\n
Faire appara\u00eetre vos attributs sur les pages de produits est une partie d\u00e9routante de WooCommerce.<\/p>\n
Lorsque vous ajoutez des attributs \u00e0 un produit, m\u00eame si vous cochez la case \u00ab\u00a0visible sur la page du produit\u00a0\u00bb, les variantes ne s’afficheront toujours pas sur votre site.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9017a0fe.png\")
<\/a><\/p>\nCocher cette case n’est qu’une \u00e9tape du processus<\/p>\n
Par d\u00e9faut, la seule diff\u00e9rence sur la page du produit sera les attributs et leurs valeurs r\u00e9pertori\u00e9s dans la section Informations suppl\u00e9mentaires.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9037fb94.png\")
<\/a><\/p>\nPour ajouter la liste d\u00e9roulante de vos attributs, vous devez d’abord passer votre produit d’un \u00ab\u00a0Produit simple\u00a0\u00bb \u00e0 un \u00ab\u00a0Produit variable\u00a0\u00bb \u00e0 l’aide de cette liste d\u00e9roulante\u00a0:<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9056b83e.png\")
<\/a><\/p>\nEnsuite, vous devez ouvrir la section Attributs et cocher la case "Utilis\u00e9 pour les variations" pour chaque attribut.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9079e16c.png\")
<\/a><\/p>\nAssurez-vous de cocher la case pour tous les attributs que vous souhaitez utiliser<\/p>\n
Lorsque vous avez termin\u00e9, cliquez sur le bouton Enregistrer les attributs.<\/p>\n
Ensuite, cliquez sur la section Variantes. Vous pouvez utiliser le menu d\u00e9roulant pour ajouter une variante \u00e0 la fois, mais il est plus rapide d’utiliser l’option \u00ab\u00a0Cr\u00e9er des variantes \u00e0 partir de tous les attributs\u00a0\u00bb.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c909c73c5.png\")
<\/a><\/p>\nUne fois que vous avez cliqu\u00e9 sur Go, WooCommerce cr\u00e9era toutes les diff\u00e9rentes variantes de produits possibles.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c90c2f36c.png\")
<\/a><\/p>\nMon produit a deux variantes en raison des termes de couleur gris et rouge ajout\u00e9s<\/p>\n
La derni\u00e8re \u00e9tape avant que vos variantes n’apparaissent sur la page du produit est de donner \u00e0 chacune un prix.<\/p>\n
Vous voudrez remplir tous les champs, mais je vais juste ajouter des prix dans mon exemple.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c90e83994.png\")
<\/a><\/p>\nUne fois que vous avez termin\u00e9 d’ajouter des prix \u00e0 toutes vos variantes, cliquez sur le bouton Enregistrer les modifications.<\/p>\n
Vous verrez maintenant un menu d\u00e9roulant permettant aux acheteurs de choisir vos variantes.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9111378f.png\")
<\/a><\/p>\nMon exemple n’utilise qu’un seul attribut, mais vous pouvez en ajouter autant que vous le souhaitez. Chaque attribut aura sa propre liste d\u00e9roulante r\u00e9pertoriant ses termes disponibles.<\/p>\n
Bien que cela fonctionne parfaitement, les s\u00e9lecteurs d\u00e9roulants ne permettent pas la meilleure exp\u00e9rience d’achat.<\/p>\n
Comment afficher des \u00e9chantillons de couleur<\/h2>\n
Le menu d\u00e9roulant par d\u00e9faut pour les variantes de produits ne cr\u00e9e pas une excellente exp\u00e9rience utilisateur<\/a>.<\/p>\n
Imaginez que vous ayez un t-shirt disponible en cinq couleurs. Avec un menu d\u00e9roulant, les acheteurs ne peuvent pas voir combien de couleurs sont disponibles jusqu’\u00e0 ce qu’ils cliquent dessus, et ils ne voient pas les nuances de couleurs r\u00e9elles. Ils ne voient que le mot \u00abbleu \u00bb, par exemple, au lieu de la nuance de bleu utilis\u00e9e par votre produit.<\/p>\n
Offrir aux visiteurs des \u00e9chantillons de couleurs parmi lesquels choisir permet une meilleure exp\u00e9rience d’achat.<\/p>\n
![\"Que](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222114-6171c9131f1dc.png\")
<\/a><\/p>\nBien que cette option ne soit pas disponible dans WooCommerce, il existe de nombreux excellents plugins qui peuvent ajouter cette fonctionnalit\u00e9 \u00e0 votre site\u00a0:<\/p>\n
Ces 6 plugins de variation de produit pour WooCommerce rendent votre site plus facile \u00e0 utiliser<\/a><\/p>\n
Les plugins r\u00e9pertori\u00e9s dans cette collection peuvent remplacer la liste d\u00e9roulante des options de couleur, de taille et de style, ajouter de nouvelles images de galerie par variation, et bien plus encore.<\/p>\n
Ma\u00eetrise des attributs WooCommerce<\/h2>\n
Vous savez maintenant quels sont les attributs des produits WooCommerce et comment les ajouter \u00e0 votre site.<\/p>\n
L’utilisation d’attributs sera un \u00e9l\u00e9ment cl\u00e9 de la gestion de votre magasin et de la vente de variantes de produits.<\/p>\n
Si vous voulez un excellent nouveau design pour votre magasin, j’ai utilis\u00e9 le th\u00e8me Modern Store<\/a> tout au long de ce didacticiel. Il est enti\u00e8rement r\u00e9actif, personnalisable et se charge rapidement.<\/p>\n