Cómo crear un panel de configuraciones personalizadas en WooCommerce

Spanish (Español) translation by Luis Chiabrera (you can also view the original English article)

Final product image — What You'll Be Creating

WooCommerce es, de lejos, el complemento de comercio electrónico líder para WordPress. En el momento de la redacción, tiene más de 3 millones de instalaciones activas y, según los informes, 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 extensibilidad. Al igual que WordPress en sí, WooCommerce está repleto de acciones y filtros que los desarrolladores pueden aprovechar si desean extender la funcionalidad predeterminada de WooCommerce.

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

¿Qué está cubierto en este tutorial?

Este tutorial está dividido en dos partes. En la primera parte, vamos a ver:

agregar un panel personalizado a WooCommerce
agregando campos personalizados al panel
limpiar y guardar valores de campo personalizados

Luego, en la segunda parte, veremos:

mostrar campos personalizados en la página del producto
cambiar el precio del producto según el valor de los campos personalizados
mostrar valores de campo personalizados en el carrito y ordenar

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

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

En la captura de pantalla anterior, puede ver que la sección Datos del producto está dividida en paneles: las pestañas de la izquierda, p. Ej. General, Inventario, etc., cada uno abre paneles diferentes en la vista principal a la derecha.

En este tutorial, vamos a ver cómo crear un panel personalizado para datos de productos y agregarle algunos campos personalizados. Luego veremos cómo usar esos campos personalizados en la interfaz y guardar sus valores en los pedidos de los clientes.

En nuestro escenario de ejemplo, vamos a agregar un panel de "envoltura de regalo" que contiene algunos campos personalizados:

una casilla de verificación para incluir una opción 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 regalo; el precio se agregará al precio del producto en el carro

En la parte de atrás, se verá así:

Y en el frente, 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 plugin está fuera del alcance de este tutorial, pero si necesita ayuda, eche un vistazo a este curso de Tuts + Coffee Break al crear su primer plugin:

Wordpress

Conceptos básicos de codificación de WordPress: su primer complemento

Rachel McCollin

Nuestro complemento consistirá en dos clases: una para manejar cosas en el administrador y otra para manejar todo en el front-end. Nuestra estructura de archivos de complemento se verá así:

Clase Admin

Primero, necesitamos crear nuestra clase para manejar todo en el back-end. En una carpeta llamada classes, crea un nuevo archivo llamado class-tpwcp-admin.php.

Esta clase manejará lo siguiente:

Cree la pestaña personalizada (la pestaña es el elemento 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 al hacer clic en una pestaña).
Decidir los tipos de productos donde se habilitará el panel.
Limpie y guarde los valores de campo personalizados.

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

<?php
/**
 * Class to create additional product panel in admin
 * @package TPWCP
 */

// Exit if accessed directly
if( ! defined( 'ABSPATH' ) ) {
    exit;
}

