Cómo crear un panel de configuraciones personalizadas en WooCommerce

WooCommerce es, de lejos, el principal complemento de comercio electrónico para WordPress. En el momento de redactar este documento, tiene más de 3 millones de instalaciones activas y, según se informa, está detrás de más del 40% de todas las tiendas en línea..

Una de las razones de la popularidad de WooCommerce es su capacidad de extensión. Al igual que WordPress, WooCommerce está lleno de acciones y filtros que los desarrolladores pueden conectar si desean extender la funcionalidad predeterminada de WooCommerce..

Un gran ejemplo de esto es la capacidad de crear un panel de datos personalizado.

Qué está cubierto en este tutorial?

Este tutorial se divide en dos partes. En la primera parte, vamos a ver:

• añadiendo un panel personalizado a WooCommerce
• añadiendo campos personalizados al panel
• desinfectar y guardar valores de campo personalizados

Luego, en la segunda parte, veremos:

• Mostrar campos personalizados en la página del producto.
• Cambio del precio del producto en función del valor de los campos personalizados.
• Visualización de valores de campo personalizados en el carrito y orden.

¿Qué es un panel de datos personalizados de WooCommerce??

Cuando crea un nuevo producto en WooCommerce, ingresa la mayoría de la información crítica del producto, como el precio y el inventario, en el Datos del producto sección.

En la captura de pantalla de arriba, puedes ver que Datos del producto la sección se divide en paneles: las pestañas abajo a la izquierda, por ejemplo,. General, Inventario, etc., cada uno abre diferentes paneles en la vista principal a la derecha.

En este tutorial, veremos cómo crear un panel personalizado para los datos del producto y agregarle algunos campos personalizados. Luego veremos cómo usar esos campos personalizados en la parte delantera y guardar sus valores en los pedidos de los clientes..

En nuestro escenario de ejemplo, vamos a agregar un panel 'Giftwrap' que contiene algunos campos personalizados:

• una casilla de verificación para incluir una opción de envoltorio de regalo para el producto en la página del producto
• una casilla de verificación para habilitar un campo de entrada donde un cliente puede ingresar un mensaje en la página del producto
• un campo de entrada para agregar un precio para la opción de envolver regalos; El precio se añadirá al precio del producto en el carrito.

En el extremo posterior, se verá así:

Y en la parte delantera, se verá algo como esto:

Crear un nuevo complemento

Debido a que estamos ampliando la funcionalidad, vamos a crear un complemento en lugar de agregar nuestro código a un tema. Eso significa que nuestros usuarios podrán conservar esta funcionalidad adicional incluso si cambian el tema de su sitio. Crear un complemento está fuera del alcance de este tutorial, pero si necesita ayuda, eche un vistazo a este curso de Tuts + Coffee Break para crear su primer complemento: 

Nuestro complemento constará de dos clases: una para manejar las cosas en el administrador y otra para manejar todo en la parte frontal. Nuestra estructura de archivos de complementos se verá así:

Clase de admin

En primer lugar, debemos crear nuestra clase para manejar todo lo que está al final. En una carpeta llamada clases, crear un nuevo archivo llamado class-tpwcp-admin.php.

Esta clase manejará lo siguiente:

• Cree la pestaña personalizada (la pestaña es el elemento en el que se puede hacer clic a la izquierda de la sección Datos del producto).
• Agregue los campos personalizados al panel personalizado (el panel es el elemento que se muestra cuando hace clic en una pestaña).
• Decida los tipos de productos donde se habilitará el panel.
• Desinfecte y guarde los valores de campo personalizados.

Pegue el siguiente código en ese nuevo archivo. Caminaremos paso a paso después..

 __ ('Giftwrap', 'tpwcp'), // El nombre de su panel 'target' => 'gifwrap_panel', // Se usará para crear un enlace de anclaje, por lo que debe ser único 'class' => array (' giftwrap_tab ',' show_if_simple ',' show_if_variable '), // Clase para la pestaña de su panel: ayuda a ocultar / mostrar según el tipo de producto' prioridad '=> 80, // Donde aparecerá su panel. Por defecto, 70 es el último elemento); devuelve $ tabs;  / ** * Mostrar campos para el nuevo panel * @ver https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html * @since 1.0.0 * / public function display_giftwrap_fields () ? > 
 
  'include_giftwrap_option', 'label' => __ ('Incluir opción de giftwrap', 'tpwcp'), 'desc_tip' => __ ('Seleccione esta opción para mostrar las opciones de giftwrapping para este producto', 'tpwcp')))); woocommerce_wp_checkbox (array ('id' => 'include_custom_message', 'label' => __ ('Incluir mensaje personalizado', 'tpwcp'), 'desc_tip' => __ ('Seleccione esta opción para permitir que los clientes incluyan un mensaje personalizado ',' tpwcp '))); woocommerce_wp_text_input (array ('id' => 'giftwrap_cost', 'label' => __ ('Costes de envoltorio de regalos', 'tpwcp'), 'type' => 'number', 'desc_tip' => __ ('Enter the cost de la envoltura de regalos de este producto ',' tpwcp '))); ?> 
 
 update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); // ¿Guardar la opción include_giftwrap_option $ include_custom_message = isset ($ _POST ['include_custom_message'])? 'si no'; $ product-> update_meta_data ('include_custom_message', sanitize_text_field ($ include_custom_message)); // ¿Guardar la configuración de giftwrap_cost $ giftwrap_cost = isset ($ _POST ['giftwrap_cost'])? $ _POST ['giftwrap_cost']: "; $ product-> update_meta_data ('giftwrap_cost', sanitize_text_field ($ giftwrap_cost)); $ product-> save (); 

