Comment ajouter des champs personnalisés à la page produit de WooCommerce

Cet article a été créé pour aider les débutants qui ne connaissent pas WooCommerce et les modèles de produits. Nous allons montrer comment personnaliser le modèle de produit et ajouter des champs personnalisés à vos produits WooCommerce.

La page produit de WooCommerce affiche généralement les données du produit telles que le titre, l'image, la galerie d'images, la description courte, la description longue, le prix et la remise. Et s'il y a des attributs et des variations. Mais pas les champs personnalisés.

Il y a plusieurs façons d'atteindre cet objectif, et vous verrez qu'afficher les valeurs des champs personnalisés sur une page unique de produit est assez simple, et que cela se fait sans modifier trop de code.

Cet article traite de l'ajout de champs personnalisés uniquement sur la page Produit de WooCommerce. Si vous souhaitez également ajouter des champs à la page de présentation de la boutique, lisez comment afficher les champs ACF sur la page de la boutique Woo.

Ci-dessous, nous avons joint un tutoriel vidéo qui vous montrera comment y parvenir. Mais n'hésitez pas à sauter la vidéo, car dans l'article ci-dessous, nous fournissons un tutoriel complet, étape par étape, en version texte.

Les champs personnalisés sont un excellent moyen de stocker des données supplémentaires sur un article ou un produit. D'ailleurs, le produit est techniquement un article, mais d'un type différent.

Comme vous le savez peut-être déjà, trouver le bon plugin est souvent un parcours ardu. Mais cela ne doit pas vous empêcher de construire votre boîte à outils de plugins.

Le meilleur

Le plugin le plus populaire que nous recommandons d'utiliser pour créer des champs personnalisés est Advanced Custom Fields (ACF). Il existe d'autres plugins ici et ici, mais nous avons constaté qu'ils coûtent le même prix, voire un peu plus, ou qu'ils ont des fonctionnalités limitées.

Nous utiliserons donc ACF pour notre méthode dans ce tutoriel.

1. Téléchargez et installez le plugin Advanced Custom Fields.
2. Visitez l'onglet "Champs personnalisés" dans le menu d'administration du backend.
3. Cliquez sur "Ajouter nouveau" pour ajouter un nouveau groupe de champs.
   Note : Les groupes de champs sont là pour vous aider à organiser vos champs en groupes.
4. L'écran "Ajouter un nouveau groupe de champs" s'affiche et vous permet d'ajouter des champs.
5. Utilisez le bouton "Ajouter un champ" pour ajouter un champ, puis renseignez l'étiquette et le nom du champ en minuscules et sélectionnez le type "Texte" dans la liste déroulante.
6. Emplacement, sélectionner Afficher ce groupe de champs si le type de message est égal à Produit.
7. Sélectionnez d'autres "Paramètres" que vous souhaitez. Cliquez sur "Publier".
8. Pour ajouter d'autres champs, continuez à utiliser le bouton "Ajouter un champ".

C'est tout ce que vous avez à faire pour créer les champs. L'étape suivante consiste à ajouter les valeurs des champs personnalisés à vos produits.

1. Visitez l'onglet "Produits" dans le menu d'administration du backend.
2. Dans la liste des produits, sélectionnez le produit que vous souhaitez modifierpour remplir les valeurs de vos champs personnalisés.
3. Une fois sur l'écran de modification du produit, faites défiler vers le bas jusqu'à ce que vous voyiez le(s) champ(s) personnalisé(s).
4. Saisissez les valeurs des champs personnalisés. Cliquez sur "Mettre à jour" pour enregistrer le produit.
5. Continuez à suivre ces étapes jusqu'à ce que vous ayez ajouté les valeurs des champs personnalisés à tous vos produits.

Conseil de pro : La définition d'une valeur par défaut dans votre groupe de champs ACF ne remplit pas automatiquement les valeurs des champs personnalisés pour tous vos produits. Vous devrez donc modifier le produit et cliquer sur "mettre à jour" pour chaque produit.

