Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Cómo crear un panel de configuraciones personalizadas en WooCommerce

by
Read Time:9 minsLanguages:

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

Final product imageFinal product imageFinal 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.

WooCommerce custom data panelWooCommerce custom data panelWooCommerce custom data panel

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í:

Giftwrap panelGiftwrap panelGiftwrap panel

Y en el frente, se verá algo como esto:

Front end exampleFront end exampleFront end example

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:

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í:

Project structureProject structureProject structure

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.

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:

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í:

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.

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.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.