Comment créer des échantillons de variation de radio, d'étiquette, de couleur et d'image pour les attributs de produit variables WooCommerce

L'échantillon de variation de produit WooCommerce est une technologie incroyable introduite pour stimuler les ventes et la conversion du site.

Vous vous demandez pourquoi les échantillons sont incroyables, n'est-ce pas ?

Les échantillons de variation de produit remplacent la variation de produit WooCommerce par défaut, sélectionnez le champ déroulant et activez les échantillons de couleur, d'image, d'étiquette et de radio. Par conséquent, les clients peuvent facilement sélectionner la variation de produit souhaitée et les ajouter immédiatement au panier.

Dans ce didacticiel, je vais vous montrer comment activer les nuances de radio, d'étiquette, de couleur et de variation de photo dans le produit variable WooCommerce à l'aide du thème OceanWP .

Je suppose que le thème OceanWP est installé. Pour activer les nuances dans vos produits variables, installez d'abord le plug-in WooCommerce Variation Swatches .

Démo en direct | Télécharger le plugin WooCommerce Variation Swatches

Installation des échantillons de variation WooCommerce

Vous pouvez également télécharger le plug-in WooCommerce Variation Swatches à partir du backend de votre site. Sélectionnez Commencer l'installation des plugins dans l'avis de l'administrateur supérieur.

Installez et activez WooCommerce Variation Swatches et le plug-in Ocean Extra .

Si vous ne recevez pas le premier avis pour installer le plugin Swatches, accédez à Plugins >> Add New . Recherchez des échantillons de variation WooCommerce dans le champ de recherche. Installez et activez le plugin WooCommerce Variation Swatches par Emran Ahmed .

Après l'installation et l'activation réussies du plugin, il est temps de créer des échantillons de variation de radio, d'étiquette, de couleur et d'image dans le thème OceanWP. Commençons le processus.

Configuration des échantillons de variation WooCommerce

Après avoir installé le plugin Woocommerce Variation Swatches and Photos dans votre thème OceanWP. Il est temps de configurer ce plugin pour vos produits variables. Il existe deux façons d'installer ce plugin.

1. Activer les nuances de variation pour les produits variables existants
2. Échantillons de variation de configuration Pour les nouveaux produits variables

Dans ce tutoriel, je vais décrire les deux manières.

Activer les nuances de variation pour les produits variables existants

Vous êtes nombreux à avoir déjà créé des produits variables dans votre boutique. Si vous souhaitez transformer la liste déroulante des variantes de produits en échantillons de radio, d'étiquette, de couleur et d'images, vous avez suivi ce didacticiel à partir d'ici. Vérifiez la capture d'écran suivante. La liste déroulante de sélection de variantes par défaut ressemble actuellement à la capture d'écran suivante sur votre site. Dans les étapes à venir, je vais vous montrer comment transformer le champ de sélection de variation en magnifiques nuances.

Avant que

Après

Étape 01 : Modification de l'attribut

Dirigez-vous vers les produits >> Attributs . Tous les attributs globaux existants sont répertoriés dans la section des attributs. Après avoir installé le plugin WooCommerce Variation Swatches, il ajoute le champ Type . Par défaut, il afficherait sélectionner sous Type de titre.

Comme WooCommerce Swatches Plugin est livré avec trois types d'attributs : Couleur, Image, Bouton . Vous pouvez définir n'importe quel type d'attribut pour l'attribut souhaité.

À des fins de démonstration, les attributs Fabrics, Pattern et Label ont été créés. Ajoutez le type d'attribut Couleur pour l'attribut Motif , le type d'attribut Image pour l'attribut Tissus et le type d'attribut Bouton pour l'attribut Étiquette .

Pour définir le type d'attribut de couleur sur l'attribut Motif , cliquez sur Modifier .

Sélectionnez Type de couleur dans la liste déroulante des types.

Récupérer Produits >> Attributs . Modifiez l'attribut Fabrics comme l'attribut Pattern .

Récupérez à nouveau Produits >> Attributs . Modifier l'attribut Label comme l'attribut Fabrics and Pattern .

Lorsque la sélection du type d'attribut est terminée, revenez à la page de liste d'attributs. La liste d'attributs ressemblerait à l'image suivante.

L'interface du produit ressemblerait à la capture d'écran suivante après avoir sélectionné les types d'attributs pour les attributs de produit.

Les variations pour l'attribut Label semblent correctes, mais les variations pour l'attribut Pattern doivent définir des couleurs et les variations pour l'attribut Fabrics doivent ajouter des images.

Étape 02 : Modification des variantes