if( ! class_exists( 'TPWCP_Admin' ) ) {
    class TPWCP_Admin {

        public function __construct() {
        }

        public function init() {
      	// Create the custom tab
            add_filter( 'woocommerce_product_data_tabs', array( $this, 'create_giftwrap_tab' ) );
    		// Add the custom fields
            add_action( 'woocommerce_product_data_panels', array( $this, 'display_giftwrap_fields' ) );
    		// Save the custom fields
    		add_action( 'woocommerce_process_product_meta', array( $this, 'save_fields' ) );
        }

		/**
		 * Add the new tab to the $tabs array
		 * @see 	https://github.com/woocommerce/woocommerce/blob/e1a82a412773c932e76b855a97bd5ce9dedf9c44/includes/admin/meta-boxes/class-wc-meta-box-product-data.php
		 * @param	$tabs
		 * @since	1.0.0
		 */
        public function create_giftwrap_tab( $tabs ) {
			$tabs['giftwrap'] = array(
				'label'         => __( 'Giftwrap', 'tpwcp' ), // The name of your panel
				'target'		=> 'gifwrap_panel', // Will be used to create an anchor link so needs to be unique
				'class'			=> array( 'giftwrap_tab', 'show_if_simple', 'show_if_variable' ), // Class for your panel tab - helps hide/show depending on product type
				'priority'      => 80, // Where your panel will appear. By default, 70 is last item
			);
			return $tabs;
		}

		/**
		 * Display fields for the new panel
		 * @see https://docs.woocommerce.com/wc-apidocs/source-function-woocommerce_wp_checkbox.html
		 * @since	1.0.0
		 */
         public function display_giftwrap_fields() { ?>

			<div id='gifwrap_panel' class='panel woocommerce_options_panel'>
				<div class="options_group">
					<?php
					woocommerce_wp_checkbox(
						array(
							'id'		=> 'include_giftwrap_option',
							'label'		=> __( 'Include giftwrap option', 'tpwcp' ),
							'desc_tip'	=> __( 'Select this option to show giftwrapping options for this product', 'tpwcp' )
						)
					);
					woocommerce_wp_checkbox(
						array(
							'id'		=> 'include_custom_message',
							'label'		=> __( 'Include custom message', 'tpwcp' ),
							'desc_tip'	=> __( 'Select this option to allow customers to include a custom message', 'tpwcp' )
						)
					);
					woocommerce_wp_text_input(
						array(
							'id'		=> 'giftwrap_cost',
							'label'		=> __( 'Giftwrap cost', 'tpwcp' ),
							'type'		=> 'number',
							'desc_tip'	=> __( 'Enter the cost of giftwrapping this product', 'tpwcp' )
						)
					);
				?>
			</div>
		</div>

		<?php }

		/**
		 * Save the custom fields using CRUD method
		 * @param $post_id
		 * @since 1.0.0
		 */
		public function save_fields( $post_id ) {

			$product = wc_get_product( $post_id );

			// Save the include_giftwrap_option setting
			$include_giftwrap_option = isset( $_POST['include_giftwrap_option'] ) ? 'yes' : 'no';
			// update_post_meta( $post_id, 'include_giftwrap_option', sanitize_text_field( $include_giftwrap_option ) );
			$product->update_meta_data( 'include_giftwrap_option', sanitize_text_field( $include_giftwrap_option ) );

			// Save the include_giftwrap_option setting
			$include_custom_message = isset( $_POST['include_custom_message'] ) ? 'yes' : 'no';
			$product->update_meta_data( 'include_custom_message', sanitize_text_field( $include_custom_message ) );

			// Save the giftwrap_cost setting
			$giftwrap_cost = isset( $_POST['giftwrap_cost'] ) ? $_POST['giftwrap_cost'] : '';
			$product->update_meta_data( 'giftwrap_cost', sanitize_text_field( $giftwrap_cost ) );

			$product->save();

		}

    }
}

Crea la pestaña personalizada

Para crear la pestaña personalizada, conectamos el filtro woocommerce_product_data_tabs utilizando nuestra función create_giftwrap_tab. Esto pasa el objeto $ tabs de WooCommerce, que luego modificamos con los siguientes parámetros:

label: use esto para definir el nombre de su pestaña.
target: esto se usa para crear un enlace de anclaje, por lo que debe ser único.
class: una matriz de clases que se aplicarán a su panel.
priority: defina dónde desea que aparezca su pestaña.

Tipos de productos

En esta etapa, vale la pena considerar qué tipos de productos nos gustaría que habilite nuestro panel. Por defecto, hay cuatro tipos de productos de WooCommerce: simples, variables, agrupados y afiliados. Digamos que para nuestro escenario de ejemplo, solo queremos que nuestro panel de envoltura de regalo se habilite para tipos de productos simples y variables.

Para lograr esto, agregamos las clases show_if_simple y show_if_variable al parámetro de clase anterior. Si no queremos habilitar el panel para tipos de productos variables, omitiremos la clase show_if_variable.

