Cómo agregar campos y pestañas personalizados en el Metabox de datos de productos de WooCommerce por código

En esta publicación, aprenderemos cómo agregar sus metacampos personalizados en el metabox de datos del producto de WooCommerce; cómo agregar campos y también cómo agregar su propia pestaña personalizada. Entraremos en detalles sobre cómo agregar sus campos, dónde agregarlos, cómo guardarlos y, finalmente, cómo mostrarlos en la interfaz.

Adición de campos personalizados a paneles existentes

Primero, veremos cómo agregar un campo a los paneles existentes. Necesitamos enganchar en dos ganchos; uno para generar el campo y otro para guardar el valor del mismo. El primer enlace depende de la pestaña en la que desea mostrar su campo.

El metabox de datos del producto

Tenga en cuenta que la visibilidad de la pestaña difiere según el tipo de producto. Por ejemplo, la pestaña "General" se elimina cuando cambia a un tipo de producto agrupado. Por lo tanto, no solo debe considerar dónde encajan lógicamente 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ás generales:

• woocommerce_product_options_general_product_data("General")
• woocommerce_product_options_inventory_product_data("Inventario")
• woocommerce_product_options_shipping("Transporte")
• woocommerce_product_options_related("Productos vinculados")
• woocommerce_product_options_attributes("Atributos")
• woocommerce_product_options_advanced("Avanzado")

Agregar una entrada de formulario

En cuanto a la salida de una entrada de formulario, puede generar manualmente la entrada de formulario HTML (por ejemplo <input type="text"...>), pero WooCommerce ofrece funciones simples para agregar fácilmente campos de cualquier tipo. Recomiendo usar esos. Consulte la descripción general de WooCommerce de todos los tipos de entrada posibles aquí y qué argumentos puede pasar para controlar la salida.

En cuanto a este tutorial, agregaré una entrada de texto simple dentro de la pestaña de inventario para escribir la cantidad de artículos en cada paquete. En cuanto a la clave en la que se guarda su valor personalizado, siempre agregue un guión bajo "_" antes, en mi caso será "_number_in_package":

Guardar y editar un producto. Debería ver aparecer su campo personalizado en la parte inferior de la pestaña Inventario:

El campo personalizado "Número en el paquete" agregado en la parte inferior

Una nota sobre la visibilidad del campo según el tipo de producto

El metabox de datos de productos de WooCommerce viene con una gran cantidad de Javascript que oculta y muestra campos y pestañas/paneles. Puede utilizar esto fácilmente si desea que su campo sea visible solo para tipos de productos específicos, proporcionando nombres de clase específicos a su campo.

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íficos, como show_if_<producttype>y hide_if_<producttype>, y puede combinar varias clases para ajustar cuándo su campo debe estar oculto o visible.

Por ejemplo, si quiero que mi campo solo sea visible para productos simples; Agregaré esto en ‘ wrapper_class‘ a mi entrada de campo:

También puede establecer, wrapper_classpor ejemplo, ‘ show_if_simple show_if_grouped‘ para que el campo solo sea visible para productos que son simples o agrupados. ¡Pruébelo usted mismo!

Guardando tu campo personalizado

A partir de ahora, todo lo que ingrese en su campo no se guardará. Hagamos eso a continuación. Nos enganchamos woocommerce_process_product_metay guardamos el valor de PHP global $_POST(envío de formulario).

Permítanme explicar rápidamente el código anterior. Simplemente puede guardar el campo usando update_post_meta(), pero en las versiones más recientes de WooCommerce, el manejo de la meta del producto se ha mejorado mucho. Siempre que tenga el objeto del producto (que obtenemos al llamar wc_get_product()con la ID de la publicación), puede manipular fácilmente cualquier información del producto en el objeto y, finalmente, llamar save()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 última vez cuando llama a save().

Úselo update_meta_data()en el objeto para cada metadato que desee guardar.

¡Con la función anterior, su campo ahora debería guardarse cuando lo actualice en editar producto! También 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ático.

