Exemples d’utilisation des champs personnalisés pour WooCommerce

Quand les champs personnalisés dans WooCommerce pourraient être utiles ?

• Pour ajouter des informations supplémentaires sur les produits pour des choses comme les ordinateurs, où vous montrerez les spécifications techniques telles que la RAM et la puissance de traitement.
• Des messages promotionnels que vous pouvez rapidement changer en quelque chose d’autre.
• Des éléments médias uniques qui ne peuvent pas être insérés en utilisant les fonctionnalités standard de WooCommerce, comme une vidéo supplémentaire.
• Dates et heures pour lorsque vous avez un compte à rebours, une vente aux enchères ou une date de sortie pour un produit.
• Options de produits supplémentaires, en plus des variantes, que les clients peuvent consulter.
• Des paragraphes pour expliquer les instructions détaillées d’utilisation d’un article.
• Des offres complémentaires où l’utilisateur se voit présenter plusieurs upsells qui complètent le produit actuel. Les exemples incluent les attachements de brosse pour les brosses à dents électroniques ou différentes breloques pour un bracelet.
• Toutes les données inhabituelles ou supplémentaires que vous aimeriez incorporer sur une page de produit qui soit ne sont pas prises en charge par WooCommerce, soit sont plus faciles à compléter avec des champs personnalisés.

Comment ajouter des champs personnalisés dans les pages de produits WooCommerce

Dans cet exemple, nous allons faire un magasin d’informatique fictif qui vend des ordinateurs portables. Cela prendrait beaucoup de temps de taper les spécifications de l’ordinateur pour chaque nouvel ordinateur portable, donc au lieu de cela, nous allons inclure des champs pour sélectionner ces spécifications en fonction des types d’ordinateurs que nous vendons.

Pour ajouter des champs personnalisés aux produits WooCommerce, vous devez installer le plugin gratuit Advanced Custom Fields sur votre site WordPress. Ensuite, voici comment le configurer…

Champs personnalisés avancés

Auteur(s) : Elliot Condon

Version actuelle : 5.9.5

Dernière mise à jour : 11 février 2021

Champs personnalisés avancés.5..9.5.zip

Voici comment ajouter des champs personnalisés dans les pages produits de WooCommerce étape par étape :

1. Créer un nouveau groupe de champs
2. Ajouter votre ou vos champs personnalisés
3. Configurer les paramètres supplémentaires du groupe de champs
4. Ajouter des informations aux produits
5. Afficher les informations du champ personnalisé sur le front-end

Créer un nouveau groupe de champs

Dans votre tableau de bord WordPress, accédez au nouvel onglet Champs personnalisés. Ensuite, cliquez sur Ajouter nouveau à côté de Groupes de champs.

Nommez un groupe de champs. Par exemple, « champs d’ordinateur ». Un groupe de champs est une collection de champs que vous aurez pour un produit ou une section de votre site Web, comme une liste de spécifications que vous voulez voir apparaître sur toutes les pages de produits d’ordinateurs portables.

Ajouter votre ou vos champs personnalisés)

Cliquez sur le bouton Ajouter un champ pour ajouter un champ à ce groupe.

Créer un:

1. Étiquette du champ – principalement pour votre propre référence.
2. Nom du champ – sert de lettres que vous placerez dans votre propre code personnalisé, ou shortcode dans notre cas. Vous pouvez laisser cela comme le défaut que le plugin génère.
3. Type de champ – le format que vous créez pour ce champ. Vous pouvez choisir parmi des options comme les sélecteurs de date, les cases à cocher, les listes déroulantes et les boutons radio.

Vous pouvez également vouloir mettre quelques instructions pour vous-même ou le développeur, ainsi qu’une spécification de si ce champ est requis ou non.

Si vous travaillez avec un champ qui a plusieurs options (comme les boutons radio), vous devrez ensuite ajouter vos choix de champ. Ce sont les options de sélection que vous voulez voir apparaître sur le backend de votre page produit, comme les différents processeurs de noyau.

Le reste des paramètres est généralement facultatif, comme la valeur par défaut, la mise en page et si vous souhaitez afficher la valeur ou l’étiquette.

Quand vous avez terminé avec un champ ou un groupe, cliquez sur le bouton Publier ou Mettre à jour pour vous assurer qu’il est enregistré.

Pour ajouter d’autres champs à votre groupe, cliquez à nouveau sur le bouton Ajouter un champ.

Voici à quoi cela ressemble avec quatre champs dans ce groupe pour :

• CPU
• Mémoire
• Système d’exploitation
• Date de sortie

Configurer des paramètres de groupe de champs supplémentaires

Une fois le groupe de champs terminé, faites défiler jusqu’au module Emplacement. C’est là que vous identifiez où vous voulez que le groupe de champs apparaisse dans votre tableau de bord WordPress.

Définissez le type de post égal à produit. Ou, si vous voulez être plus spécifique, vous pouvez également choisir une catégorie spécifique de produits.

Sous Paramètres, assurez-vous que le groupe de champs est actif. Cela vous permet de le voir sur ces pages de produits et de montrer potentiellement les sélections de champs à vos clients.

Le style dépend de vos propres préférences. On peut dire la même chose de la position, du placement des étiquettes et du placement des instructions. C’est tout ce qui est préférence personnelle et comment vous voulez formater votre backend. En cas de doute, laissez-les comme valeurs par défaut.

Définissez le numéro de commande si vous avez plusieurs groupes de champs qui s’affichent sur les pages de produits. Cela contrôle l’ordre dans lequel les différents groupes de champs s’affichent.

Vous pouvez également définir une description et masquer certains détails sur votre écran.

Ajouter des informations aux produits

Puis, naviguez vers l’éditeur d’un produit où vous voulez ajouter des champs personnalisés.

Si tous les paramètres sont configurés correctement, vous devriez voir les champs personnalisés sous la boîte de données du produit.

Pour notre exemple, si vous deviez ajouter une nouvelle page de produit pour ordinateur portable, vous pouvez choisir le CPU, la mémoire, le système d’exploitation et la date de sortie.

Afficher les informations des champs personnalisés sur le front-end

Pour terminer, vous devez afficher les informations de vos champs personnalisés sur la page de produit unique du front-end. Vous pouvez ajouter ces informations n’importe où, mais les bons points de départ sont dans la description longue ou courte du produit.

Pour afficher les informations des champs sur le front-end, utilisez le shortcode . Ajoutez le nom du champ entre les guillemets :

Vous pouvez trouver le nom du champ pour chaque champ dans l’interface d’édition du groupe de champs :

Pour terminer, appuyez sur le bouton Publier ou Mettre à jour.

Lorsque vous ouvrez votre produit sur le front-end, vous devriez voir vos champs personnalisés où vous avez ajouté les shortcodes :

Des questions sur la façon d’ajouter des champs personnalisés ?

C’est une option merveilleuse pour étendre votre créativité et rendre la tâche fastidieuse de la construction de pages de produits un peu plus simple.

Nous comprenons que le plugin Advanced Custom Fields a un peu de courbe d’apprentissage, alors si vous avez des pensées ou des questions sur l’ajout de champs personnalisés dans WooCommerce, faites-le nous savoir dans les commentaires ci-dessous !

Vous pouvez également consulter notre tutoriel complet sur les ACF pour en savoir plus sur la façon d’utiliser ce plugin flexible.

.