Agregar campos personalizados

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

Observe cómo el atributo id para nuestro div externo, giftwrap_panel, coincide con el valor que pasamos al parámetro de target de nuestra pestaña de regalo. Así es como WooCommerce sabrá mostrar este panel cuando hagamos 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

Estas funciones son provistas por WooCommerce específicamente con el propósito de crear campos personalizados. Toman una variedad de argumentos, que incluyen:

id: esta es la ID de tu campo. Debe ser único, y lo haremos referencia más adelante en nuestro código.
label: esta es la etiqueta tal como aparecerá para el usuario.
desc_tip: esta es la sugerencia de herramienta opcional que aparece cuando el usuario se desplaza sobre el icono de signo de interrogación al lado de la etiqueta.

Tenga en cuenta también que la función woocommerce_wp_text_input también toma un argumento de type, donde puede especificar un number para un campo de entrada de número, o un text para un campo de entrada de texto. Nuestro campo se usará para ingresar un precio, por lo que lo especificamos como number.

Guarde los campos personalizados

La parte final de nuestra clase de administrador usa la acción woocommerce_process_product_meta para guardar nuestros valores de campo personalizados.

Para estandarizar y optimizar la forma en que almacena y recupera datos, WooCommerce 3.0 adoptó un método CRUD (Crear, Leer, Actualizar, Eliminar) para establecer 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étodos get_post_meta y update_post_meta más familiares que podríamos haber usado en el pasado, ahora usamos $ post_id para crear un objeto de $product WooCommerce y luego aplicamos el método update_meta_data para guardar datos. Por ejemplo:

1	$product = wc_get_product( $post_id );
2	$include_giftwrap_option = isset( $_POST['include_giftwrap_option'] ) ? 'yes' : 'no';
3	$product->update_meta_data( 'include_giftwrap_option', sanitize_text_field( $include_giftwrap_option ) );
4	$product->save();

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

Codificación creativa

Limpieza y validación de datos con WordPress

Stephen Harris

Archivo de complemento principal

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

<?php
/**
 * Plugin Name:     		Tutsplus WooCommerce Panel
 * Description: 			Add a giftwrap panel to WooCommerce products
 * Version: 				1.0.0
 * Author: 					Gareth Harris
 * Author URI: 				https://catapultthemes.com/
 * Text Domain: 			tpwcp
 * WC requires at least:    3.2.0
 * WC tested up to: 	    3.3.0
 * License:			    	GPL-2.0+
 * License URI:		    	https://www.gnu.org/licenses/gpl-2.0.txt
*/

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Define constants
 */
if ( ! defined( 'TPWCP_PLUGIN_VERSION' ) ) {
	define( 'TPWCP_PLUGIN_VERSION', '1.0.0' );
}
if ( ! defined( 'TPWCP_PLUGIN_DIR_PATH' ) ) {
	define( 'TPWCP_PLUGIN_DIR_PATH', plugin_dir_path( __FILE__ ) );
}

require( TPWCP_PLUGIN_DIR_PATH . '/classes/class-tpwcp-admin.php' );

/**
 * Start the plugin.
 */
function tpwcp_init() {
    if ( is_admin() ) {
        $TPWCP = new TPWCP_Admin();
        $TPWCP->init();
    }
}
add_action( 'plugins_loaded', 'tpwcp_init' );

Esto iniciará su 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 Giftwrap disponible, junto con campos personalizados. Puede actualizar los campos y guardarlos ... Pero todavía no verá nada en el frente.

Conclusión

Vamos a recapitular lo que hemos visto hasta ahora en este artículo.

Hemos analizado un escenario de ejemplo para agregar un panel personalizado de "envoltorio de regalo" a WooCommerce. Creamos un complemento y agregamos una clase para crear el panel. Dentro de la clase, también hemos utilizado funciones de WooCommerce para agregar campos personalizados, y luego hemos desinfectado y guardado esos valores de campo.