Salida de su campo personalizado en la interfaz

El primer paso es averiguar qué enlace desea usar para generar su campo personalizado. WooCommerce ofrece muchos ganchos disponibles para controlar específicamente dónde desea la salida. Si no está seguro, eche un vistazo plugins/woocommerce/templates/y dentro de estos archivos puede encontrar fácilmente un gancho apropiado. También puede anular la plantilla y agregar la salida en la plantilla, pero siempre recomiendo usar ganchos en su lugar.

En cuanto a mí, quiero que mi campo personalizado se genere en un solo producto, dentro del metadiv, junto con WooCommerce que genera el SKU y la categoría. Para esto usaré el gancho woocommerce_product_meta_start. Dentro de los ganchos (como con casi todos los ganchos de plantilla) puede acceder al objeto de publicación global. Seguiré la misma regla general que al guardar mi campo; usar get_meta()en el objeto del producto para obtener mi campo personalizado:

Agregar una pestaña y un panel personalizados al metabox de datos del producto

Si desea agregar una colección de campos personalizados que lógicamente pertenecen juntos, podría ser una buena idea agruparlos dentro de una pestaña personalizada. Para agregar una pestaña personalizada al metabox de datos del producto, debemos conectarnos a un filtro para agregar la pestaña en sí y un enlace para mostrar el contenido del panel. Finalmente, todavía necesitamos agregar el mismo gancho que arriba para guardar nuestros campos.

Por ejemplo, voy a agregar un panel personalizado llamado "Información adicional" donde quiero agregar una entrada de texto, una casilla de verificación y una entrada de número.

Primero, filtramos woocommerce_product_data_tabsy agregamos nuestra pestaña a su matriz.

Hay algunos argumentos útiles que podemos proporcionar aquí. Por ejemplo, puede usar ‘ class‘ para controlar la visibilidad de la pestaña según el tipo de producto. Si te lo perdiste, consulta la sección sobre visibilidad de campo mencionada anteriormente. Pero tenga en cuenta que en las pestañas debe proporcionar las clases como una matriz, no como una cadena. También puede proporcionar ‘ priority‘ para decidir dónde debe aparecer su pestaña. El uso de, por ejemplo, 25 colocará la pestaña justo después de "Inventario".

Por defecto, su pestaña aparecerá con una llave inglesa como icono. Desafortunadamente, no hay (a partir de ahora) forma de controlarlo a través del filtro. Si esto es importante para usted, puede agregar CSS de administrador y proporcionar una clase diferente a su pestaña. Aquí hay una descripción general de los íconos disponibles en WooCommerce.

Salida de panel

El siguiente paso es conectar woocommerce_product_data_panelsy generar el contenido de su panel. Una nota importante aquí es comenzar la salida con divun idatributo del mismo nombre que proporcionó como clave en las pestañas (en mi caso ‘ additional_info‘). 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én funcionarán aquí.

Después de guardar, ahora debería ver la pestaña y su contenido en el metabox de datos del producto (a menos que el producto sea un producto externo, por supuesto).

Todo lo que queda es guardar los datos ingresados ​​en sus campos personalizados, y para esto usamos el mismo proceso que el anterior:

Nota: en WooCommerce hay una regla general en la que todas las casillas de verificación se guardan como " yes" si están marcadas, o como cadenas vacías si no están marcadas. Al seguir la regla de WooCommerce y guardar mi casilla de verificación marcada como ‘ yes‘, esto asegura que woocommerce_wp_checkbox()funcione según lo previsto cuando obtenga el valor actual de mi campo.

Conclusión

En esta publicación, mostraré cómo agregar sus campos personalizados al metabox de datos de productos de WooCommerce, cómo guardarlos, cómo controlar su visibilidad y un ejemplo simple de salida de su campo en la interfaz. También mostré cómo agregar una pestaña personalizada al metabox y agregar sus campos allí. ¡Espero que esto te haya ayudado a personalizar WooCommerce tú mismo!