Comment ajouter des champs et des onglets personnalisés dans la métabox de données de produit WooCommerce par code

Dans cet article, nous apprendrons comment ajouter vos méta-champs personnalisés dans la méta-boîte de données produit de WooCommerce ; comment ajouter des champs et comment ajouter votre propre onglet personnalisé. Nous verrons en détail comment ajouter vos champs, où les ajouter, comment les enregistrer et enfin comment les afficher en frontend.

Ajout de champs personnalisés aux panneaux existants

Nous verrons d’abord comment ajouter un champ à des panneaux existants. Nous devons nous accrocher à deux crochets ; un pour afficher le champ et un pour en enregistrer la valeur. Le premier crochet dépend de l’onglet dans lequel vous souhaitez afficher votre champ.

La métabox des données produit

Gardez à l’esprit que la visibilité des onglets diffère selon le type de produit. Par exemple, l’onglet "Général" est supprimé lorsque vous passez à un type de produit groupé. Ainsi, non seulement vous devez considérer où vos champs personnalisés s’intègrent logiquement, mais vous devez également envisager un panneau visible pour tous les types de produits souhaités. est une liste des crochets disponibles les plus généraux :

• woocommerce_product_options_general_product_data("Général")
• woocommerce_product_options_inventory_product_data("Inventaire")
• woocommerce_product_options_shipping("Expédition")
• woocommerce_product_options_related("Produits liés")
• woocommerce_product_options_attributes("Les attributs")
• woocommerce_product_options_advanced("Avancé")

Ajout d’une entrée de formulaire

En ce qui concerne la sortie d’une entrée de formulaire, vous pouvez sortir manuellement l’entrée de formulaire HTML (par exemple <input type="text"...>), mais WooCommerce offre des fonctions simples pour ajouter facilement des champs de tous types. Je recommande de les utiliser. Consultez l’ aperçu de WooCommerce de tous les types d’entrée possibles ici et des arguments que vous pouvez transmettre pour contrôler la sortie.

En ce qui concerne ce didacticiel, je vais ajouter une simple saisie de texte dans l’onglet Inventaire pour écrire le nombre d’articles dans chaque package. En ce qui concerne la clé sous laquelle votre valeur personnalisée est enregistrée, ajoutez toujours un trait de soulignement "_" avant, dans mon cas, ce sera "_number_in_package":

Enregistrer et modifier un produit. Vous devriez voir votre champ personnalisé apparaître en bas de l’onglet Inventaire :

Le champ personnalisé "Numéro dans le colis" ajouté en bas

Une note sur la visibilité du champ selon le type de produit

La métabox de données produit de WooCommerce contient une grande quantité de Javascript qui masque et affiche à la fois les champs et les onglets/panneaux. Vous pouvez facilement l’utiliser si vous souhaitez que votre champ ne soit visible que pour des types de produits spécifiques, en fournissant des noms de classe spécifiques à votre champ.

Supposons que vous souhaitiez que votre champ ne s’affiche que si le produit est de type produit simple, ou que vous souhaitiez qu’il soit masqué si le produit est un produit variable. WooCommerce écoute des noms de classe spécifiques tels que show_if_<producttype>et hide_if_<producttype>et vous pouvez combiner plusieurs classes pour affiner le moment où votre champ doit être masqué ou visible.

Par exemple, si je souhaite que mon champ ne soit visible que pour des produits simples ; Je vais ajouter ceci dans ‘ wrapper_class‘ à ma saisie de champ :

Vous pouvez également définir wrapper_classpar exemple ‘ show_if_simple show_if_grouped‘ pour que le champ ne soit visible que pour les produits simples ou groupés. Essayez-le vous-même !

Enregistrement de votre champ personnalisé

À l’heure actuelle, tout ce que vous entrez dans votre champ n’est pas enregistré. Faisons cela ensuite. Nous nous accrochons woocommerce_process_product_metaet enregistrons la valeur du global de PHP $_POST(soumission de formulaire).

Permettez-moi d’expliquer rapidement le code ci-dessus. Vous pouvez simplement enregistrer le champ en utilisant update_post_meta(), mais dans les versions plus récentes de WooCommerce, la gestion des méta-produits a été considérablement améliorée. Tant que vous avez l’objet produit (que nous obtenons en appelant wc_get_product()avec l’ID de publication), vous pouvez facilement manipuler toutes les informations sur le produit dans l’objet, et enfin appeler save()une fois pour mettre à jour les modifications. Ceci est très avantageux, surtout si vous souhaitez enregistrer plusieurs champs – auquel cas vous n’avez pas besoin d’exécuter des opérations de base de données pour chaque champ, juste une dernière fois lorsque vous appelez save().

Utilisez update_meta_data()sur l’objet pour chaque méta-donnée que vous souhaitez enregistrer.