Pour définir les couleurs comme des variations à l'intérieur de l'attribut Pattern . Rendez-vous sur Produits >> Attributs . Sélectionnez Configurer les termes dans l'attribut Patterns .

Après avoir sélectionné Configurer les termes, une liste de variantes d'attributs s'affiche. Pour Motif, trois variantes : les variantes Bleu , Vert et Rouge sont répertoriées ici. Modifiez chaque variation une par une pour ajouter une couleur de variation.

Pour la démonstration, sélectionnez le lien Modifier pour la variante verte .

À partir du panneau d'édition de variation. Sélectionnez la couleur souhaitée dans Colorpicker et mettez à jour les modifications en appuyant sur le bouton Mettre à jour.

Lorsque toutes les couleurs de variations sont mises à jour avec succès, l'interface ressemble à ce qui suit.

Après avoir mis à jour les variations d'attribut de motif, modifiez l'attribut Fabrics en sélectionnant Configurer les termes comme l'attribut de motif .

Après avoir appuyé sur Configurer les termes, une liste de termes Fabrics apparaît comme un modèle. Modifiez chaque variante pour insérer une image de variantes. À des fins de démonstration, modifier le lien pour l'attribut Chambray .

À partir du panneau d'édition de variation. téléchargez l'image de variation souhaitée à partir de l'image et mettez à jour les modifications en appuyant sur le bouton Mettre à jour.

Après avoir mis à jour les images pour toutes les variantes, le frontend aimerait la capture d'écran suivante.

Configuration des échantillons de variation pour les nouveaux produits variables

C'est l'étape pour ceux qui n'ont créé aucun produit variable pour leur magasin. Tout d'abord, nous allons créer des produits variables et activer des échantillons pour eux.

Étape 01 : Créer des attributs globaux et des variantes

Après l'installation et l'activation réussies du plug-in, créez globalement l'attribut souhaité à partir de Products >> Attributes . Créer un motif , des tissus, une variation de longueur et de taille , entrez le titre de l'attribut et le type d'attribut correspondant dans la liste déroulante Type.

Lorsque les attributs color, image et label Pattern , Fabrics , Label et Size sont créés avec succès, une liste d'attributs est créée à gauche.

Après avoir créé des attributs globaux, ajoutez des variantes d'attribut en sélectionnant Configurer les termes. Pour créer des variations pour les attributs de modèle , sélectionnez Configurer les liens des termes . Remplissez le champ Nom et sélectionnez les codes de couleur. Créez des variations de vert , de bleu et de rouge pour les attributs de couleur.

Une liste de variations d'attributs s'affiche dans l'écran de gauche après l'ajout de variations pour les attributs de motif .

Accédez à nouveau aux produits >> Attributs . Créez des variantes pour les attributs Fabrics , sélectionnez Configurer les liens des termes à partir de Fabrics . Remplissez le champ Nom et ajoutez une image de variation à partir de la médiathèque ou téléchargez-la depuis un ordinateur.

Créez des variations Chambray, Corduroy et Embossed pour les attributs d'image et ils apparaîtront à gauche.

Créez des variations pour les attributs Radio et Label comme les variations Image et Couleur.

Étape 02 : Afficher les échantillons dans la page de produit variable

Pour activer les échantillons sur la page de produit variable. Entrez dans le mode d'édition de produit souhaité, sélectionnez le produit variable dans Product Data .

Dirigez-vous vers l'onglet Attributs . Cliquez sur la liste déroulante des attributs de produit personnalisés . Ici, tous les attributs créés globalement apparaissent. Ajoutez tous les attributs un par un.

Après avoir ajouté tous les attributs, appuyez sur le bouton Sélectionner tout de chaque paramètre d'attribut pour ajouter toutes ses variantes disponibles à la fois. Après avoir ajouté des variantes d'attributs de produit, enregistrez les paramètres en sélectionnant les boutons d' enregistrement des attributs .

Allez maintenant dans l'onglet Variations . Cliquez sur la liste déroulante Ajouter une variation . Ici, deux options se présentent. Le premier est Ajouter une variation et le second est Créer des variations à partir de tous les attributs.

Sélectionnez Créer des variantes à partir de tous les attributs et appuyez sur Go . Il ajoutera toutes les combinaisons de variantes disponibles créées pour les attributs. Ajoutez une image de prix et de variation pour une variation individuelle et enregistrez les paramètres.

Conclusion

J'ai essayé de couvrir chaque étape pour installer le plugin WooCommerce Variation Swatches dans le thème OceanWP. Faites-moi savoir dans la zone de commentaire si vous avez besoin d'aide supplémentaire.