Crear la pestaña personalizada

Para crear la pestaña personalizada, enganchamos en el woocommerce_product_data_tabs filtro usando nuestro create_giftwrap_tab función. Esto pasa el WooCommerce $ tabs objeto en, que luego modificamos usando los siguientes parámetros:

• etiqueta: usa esto para definir el nombre de tu pestaña.
• objetivo: esto se usa para crear un enlace de anclaje, por lo que debe ser único.
  
• clase: un conjunto de clases que se aplicarán a su panel.
• prioridad: define donde quieres que aparezca tu pestaña.

Tipos de productos

En esta etapa, vale la pena considerar para qué tipos de productos nos gustaría que se habilite nuestro panel. Por defecto, hay cuatro tipos de productos WooCommerce: simple, variable, agrupado y afiliado. Digamos que para nuestro escenario de ejemplo, solo queremos que nuestro panel Giftwrap esté habilitado para tipos de productos simples y variables.

Para lograr esto, añadimos el show_if_simple y show_if_variable clases al parámetro de clase anterior. Si no quisiéramos habilitar el panel para tipos de productos variables, simplemente omitiríamos show_if_variable clase.

Añadir campos personalizados

El siguiente gancho que usamos es woocommerce_product_data_panels. Esta acción nos permite generar nuestro propio marcado para el panel de envoltorio de regalo. En nuestra clase, la función. display_giftwrap_fields crea un par de div Envoltorios, dentro de los cuales usamos algunas funciones de WooCommerce para crear campos personalizados. 

Observe cómo carné de identidad atributo para nuestro exterior div, giftwrap_panel, coincide con el valor que pasamos en el objetivo parámetro de nuestra pestaña giftwrap arriba. Así es como WooCommerce sabrá mostrar este panel cuando hacemos clic en la pestaña Giftwrap.

Funciones de campo personalizado de WooCommerce

En nuestro ejemplo, las dos funciones que estamos usando para crear nuestros campos son:

• woocommerce_wp_checkbox
• woocommerce_wp_text_input

WooCommerce proporciona estas funciones específicamente con el propósito de crear campos personalizados. Toman una serie de argumentos, incluyendo:

• carné de identidad: Este es el ID de tu campo. Debe ser único, y lo haremos referencia más adelante en nuestro código..
• etiqueta: esta es la etiqueta que le aparecerá al usuario.
• desc_tip: esta es la información sobre herramientas opcional que aparece cuando el usuario se desplaza sobre el icono de signo de interrogación junto a la etiqueta.

Tenga en cuenta también que la woocommerce_wp_text_input función también tiene una tipo argumento, donde puedes especificar número para un campo de entrada de número, o texto para un campo de entrada de texto. Nuestro campo se utilizará para ingresar un precio, por lo que lo especificamos como número.

Guardar los campos personalizados

La parte final de nuestra clase de administración utiliza el woocommerce_process_product_meta Acción para guardar nuestros valores de campo personalizados..

Para estandarizar y optimizar la forma en que almacena y recupera los datos, WooCommerce 3.0 adoptó un método CRUD (Crear, Leer, Actualizar, Eliminar) para configurar y obtener datos del producto. Puede encontrar más información sobre el pensamiento detrás de esto en el anuncio de WooCommerce 3.0.

Con esto en mente, en lugar de los más familiares get_post_meta y update_post_meta métodos que podríamos haber usado en el pasado, ahora usamos el $ post_id para crear un WooCommerce $ producto objeto, y luego aplicar la update_meta_data Método para guardar los datos. Por ejemplo:

$ producto = wc_get_product ($ post_id); $ include_giftwrap_option = isset ($ _POST ['include_giftwrap_option'])? 'si no'; $ product-> update_meta_data ('include_giftwrap_option', sanitize_text_field ($ include_giftwrap_option)); $ producto-> guardar ();

Tenga en cuenta también que tenemos cuidado de limpiar nuestros datos antes de guardarlos en la base de datos. Hay más información sobre datos de saneamiento aquí: 

Archivo de complemento principal

Cuando hayas creado tu readme.txt archivo y su archivo de complemento principal tutsplus-woocommerce-panel.php, Puedes agregar este código a tu archivo principal.

en eso();  add_action ('plugins_loaded', 'tpwcp_init');

Esto iniciará tu clase de administrador..

Cuando active su complemento en un sitio (junto con WooCommerce) y luego vaya a crear un nuevo producto, verá su nuevo panel de Giftwrap disponible, junto con campos personalizados. Puede actualizar los campos y guardarlos ... Pero aún no verá nada en la parte delantera.

Conclusión

Recapitulemos lo que hemos visto hasta ahora en este artículo..

Hemos visto un ejemplo de escenario para agregar un panel personalizado 'Giftwrap' a WooCommerce. Hemos creado un complemento y añadido una clase para crear el panel. Dentro de la clase, también hemos utilizado las funciones de WooCommerce para agregar campos personalizados, y luego hemos saneado y guardado esos valores de campo.