Añadir campos personalizados a los productos simples en WooCommerce

WooCommerce es indiscutiblemente la forma más común de vender productos utilizando WordPress.  Con WordPress alimentado aproximadamente 25% del Internet y WooCommerce alimentando alrededor del 39% de todas las tiendas online, es práctico y seguro utilizar ambos para ofrecer tus productos a los clientes.

Pero sucede con frecuencia, igual que con cualquier otro ‘software’, que nosotros o nuestros clientes queremos extender las caracteríscas que ofrece de fábrica el plugin.

Por ejemplo: imagina que tienes un producto simple en WooCommerce que quieres vender, pero deseas añadir más información acerca del producto y mostrarla al usuario en el front-end.

Utilizando algunas herramientas provistas por WooCommerce y la funcionalidad personalizada que vamos a escribir, lograremos exactamente esto.

Herramientas necesarias

Antes de comenzar, asumo que tienes lo siguiente (o algo similar) en tu computadora:

• El sistema operativo de tu preferencia – Yo estaré utlizando MacOS
• Al menos PHP 5.6.25, aunque yo estaré utilizando PHP 7
• MySQL 5.6.33
• Apache o Nginx
• WordPress
• Plugin WooCommerce instalado y funcionando
• Tu IDE favorito

Para el resto del curso, asumo que todo esto esta ya instalado, activado y funcionando.

Si descargas WooCommerce específicamente para este tutorial, no tienes porque preocuparte sobre cosas como las páginas de proceso de pago, las de términos y condiciones, ni nada parecido. Durante todo este tutorial nos vamos a centrar únicamente en el meta box Simple Product.

Añadir campos personalizados

Cuando se trata de trabajar con WordPress, la noción de campos personalizados normalmente conlleva diferentes definiciones:

WordPress tiene la habilidad de permitir a los autores de las entradas asignarles campos personalizados. Esta información extra arbitraria es conocida como meta-datos.

Para los que no seáis desarrolladores, este tipo de información puede ser un poco más compleja e innecesaria, pero si estás acostumbrado a trabajar con ella, es importante advertir que cuando me refiero a campos personalizados en este tutorial, estoy hablando de algo completamente diferente.

Aquí, estoy hablando de un campo de texto real que introduciremos en la pestaña Productos vinculados para un Producto Simple.

Pero volveremos a esto más adelante en el tutorial. De momento, avancemos.

1. Los hooks

Casi de la misma forma que WordPress, WooCommerce proporciona una API que nos permite vincular o enganchar con ciertas partes del ciclo de vida de su página. Pero, aunque hayas trabajado con anterioridad con la API de metadatos de WordPress, la forma de hacerlo con WooCommerce es diferente.

Existen dos hooks que es importante conocer:

1. woocommerce_product_options_grouping. Usaremos esta función para crear una descripción y un campo para la introducción de texto que aceptan nuestros valores.
2. woocommerce_process_product_meta. Usaremos este hook para procesar, satinizar y guardar el valor de nuestro campo de texto.

Como con todos los hooks de WordPress, estos requerirán que definamos estos hooks y que después definamos una funcionalidad personalizada para ellos. Aunque puedes hacerlo usando programación procedimental, este tutorial implementará la funcionalidad usando programación orientada a objetos.

2. La funcionalidad

Primero, vamos a definir una clase que tendrá tantas variables como instancias sus datos. Esta variable representará el ID del campo de entrada que aparecerá en la interfaz del usuario:

seguir leyendo en Tuts+