Comment activer les échantillons de couleurs WooCommerce pour les variations de produits variables dans le thème Flatsome (à l'échelle mondiale)

Avoir des variations de produits est un fait courant pour le commerce électronique. Si vous avez un commerce électronique, il est à peu près certain que vous devez configurer votre magasin pour la variation de vos produits. Les échantillons de couleurs WooCommerce peuvent vous aider à le faire.

Dans WooCommerce, une liste déroulante vous est proposée par défaut pour gérer les variations de produits.

Je sais à quoi tu penses en ce moment ! Vous pensez, « et alors ! Pourquoi ces gars-là font tout un plat ? »

Précisons notre point de vue. Nous croyons que l'objectif de chaque propriétaire de commerce électronique est d'augmenter les ventes et de garder les visiteurs sur son site. Pour les garder plus longtemps, vous devez leur offrir une expérience fluide afin qu'ils se sentent à l'aise de rester longtemps sur votre site.

La liste déroulante pour voir les variations des produits est un processus à l'ancienne, elle nécessite également plus de clics pour afficher une variation. Ce n'est pas une expérience réconfortante pour les visiteurs, c'est pourquoi vous devriez utiliser quelque chose qui peut faciliter l'expérience de visualisation de différentes variations. Voici les échantillons de variation pour rendre les choses faciles et transparentes. Bien que Variation Swatches propose des nuances de couleur, d'image et de bouton, dans cet article, nous nous concentrerons uniquement sur les nuances de couleur.

L'utilisation des échantillons de couleurs WooCommerce pour les variations de produits présente plusieurs avantages directs et indirects. Découvrons-en quelques-uns !

1. Il offre à vos visiteurs une expérience fluide
2. Explorer les variations de couleurs peut augmenter les ventes
3. Les visiteurs ont besoin de moins de clics pour voir la variation d'un produit
4. Une meilleure expérience utilisateur envoie aux moteurs de recherche un signal positif afin qu'ils puissent promouvoir ce contenu

Excité d'activer les échantillons de couleurs WooCommerce dans votre magasin, n'est-ce pas ? Commençons par tout le processus !

Comment activer le plugin WooCommerce Color Swatches dans eStore

Avant de commencer, nous voulons vous informer sur certains prérequis. Le premier est un thème WooCommerce. Vous avez besoin d'un thème WooCommerce pour démarrer avec Variation Swatches. Vous pouvez choisir n'importe quel thème gratuit ou premium pour votre boutique. Nous vous suggérons d'utiliser un thème de haute qualité comme Flatsome, vitrine, etc. Ensuite, vous devez installer le plugin Variation Swatches .

Étape 1 : Accédez au tableau de bord.

Étape 2 : Passez le curseur sur les plugins, puis cliquez sur Ajouter nouveau.

Étape 3 : Une page de recherche apparaîtra. En haut à droite, vous trouverez un champ de recherche. Tapez WooCommerce Variation Swatches, puis installez et activez le plugin.

Ainsi, les prérequis sont préparés. Maintenant, nous pouvons aller de l'avant pour utiliser les nuances de variation pour activer les nuances de couleur pour les variations de produits variables.

Après avoir installé et activé avec succès le plugin WooCommerce Variation Swatches, il est temps de créer des échantillons de couleurs.

Commençons le processus !

Étape 01 : Créer un attribut de produit variable

Dans un premier temps, nous devons créer un attribut de couleur et des variations globalement. Pour le créer, rendez-vous dans le Dashboard , cliquez sur les Produits , puis allez dans les Attributs . Vous trouverez une boîte Attributs . Remplissez les champs obligatoires selon vos besoins. À des fins de démonstration, nous nommons l'attribut Color . Nous laissons le slug vide car il génère automatiquement un slug pour l'attribut. Nous sélectionnons Type comme Couleur .

Vous pouvez choisir les options et nommer selon vos préférences. Si vous n'en avez pas, suivez les nôtres. Après avoir rempli les champs obligatoires, cliquez sur le bouton Ajouter un attribut .

Après cela, une liste sera créée sur le côté droit comme la capture d'écran suivante.

Étape 02 : créer des variantes d'attributs

Vous pouvez ajouter d'autres attributs à la liste en utilisant le même processus. Après avoir créé un attribut, vous devez créer une variation d'attribut. Pour créer des variantes de produit pour les attributs, parcourez la liste et cliquez sur Configurer les termes de l'attribut.

Nous avons créé l'attribut Color par exemple. À l'intérieur de l'attribut de couleur, vous pouvez ajouter des couleurs en tant que variations à l'intérieur de l'attribut. Vous pouvez également choisir la couleur de votre choix, mais à des fins de démonstration, nous ajouterons Red , Green et Blue . En bref, pour créer une variante, remplissez le champ du nom, laissez le slug vide et sélectionnez la couleur.

Étape 03 : Activer la variation d'attribut dans le produit variable

Maintenant, nous devons lier un échantillon de couleur créé globalement avec un produit variable. Pour activer les produits de variation d'attribut, accédez aux produits et modifiez-les. Soyez prudent lorsque vous sélectionnez un produit variable dans Product Data .

Après cela, cliquez sur les attributs à gauche. Une nouvelle page s'ouvrira. Il existe une liste déroulante nommée Attribut de produit personnalisé où vous pouvez trouver tous les attributs créés globalement. Ici, vous verrez le seul attribut Color , car vous venez de créer uniquement l'attribut Color.

Sélectionnez l'attribut que vous souhaitez sélectionner, à des fins de démonstration, sélectionnez Couleur . Après avoir sélectionné, cette page apparaîtra.

Pour sélectionner toutes les variantes disponibles, cliquez sur le bouton Tout sélectionner . Vous pouvez également désélectionner le bouton tout en cliquant sur Ne rien sélectionner . Cochez ensuite Utilisé pour les variantes et cliquez sur Enregistrer les attributs .

Cliquez sur l'onglet Variations , puis une nouvelle page apparaîtra. Là, vous remarquerez deux options, l'une est Ajouter une variation et l'autre est Créer des variations à partir de tous les attributs .

Sélectionnez n'importe quelle option parmi ces deux options. À des fins de démonstration, nous allons sélectionner Créer une variation à partir de tous les attributs .

Désormais, les variations de couleurs sont visibles avec les produits. Vous ajoutez également ici des détails plus spécifiques à la variation, tels que des images de variation, des prix de variation et d'autres variations spécifiques. Après avoir fait tout cela, cliquez sur le bouton Enregistrer les modifications .

PS : ajoutez des prix dans chaque variante, sinon les variantes ne seront pas visibles sur l'interface du produit.

Après avoir ajouté avec succès des nuances de variation, la page de produit individuelle ressemblera à cela.

Paramètres simples

Variation Swatches est un plugin essentiel pour les sites WooCommerce. Plus de 300 000 sites WooCommerce utilisent ce plugin. Il vous aide à activer l'info-bulle, à désactiver la feuille de style par défaut du plug-in et à basculer entre les formes rondes et carrées.

Modifiez le style de forme de rond à carré et activez l'info-bulle. Après cela, le front-end de la page produit ressemblera à cela.

Réglages avancés

Variation Swatches possède également des fonctionnalités avancées qui peuvent vous en donner plus. Vous pouvez contrôler la largeur, la hauteur et la taille de la police de Variation Swatch. Il propose également d'afficher intelligemment les ruptures de stock.

Pour afficher les ruptures de stock, vous devez sélectionner l'option Flou du comportement d'attribut. Après avoir sélectionné cela, votre produit répondra comme suit.

Activer les échantillons de couleurs sur les pages de magasin du thème Flatsome

En plus d'ajouter des échantillons de couleurs aux pages de produits, vous pouvez également ajouter les échantillons de couleurs WooCommerce aux pages d'archives de produits. Pour utiliser cette fonctionnalité, vous devez mettre à niveau votre version vers la version pro. Si vous n'avez pas encore la version pro, faites-la utiliser toute la puissance de Variation Swatches.

Pour activer les échantillons de couleur sur la page d'archive/boutique, cochez les paramètres Afficher sur l'archive pour afficher les échantillons de couleur sur la page magasin/archive. Si vous utilisez le thème Flatsome, vous pouvez activer les échantillons avant et après l'ajout au bouton du panier dans le magasin à partir des paramètres de position des échantillons d'archivage. Vous pouvez également contrôler la taille des échantillons de variation de couleur à partir de ces paramètres.

Lorsque vous activez les échantillons sur la page du magasin, cela ressemblera à ceci.

Personnaliser l'info-bulle et l'échantillon sur les pages de magasin/archives

Si vous souhaitez personnaliser la couleur de l'info-bulle et activer les nuances de variation dans le magasin, vous devez utiliser la version premium des nuances de variation.

Activer l'info-bulle

À l'aide des paramètres avancés, vous pouvez personnaliser l'arrière-plan de l'info-bulle et la couleur du texte. Pour personnaliser l'info-bulle, vérifiez ci-dessous.

L'aperçu final de l'interface d'info-bulle.

Conclusion

Cette technologie augmentera la convivialité et la conversion de votre site. Cela garantit également que vos clients bénéficient d'une expérience transparente lors de la visite de votre site. De plus, indirectement, cela peut améliorer vos ventes et vous aider à développer votre boutique WooCommerece.

Si vous rencontrez des problèmes lors de l'installation de ce plugin dans le thème Flatsome, faites-le nous savoir dans la section des commentaires. Nous essaierons de répondre dès que possible !