Avec la fonction ci-dessus, votre champ devrait maintenant être enregistré lorsque vous le mettez à jour dans le produit d’édition ! Notez également qu’en utilisant les fonctions de WooCommerce pour générer le champ, vous n’avez pas besoin d’obtenir manuellement la valeur de votre champ avant de générer le champ – c’est entièrement automatique.

Sortie de votre champ personnalisé en frontend

La première étape consiste à déterminer quel crochet vous souhaitez utiliser pour générer votre champ personnalisé. WooCommerce propose de nombreux crochets disponibles pour contrôler spécifiquement où vous voulez la sortie. Si vous n’êtes pas sûr, jetez un œil à plugins/woocommerce/templates/ces fichiers et vous trouverez facilement un crochet approprié. Vous pouvez également remplacer le modèle et ajouter la sortie dans le modèle, mais je recommande toujours d’utiliser des crochets à la place.

Quant à moi, je souhaite que mon champ personnalisé soit généré dans un seul produit, à l’intérieur de la méta div – le long de laquelle WooCommerce génère le SKU et la catégorie. Pour cela, je vais utiliser le crochet woocommerce_product_meta_start. À l’intérieur des crochets (comme avec presque tous les crochets de modèle), vous pouvez accéder à l’objet de publication global. Je suivrai la même règle empirique que pour sauver mon champ; utiliser get_meta()sur l’objet produit pour obtenir mon champ personnalisé :

Ajout d’un onglet et d’un panneau personnalisés à la métabox des données produit

Si vous souhaitez ajouter une collection de champs personnalisés qui vont logiquement ensemble, il peut être judicieux de les regrouper dans un onglet personnalisé. Pour ajouter un onglet personnalisé à la métaboîte de données produit, nous devons nous accrocher à un filtre pour ajouter l’onglet lui-même et à un crochet pour afficher le contenu du panneau. Enfin, nous devons encore ajouter le même crochet que ci-dessus pour enregistrer nos champs.

Par exemple, je vais ajouter un panneau personnalisé appelé "Informations supplémentaires" où je veux ajouter une entrée de texte, une case à cocher et une entrée numérique.

Tout d’abord, nous filtrons woocommerce_product_data_tabset ajoutons notre onglet à son tableau.

Il y a quelques arguments utiles que nous pouvons fournir ici. Vous pouvez par exemple utiliser ‘ class‘ pour contrôler la visibilité de l’onglet en fonction du type de produit. Si vous l’avez manqué, consultez la section sur la visibilité des champs mentionnée ci-dessus. Mais gardez à l’esprit que dans les onglets, vous devez fournir les classes sous forme de tableau et non de chaîne. Vous pouvez également fournir ‘ priority‘ pour décider où votre onglet doit apparaître. Utiliser par exemple 25 positionnera l’onglet juste après "Inventaire".

Par défaut, votre onglet apparaîtra avec une clé à molette comme icône. Malheureusement, il n’y a (pour l’instant) aucun moyen de le contrôler via le filtre. Si cela est important pour vous, vous pouvez ajouter un CSS d’administration et fournir une classe différente à votre onglet. Voici un aperçu des icônes disponibles dans WooCommerce.

Sortie panneau

L’étape suivante consiste à accrocher woocommerce_product_data_panelset à afficher le contenu de votre panneau. Une note importante ici est de commencer la sortie avec divun idattribut du même nom que celui que vous avez fourni comme clé dans les onglets (dans mon cas ‘ additional_info‘). En ce qui concerne le contenu, c’est à vous de décider – vous pouvez ajouter le code HTML de votre choix, mais je vous recommande d’utiliser les fonctions de WooCommerce pour la sortie des champs de formulaire. Les mêmes avantages pour masquer ou afficher des champs fonctionneront également ici.

Après l’enregistrement, vous devriez maintenant voir l’onglet et son contenu dans la métabox des données du produit (sauf si le produit est un produit externe bien sûr).

Il ne reste plus qu’à enregistrer les données saisies dans vos champs personnalisés, et pour cela nous utilisons le même procédé que ci-dessus :

Remarque: Dans WooCommerce, il existe une règle générale selon laquelle toutes les cases à cocher sont enregistrées sous la forme " yes" si elles sont cochées, ou sous forme de chaîne vide si elles ne sont pas cochées. En suivant la règle de WooCommerce et en enregistrant ma case à cocher cochée en tant que " yes", cela garantit que mon woocommerce_wp_checkbox()travail fonctionne comme prévu lorsqu’il récupère la valeur actuelle de mon champ.

Conclusion

Dans cet article, je montrerai comment ajouter vos champs personnalisés à la métabox de données produit de WooCommerce, comment les enregistrer, comment contrôler leur visibilité et un exemple simple de sortie de votre champ en frontend. J’ai également montré comment ajouter un onglet personnalisé à la métabox et y ajouter vos champs. J’espère que cela vous a aidé à personnaliser vous-même WooCommerce !