![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f68509c.png\")
<\/a><\/p>\nLa m\u00e9tabox des donn\u00e9es produit<\/p>\n
Gardez \u00e0 l’esprit que la visibilit\u00e9 des onglets diff\u00e8re selon le type de produit. Par exemple, l’onglet "G\u00e9n\u00e9ral" est supprim\u00e9 lorsque vous passez \u00e0 un type de produit group\u00e9. Ainsi, non seulement vous devez consid\u00e9rer o\u00f9 vos champs personnalis\u00e9s s’int\u00e8grent logiquement, mais vous devez \u00e9galement envisager un panneau visible pour tous les types de produits souhait\u00e9s. est une liste des crochets disponibles les plus g\u00e9n\u00e9raux\u00a0:<\/p>\n
- \n
woocommerce_product_options_general_product_data<\/code>("G\u00e9n\u00e9ral")<\/li>\nwoocommerce_product_options_inventory_product_data<\/code>("Inventaire")<\/li>\nwoocommerce_product_options_shipping<\/code>("Exp\u00e9dition")<\/li>\nwoocommerce_product_options_related<\/code>("Produits li\u00e9s")<\/li>\nwoocommerce_product_options_attributes<\/code>("Les attributs")<\/li>\nwoocommerce_product_options_advanced<\/code>("Avanc\u00e9")<\/li>\n<\/ul>\nAjout d’une entr\u00e9e de formulaire<\/h3>\n
En ce qui concerne la sortie d’une entr\u00e9e de formulaire, vous pouvez sortir manuellement l’entr\u00e9e de formulaire HTML (par exemple
<input type=\"text\"...><\/code>), mais WooCommerce offre des fonctions simples pour ajouter facilement des champs de tous types. Je recommande de les utiliser. Consultez l’ aper\u00e7u<\/a> de WooCommerce de tous les types d’entr\u00e9e possibles ici et des arguments que vous pouvez transmettre pour contr\u00f4ler la sortie.<\/p>\nEn ce qui concerne ce didacticiel, je vais ajouter une simple saisie de texte dans l’onglet Inventaire pour \u00e9crire le nombre d’articles dans chaque package. En ce qui concerne la cl\u00e9 sous laquelle votre valeur personnalis\u00e9e est enregistr\u00e9e, ajoutez toujours un trait de soulignement "_" avant, dans mon cas, ce sera "_number_in_package":<\/p>\n
add_action('woocommerce_product_options_inventory_product_data', function() {\n woocommerce_wp_text_input([\n 'id' => '_number_in_package',\n 'label' => __('Number in package', 'txtdomain'),\n ]);\n});<\/code><\/pre>\nEnregistrer et modifier un produit. Vous devriez voir votre champ personnalis\u00e9 appara\u00eetre en bas de l’onglet Inventaire\u00a0:<\/p>\n
![\"Comment](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f74b757.png\")
<\/a><\/p>\nLe champ personnalis\u00e9 "Num\u00e9ro dans le colis" ajout\u00e9 en bas<\/p>\n
Une note sur la visibilit\u00e9 du champ selon le type de produit<\/h3>\n
La m\u00e9tabox de donn\u00e9es produit de WooCommerce contient une grande quantit\u00e9 de Javascript qui masque et affiche \u00e0 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\u00e9cifiques, en fournissant des noms de classe sp\u00e9cifiques \u00e0 votre champ.<\/p>\n
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\u00e9 si le produit est un produit variable. WooCommerce \u00e9coute des noms de classe sp\u00e9cifiques tels que
show_if_<producttype><\/code>ethide_if_<producttype><\/code>et vous pouvez combiner plusieurs classes pour affiner le moment o\u00f9 votre champ doit \u00eatre masqu\u00e9 ou visible.<\/p>\nPar exemple, si je souhaite que mon champ ne soit visible que pour des produits simples ; Je vais ajouter ceci dans ‘
wrapper_class<\/code>‘ \u00e0 ma saisie de champ\u00a0:<\/p>\nadd_action('woocommerce_product_options_inventory_product_data', function() {\n woocommerce_wp_text_input([\n 'id' => '_number_in_package',\n 'label' => __('Number in package', 'txtdomain'),\n 'wrapper_class' => 'show_if_simple'\n ]);\n});<\/code><\/pre>\nVous pouvez \u00e9galement d\u00e9finir
wrapper_class<\/code>par exemple ‘show_if_simple show_if_grouped<\/code>‘ pour que le champ ne soit visible que pour les produits simples ou group\u00e9s. Essayez-le vous-m\u00eame !<\/p>\nEnregistrement de votre champ personnalis\u00e9<\/h3>\n
\u00c0 l’heure actuelle, tout ce que vous entrez dans votre champ n’est pas enregistr\u00e9. Faisons cela ensuite. Nous nous accrochons
woocommerce_process_product_meta<\/code>et enregistrons la valeur du global de PHP$_POST<\/code>(soumission de formulaire).<\/p>\nadd_action('woocommerce_process_product_meta', function($post_id) {\n $product = wc_get_product($post_id);\n $num_package = isset($_POST['_number_in_package'])? $_POST['_number_in_package']: '';\n $product->update_meta_data('_number_in_package', sanitize_text_field($num_package));\n $product->save();\n});<\/code><\/pre>\nPermettez-moi d’expliquer rapidement le code ci-dessus. Vous pouvez simplement enregistrer le champ en utilisant
update_post_meta()<\/code>, mais dans les versions plus r\u00e9centes de WooCommerce, la gestion des m\u00e9ta-produits a \u00e9t\u00e9 consid\u00e9rablement am\u00e9lior\u00e9e. Tant que vous avez l’objet produit (que nous obtenons en appelantwc_get_product()<\/code>avec l’ID de publication), vous pouvez facilement manipuler toutes les informations sur le produit dans l’objet, et enfin appelersave()<\/code>une fois pour mettre \u00e0 jour les modifications. Ceci est tr\u00e8s avantageux, surtout si vous souhaitez enregistrer plusieurs champs – auquel cas vous n’avez pas besoin d’ex\u00e9cuter des op\u00e9rations de base de donn\u00e9es pour chaque champ, juste une derni\u00e8re fois lorsque vous appelezsave()<\/code>.<\/p>\nUtilisez
update_meta_data()<\/code>sur l’objet pour chaque m\u00e9ta-donn\u00e9e que vous souhaitez enregistrer.<\/p>\nAvec la fonction ci-dessus, votre champ devrait maintenant \u00eatre enregistr\u00e9 lorsque vous le mettez \u00e0 jour dans le produit d’\u00e9dition\u00a0! Notez \u00e9galement qu’en utilisant les fonctions de WooCommerce pour g\u00e9n\u00e9rer le champ, vous n’avez pas besoin d’obtenir manuellement la valeur de votre champ avant de g\u00e9n\u00e9rer le champ – c’est enti\u00e8rement automatique.<\/p>\n
Sortie de votre champ personnalis\u00e9 en frontend<\/h3>\n
La premi\u00e8re \u00e9tape consiste \u00e0 d\u00e9terminer quel crochet vous souhaitez utiliser pour g\u00e9n\u00e9rer votre champ personnalis\u00e9. WooCommerce propose de nombreux crochets disponibles pour contr\u00f4ler sp\u00e9cifiquement o\u00f9 vous voulez la sortie. Si vous n’\u00eates pas s\u00fbr, jetez un \u0153il \u00e0
plugins\/woocommerce\/templates\/<\/code>ces fichiers et vous trouverez facilement un crochet appropri\u00e9. Vous pouvez \u00e9galement remplacer le mod\u00e8le et ajouter la sortie dans le mod\u00e8le, mais je recommande toujours d’utiliser des crochets \u00e0 la place.<\/p>\nQuant \u00e0 moi, je souhaite que mon champ personnalis\u00e9 soit g\u00e9n\u00e9r\u00e9 dans un seul produit, \u00e0 l’int\u00e9rieur de la m\u00e9ta div – le long de laquelle WooCommerce g\u00e9n\u00e8re le SKU et la cat\u00e9gorie. Pour cela, je vais utiliser le crochet
woocommerce_product_meta_start<\/code>. \u00c0 l’int\u00e9rieur des crochets (comme avec presque tous les crochets de mod\u00e8le), vous pouvez acc\u00e9der \u00e0 l’objet de publication global. Je suivrai la m\u00eame r\u00e8gle empirique que pour sauver mon champ; utiliserget_meta()<\/code>sur l’objet produit pour obtenir mon champ personnalis\u00e9\u00a0:<\/p>\nadd_action('woocommerce_product_meta_start', function() {\n global $post;\n $product = wc_get_product($post->ID);\n $num_package = $product->get_meta('_number_in_package');\n if (!empty($num_package)) {\n printf('<div class=\"custom-sku\">%s: %s<\/div>', __('Number in package', 'txtdomain'), $num_package);\n }\n});<\/code><\/pre>\nAjout d’un onglet et d’un panneau personnalis\u00e9s \u00e0 la m\u00e9tabox des donn\u00e9es produit<\/h2>\n
Si vous souhaitez ajouter une collection de champs personnalis\u00e9s qui vont logiquement ensemble, il peut \u00eatre judicieux de les regrouper dans un onglet personnalis\u00e9. Pour ajouter un onglet personnalis\u00e9 \u00e0 la m\u00e9tabo\u00eete de donn\u00e9es produit, nous devons nous accrocher \u00e0 un filtre pour ajouter l’onglet lui-m\u00eame et \u00e0 un crochet pour afficher le contenu du panneau. Enfin, nous devons encore ajouter le m\u00eame crochet que ci-dessus pour enregistrer nos champs.<\/p>\n
Par exemple, je vais ajouter un panneau personnalis\u00e9 appel\u00e9 "Informations suppl\u00e9mentaires" o\u00f9 je veux ajouter une entr\u00e9e de texte, une case \u00e0 cocher et une entr\u00e9e num\u00e9rique.<\/p>\n
Tout d’abord, nous filtrons
woocommerce_product_data_tabs<\/code>et ajoutons notre onglet \u00e0 son tableau.<\/p>\nadd_filter('woocommerce_product_data_tabs', function($tabs) {\n $tabs['additional_info'] = [\n 'label' => __('Additional info', 'txtdomain'),\n 'target' => 'additional_product_data',\n 'class' => ['hide_if_external'],\n 'priority' => 25\n ];\n return $tabs;\n});<\/code><\/pre>\nIl y a quelques arguments utiles que nous pouvons fournir ici. Vous pouvez par exemple utiliser ‘
class<\/code>‘ pour contr\u00f4ler la visibilit\u00e9 de l’onglet en fonction du type de produit. Si vous l’avez manqu\u00e9, consultez la section sur la visibilit\u00e9 des champs mentionn\u00e9e ci-dessus<\/a>. Mais gardez \u00e0 l’esprit que dans les onglets, vous devez fournir les classes sous forme de tableau et non de cha\u00eene. Vous pouvez \u00e9galement fournir ‘priority<\/code>‘ pour d\u00e9cider o\u00f9 votre onglet doit appara\u00eetre. Utiliser par exemple 25 positionnera l’onglet juste apr\u00e8s "Inventaire".<\/p>\nPar d\u00e9faut, votre onglet appara\u00eetra avec une cl\u00e9 \u00e0 molette comme ic\u00f4ne. Malheureusement, il n’y a (pour l’instant) aucun moyen de le contr\u00f4ler via le filtre. Si cela est important pour vous, vous pouvez ajouter un CSS d’administration et fournir une classe diff\u00e9rente \u00e0 votre onglet. Voici un aper\u00e7u<\/a> des ic\u00f4nes disponibles dans WooCommerce.<\/p>\n
Sortie panneau<\/h3>\n
L’\u00e9tape suivante consiste \u00e0 accrocher
woocommerce_product_data_panels<\/code>et \u00e0 afficher le contenu de votre panneau. Une note importante ici est de commencer la sortie avecdiv<\/code>unid<\/code>attribut du m\u00eame nom que celui que vous avez fourni comme cl\u00e9 dans les onglets (dans mon cas ‘additional_info<\/code>‘). En ce qui concerne le contenu, c’est \u00e0 vous de d\u00e9cider – 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\u00eames avantages pour masquer ou afficher des champs fonctionneront \u00e9galement ici.<\/p>\nadd_action('woocommerce_product_data_panels', function() {\n ?><div id=\"additional_product_data\" class=\"panel woocommerce_options_panel hidden\"><?php\n\u00a0\n woocommerce_wp_text_input([\n 'id' => '_dummy_text_input',\n 'label' => __('Dummy text input', 'txtdomain'),\n 'wrapper_class' => 'show_if_simple',\n ]);\n woocommerce_wp_checkbox([\n 'id' => '_dummy_checkbox',\n 'label' => __('Dummy checkbox', 'txtdomain'),\n 'wrapper_class' => 'hide_if_grouped',\n ]);\n woocommerce_wp_text_input([\n 'id' => '_dummy_number_input',\n 'label' => __('Dummy number input', 'txtdomain'),\n 'type' => 'number',\n 'custom_attributes' => [\n 'step' => '1',\n 'min' => '0'\n ]\n ]);\n ?><\/div><?php\n});<\/code><\/pre>\nApr\u00e8s l’enregistrement, vous devriez maintenant voir l’onglet et son contenu dans la m\u00e9tabox des donn\u00e9es du produit (sauf si le produit est un produit externe bien s\u00fbr).<\/p>\n