Il est temps d'afficher les champs sur la page du produit.

Malheureusement, ni WooCommerce ni le plugin ACF ne permettent d'afficher les valeurs des champs sur la page d'accueil de votre site web. Mais tout bon développeur WordPress doit savoir comment modifier le modèle de page produit de Woo. Nous allons donc nous y plonger.

Pour les pros et les lecteurs avertis : modifiez et ajoutez du code PHP pour obtenir et afficher ces champs à l'aide de la fonction ACF get_field().

Cependant, il y a un autre moyen. Il s'agit d'utiliser un plugin qui le fera à notre place. Dans notre cas, nous utiliserons le framework Advanced Views pour afficher les champs personnalisés.

Advanced Views est l'un des addons ACF et permet d'afficher les articles et leurs champs ACF n'importe où sur votre site à l'aide de shortcodes. Cela signifie que vous n'avez plus à écrire de code PHP pour interroger les articles, obtenir les valeurs des champs ou les afficher ! Lisez comment afficher les champs ACF sans coder pour connaître tous les avantages de l'approche par shortcodes.

1. Téléchargez et installez le framework Advanced Views.
2. Cliquez sur "Ajouter nouveau" pour ajouter une nouvelle vue.
3. L'écran "Modifier la vue ACF" s'affiche.
4. Donnez à votre Vueun titre et une courte description, afin de pouvoir la retrouver facilement par la suite.
5. Champs, Groupe, sélectionnez le groupe de champs que vous avez créé précédemment.
6. Champ, sélectionnez le champ et donnez-lui une étiquette.
7. Cliquez sur "Ajouter un champ" et répétez l'étape 6 jusqu'à ce que vous ayez ajouté tous les champs.

Conseil : Utilisez la poignée de ligne pour réorganiser les champs.

Pour le champ répétitif type ; Passez à l'onglet 'Sous-champs répétitifs', Sous-champ, sélectionnez votre champ répétitif, puis donnez-lui une étiquette. Nous en sommes maintenant aux dernières étapes.

1. Cliquez sur "Mettre à jour" pour enregistrer votre vue.
2. Copiez le shortcode.
3. Connectez-vous à votre serveur via FTP et naviguez dans votre répertoire WordPress, puis allez dans wp-content/plugins/woocommerce/templates/ et copiez le dossier 'single-product' dans votre thème à l'intérieur d'un nouveau dossier appelé 'woocommerce' (le chemin est donc wp-content/themes/votre-thème/woocommerce/)
4. Dans l'interface d'administration de WordPress, visitez Appearance > Theme File Editor.
5. En haut à droite, sélectionnez le thème à éditer -> sélectionnez votre thème puis allez à woocommerce/single-product/short-description.php pour l'ouvrir dans la fenêtre de l'éditeur.
6. Insérez le shortcode en copiant et en collant le code ci-dessous au bas du contenu de votre fichier et en remplaçant le "ID" par votre ID de vue ACF. <?php echo do_shortcode( '[acf_views view-id= "ID"]' ) ; ?>
7. Affichez la page de votre produit pour voir le résultat.

Note : si vous ne voyez pas les champs personnalisés sur le frontend, éditez le produit et assurez-vous que vous avez rempli les champs personnalisés avec des valeurs.

Vous avez appris à ajouter facilement des champs personnalisés à la page produit de WooCommerce. Nous n'avons utilisé que quelques plugins gratuits, mais ils nous ont facilité la tâche.

Le plugin Advanced Custom Fields est extraordinaire et permet de gérer les champs méta aussi facilement que possible. En utilisant l'addon Advanced Views vous n'aurez plus de problèmes avec l'affichage des champs sur le devant de votre site.

De plus, il convient de mentionner que ces plugins sont très utiles non seulement pour les tâches de Woo. Vous pouvez les utiliser n'importe où, pour ajouter et afficher des données personnalisées, c'est-à-dire des champs pour n'importe quelle page ou n'importe quel Custom Post Type.