![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f68509c.png\")
<\/a><\/p>\nEl metabox de datos del producto<\/p>\n
Tenga en cuenta que la visibilidad de la pesta\u00f1a difiere seg\u00fan el tipo de producto. Por ejemplo, la pesta\u00f1a "General" se elimina cuando cambia a un tipo de producto agrupado. Por lo tanto, no solo debe considerar d\u00f3nde encajan l\u00f3gicamente sus campos personalizados, sino que debe considerar un panel que sea visible para todos los tipos de productos deseados. Esto es una lista de los ganchos disponibles m\u00e1s generales:<\/p>\n
- \n
woocommerce_product_options_general_product_data<\/code>("General")<\/li>\nwoocommerce_product_options_inventory_product_data<\/code>("Inventario")<\/li>\nwoocommerce_product_options_shipping<\/code>("Transporte")<\/li>\nwoocommerce_product_options_related<\/code>("Productos vinculados")<\/li>\nwoocommerce_product_options_attributes<\/code>("Atributos")<\/li>\nwoocommerce_product_options_advanced<\/code>("Avanzado")<\/li>\n<\/ul>\nAgregar una entrada de formulario<\/h3>\n
En cuanto a la salida de una entrada de formulario, puede generar manualmente la entrada de formulario HTML (por ejemplo
<input type=\"text\"...><\/code>), pero WooCommerce ofrece funciones simples para agregar f\u00e1cilmente campos de cualquier tipo. Recomiendo usar esos. Consulte la descripci\u00f3n general<\/a> de WooCommerce de todos los tipos de entrada posibles aqu\u00ed y qu\u00e9 argumentos puede pasar para controlar la salida.<\/p>\nEn cuanto a este tutorial, agregar\u00e9 una entrada de texto simple dentro de la pesta\u00f1a de inventario para escribir la cantidad de art\u00edculos en cada paquete. En cuanto a la clave en la que se guarda su valor personalizado, siempre agregue un gui\u00f3n bajo "_" antes, en mi caso ser\u00e1 "_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>\nGuardar y editar un producto. Deber\u00eda ver aparecer su campo personalizado en la parte inferior de la pesta\u00f1a Inventario:<\/p>\n
![\"C\u00f3mo](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-152172-61e4d3f74b757.png\")
<\/a><\/p>\nEl campo personalizado "N\u00famero en el paquete" agregado en la parte inferior<\/p>\n
Una nota sobre la visibilidad del campo seg\u00fan el tipo de producto<\/h3>\n
El metabox de datos de productos de WooCommerce viene con una gran cantidad de Javascript que oculta y muestra campos y pesta\u00f1as\/paneles. Puede utilizar esto f\u00e1cilmente si desea que su campo sea visible solo para tipos de productos espec\u00edficos, proporcionando nombres de clase espec\u00edficos a su campo.<\/p>\n
Digamos que desea que su campo solo se muestre si el producto es de tipo producto simple, o desea que se oculte si el producto es un producto variable. WooCommerce escucha nombres de clases espec\u00edficos, como
show_if_<producttype><\/code>yhide_if_<producttype><\/code>, y puede combinar varias clases para ajustar cu\u00e1ndo su campo debe estar oculto o visible.<\/p>\nPor ejemplo, si quiero que mi campo solo sea visible para productos simples; Agregar\u00e9 esto en ‘
wrapper_class<\/code>‘ a mi entrada de campo:<\/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>\nTambi\u00e9n puede establecer,
wrapper_class<\/code>por ejemplo, ‘show_if_simple show_if_grouped<\/code>‘ para que el campo solo sea visible para productos que son simples o agrupados. \u00a1Pru\u00e9belo usted mismo!<\/p>\nGuardando tu campo personalizado<\/h3>\n
A partir de ahora, todo lo que ingrese en su campo no se guardar\u00e1. Hagamos eso a continuaci\u00f3n. Nos enganchamos
woocommerce_process_product_meta<\/code>y guardamos el valor de PHP global$_POST<\/code>(env\u00edo de formulario).<\/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>\nPerm\u00edtanme explicar r\u00e1pidamente el c\u00f3digo anterior. Simplemente puede guardar el campo usando
update_post_meta()<\/code>, pero en las versiones m\u00e1s recientes de WooCommerce, el manejo de la meta del producto se ha mejorado mucho. Siempre que tenga el objeto del producto (que obtenemos al llamarwc_get_product()<\/code>con la ID de la publicaci\u00f3n), puede manipular f\u00e1cilmente cualquier informaci\u00f3n del producto en el objeto y, finalmente, llamarsave()<\/code>una vez para actualizar cualquier cambio. Esto es muy beneficioso, especialmente si desea guardar varios campos, en cuyo caso no necesita ejecutar operaciones de base de datos para cada campo, solo esa \u00faltima vez cuando llama asave()<\/code>.<\/p>\n\u00daselo
update_meta_data()<\/code>en el objeto para cada metadato que desee guardar.<\/p>\n\u00a1Con la funci\u00f3n anterior, su campo ahora deber\u00eda guardarse cuando lo actualice en editar producto! Tambi\u00e9n tenga en cuenta que al usar las funciones de WooCommerce para generar el campo, no tiene que obtener manualmente el valor de su campo antes de generar el campo; es completamente autom\u00e1tico.<\/p>\n
Salida de su campo personalizado en la interfaz<\/h3>\n
El primer paso es averiguar qu\u00e9 enlace desea usar para generar su campo personalizado. WooCommerce ofrece muchos ganchos disponibles para controlar espec\u00edficamente d\u00f3nde desea la salida. Si no est\u00e1 seguro, eche un vistazo
plugins\/woocommerce\/templates\/<\/code>y dentro de estos archivos puede encontrar f\u00e1cilmente un gancho apropiado. Tambi\u00e9n puede anular la plantilla y agregar la salida en la plantilla, pero siempre recomiendo usar ganchos en su lugar.<\/p>\nEn cuanto a m\u00ed, quiero que mi campo personalizado se genere en un solo producto, dentro del metadiv, junto con WooCommerce que genera el SKU y la categor\u00eda. Para esto usar\u00e9 el gancho
woocommerce_product_meta_start<\/code>. Dentro de los ganchos (como con casi todos los ganchos de plantilla) puede acceder al objeto de publicaci\u00f3n global. Seguir\u00e9 la misma regla general que al guardar mi campo; usarget_meta()<\/code>en el objeto del producto para obtener mi campo personalizado:<\/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>\nAgregar una pesta\u00f1a y un panel personalizados al metabox de datos del producto<\/h2>\n
Si desea agregar una colecci\u00f3n de campos personalizados que l\u00f3gicamente pertenecen juntos, podr\u00eda ser una buena idea agruparlos dentro de una pesta\u00f1a personalizada. Para agregar una pesta\u00f1a personalizada al metabox de datos del producto, debemos conectarnos a un filtro para agregar la pesta\u00f1a en s\u00ed y un enlace para mostrar el contenido del panel. Finalmente, todav\u00eda necesitamos agregar el mismo gancho que arriba para guardar nuestros campos.<\/p>\n
Por ejemplo, voy a agregar un panel personalizado llamado "Informaci\u00f3n adicional" donde quiero agregar una entrada de texto, una casilla de verificaci\u00f3n y una entrada de n\u00famero.<\/p>\n
Primero, filtramos
woocommerce_product_data_tabs<\/code>y agregamos nuestra pesta\u00f1a a su matriz.<\/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>\nHay algunos argumentos \u00fatiles que podemos proporcionar aqu\u00ed. Por ejemplo, puede usar ‘
class<\/code>‘ para controlar la visibilidad de la pesta\u00f1a seg\u00fan el tipo de producto. Si te lo perdiste, consulta la secci\u00f3n sobre visibilidad de campo mencionada anteriormente<\/a>. Pero tenga en cuenta que en las pesta\u00f1as debe proporcionar las clases como una matriz, no como una cadena. Tambi\u00e9n puede proporcionar ‘priority<\/code>‘ para decidir d\u00f3nde debe aparecer su pesta\u00f1a. El uso de, por ejemplo, 25 colocar\u00e1 la pesta\u00f1a justo despu\u00e9s de "Inventario".<\/p>\nPor defecto, su pesta\u00f1a aparecer\u00e1 con una llave inglesa como icono. Desafortunadamente, no hay (a partir de ahora) forma de controlarlo a trav\u00e9s del filtro. Si esto es importante para usted, puede agregar CSS de administrador y proporcionar una clase diferente a su pesta\u00f1a. Aqu\u00ed hay una descripci\u00f3n general<\/a> de los \u00edconos disponibles en WooCommerce.<\/p>\n
Salida de panel<\/h3>\n
El siguiente paso es conectar
woocommerce_product_data_panels<\/code>y generar el contenido de su panel. Una nota importante aqu\u00ed es comenzar la salida condiv<\/code>unid<\/code>atributo del mismo nombre que proporcion\u00f3 como clave en las pesta\u00f1as (en mi caso ‘additional_info<\/code>‘). En cuanto al contenido, depende de usted: puede agregar cualquier HTML que desee, pero le recomiendo usar las funciones de WooCommerce para generar campos de formulario. Los mismos beneficios para ocultar o mostrar campos tambi\u00e9n funcionar\u00e1n aqu\u00ed.<\/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>\nDespu\u00e9s de guardar, ahora deber\u00eda ver la pesta\u00f1a y su contenido en el metabox de datos del producto (a menos que el producto sea un producto externo, por supuesto).<\/p>\n