Un caluroso Guau para todos!

He visto mucho en la comunidad de los grupos de WordPress preguntar por ésta función. Hoy veremos como añadir addons/Campos adicionales en la página de producto individual utilizando un sencillo plugin. Para que la explicación sea más práctica, veremos un caso específico que debemos conseguir. Pero antes…

¿Qué son los campos adicionales de producto o  Product Addons?

Son opciones adicionales que podemos agregar en la página del producto que enriquecerá la información del pedido.

Las opciones por defecto para pedir un producto en Woocommerce (Cantidad, etc) son muy limitadas. Para productos no muy complejos va perfecto. Va un paso más allá con los productos variables que nos permite asignar atributos seleccionables.

Pero, aún así queda limitado en otras situaciones, por ejemplo:

Vendemos anillos con y sin nombres tallados, necesitamos un campo para que el cliente ingrese el nombre o palabra que desea que sea tallada.

Vendemos camisetas con fotos estampadas y necesitamos un campo para que el cliente suba el archivo de la foto que quiere que se estampe.

Como en el ejercicio de hoy, vendemos un menú de un determinado precio, podemos irle añadiendo opciones que incrementen el precio.

Vendemos regalos, podemos añadirle la opción para que elija si desea que lo envolvamos, con un monto adicional por supuesto.

Y un larguíiiisimo etc.

El Reto de Hoy: Opciones Adicionales

Lo que construiremos será, a partir de un producto llamado «Menú del día» de 10 USD, Agregarle la opción para que el cliente pueda elegir el platillo. Además, al elegir su entrada, tenga opciones que cuestan un monto adicional. Éstos montos de cada opción se sumarán automáticamente al subtotal del precio. ¿Genial Cierto?

Por último, un campo para ingresar texto para que el cliente pueda dejarme opciones adicionales con respecto a su menú.

Practicamente el cliente podrá armar su menú personalizado desde ésta página de producto.

Éstos tres tipos de campos que configuraremos no son los únicos. Hay algunos más, ya los mencionaremos más adelante.

Por favor no quiero que su mente se cierre sólo al rubro de comida. Las opciones adicionales son una potente herramienta para casi cualquier rubro.

Lo mejor es que por más que se ve como una construcción compleja, armarlo es sumamente sencillo. Y se puede manejar incluso desde la misma página de edición del producto… 

La herramienta: WooCommerce Product Addons

La herramienta que hará posible toda ésta construcción es el plugin WooCommerce Product Addons. Veremos el paso a paso de cómo lograr nuestro cometido a través de cada una de sus configuraciones. Vamos a ello!

Descarga el Plugin para que lo pruebes tú mismo

Puedes descargar éste plugin premium desde la barra lateral de éste artículo (Si lo lees desde escritorio) o en la parte inferior de mismo (Si nos lees desde móviles), también puedes buscar ésta herramienta directamente en la barra de búsqueda de nuestro menú principal.

Recuerda que los botones de descarga se desbloquean cuando eres miembro del Club Guau. Únete a ésta comunidad para tener acceso a cientos de plugins y temas premium y sacar el máximo provecho a nuestros tutoriales.

Administramos todo desde la misma página de edición de producto

Las opciones de configuración de los addons para cada productos, los encontramos muy facilmente en la misma página de edición de los mismos. Para ser más precisos, en la sección de datos de producto, ahora se podrá apreciar una nueva pestaña llamada «Add-ons». Vamos a hacer Click para ver sus opciones.

En la imagen de abajo, se observan algunos addons que he creado. En el caso que estén creando un nuevo producto, les aparecerá todo vacío. Y deberán empezar a agregarlos haciendo click a botón Add Filed.

Creando nuestra primera opción extra o addon

Al crear un addon nuevo. Lo primero que nos aparecerá será la opción para elegir el tipo de campo que añadiremos:

Múltiple Choice es para mostrar varias opciones, pero sólo se podrá elegir una.

Checkboxes es para marcar opciones en casillas de verificación, de las cuales pueden elegirse varias simultáneamente.

Short Text es un campo de introducción de texto corto

Long Text lo mismo que el anterior pero para textos largos.

File Upload: Cómo pueden ver, también hay la opción para permitirle al usuario subir archivos.

Customer Defined Price: Para que el cliente defina un precio.

Quantity: Un selector de cantidad

Heading: Un título

 En el ejercicio, para la primera sección dónde se podrá elegir el platillo, y sólo se deberá elegir uno, voy a elegir Multiple Choice.

Cuando seleccionas Múltiple Choice, te aparecen tres opciones de formas de visualizar las opciones:

Dropdowns: Selectores

Radio Buttons: Similar al Checkbox. A modo de casillas de verificación para cada opción.

Images: Añadir imágenes a cada opción

Para éste caso voy a elegir Dropdowns, pero también con imágenes de cada plato quedaría genial. 

Descarga el Plugin para que lo pruebes tú mismo

Puedes descargar éste plugin premium desde la barra lateral de éste artículo (Si lo lees desde escritorio) o en la parte inferior de mismo (Si nos lees desde móviles), también puedes buscar ésta herramienta directamente en la barra de búsqueda de nuestro menú principal.

Recuerda que los botones de descarga se desbloquean cuando eres miembro del Club Guau. Únete a ésta comunidad para tener acceso a cientos de plugins y temas premium y sacar el máximo provecho a nuestros tutoriales.

Definiendo Título y Opciones

Otro dato que deberemos llenar es el título que se mostrará de cara al usuario, en la sección de «title».

Y desde la parte inferior, podremos agregar las opciones que se mostrarán. Como puede verse, a cada una podemos añadirle precios. Pero nos explayaremos en ese tema más adelante. Para ésta sección en particular, lo voy a dejar con sus valores por defecto de cero.

Descripción y cómo hacer obligatorio el campo

Me olvidaba mencionar. Al marcar la opción de Add description, aparecerá un área para agregarle una descripción a la sección. Ya podrán saber como se ve en el frontend cuando vean la imagen de más abajo, donde muestro como queda.

Otro campo para marcar es el de «Required Field». Al marcarlo, convierte nuestra opción en obligatoria. De tal manera que el cliente no podrá hacer el pedido si no elije una opción.

En mi caso. Como el producto es un menú, es necesario que elija el platillo que comprará. Así que lo voy a marcar como obligatorio, como se ve en la imagen de abajo.

Y así es como se ve las opciones de cara al usuario. También pueden visualizar dódne aparece la descripción que agreguemos. El asterisco rojo al lado del título «Elije tu segundo», indica que la opción es obligatoria, tal como lo configuramos.

Agregando el Segundo Addon: Utilizando Checkboxes

La segunda sección que requiero, es dónde añado las entradas. En éste caso particular, quiero ofrecer la entrada que es ensalada y además otras opciones pero que requieren un pago adicional.

Entonces voy a necesitar que el cliente pueda seleccionar varias opciones a la vez. Para ello vamos a poner éste nuevo addon que estamos creando como type: «Checkboxes».

De título le pondré: «Selecciona tu entrada», y no le añadiré descripción ni lo pondré como obligatorio.

Igual que como en el caso anterior, desde la parte inferior podemos añadir todas las opciones que se necesiten.

Agregando Montos adicionales a las opciones

A éstas opciones sí les voy a agregar montos adicionales. Como se ve en la imagen de abajo, en el último campo de cada opción puede añadirse el precio. Éste monto, en caso de seleccionar esa opción, se añadirá al precio total del producto.

Agregando el Segundo Addon: Utilizando Checkboxes

La segunda sección que requiero, es dónde añado las entradas. En éste caso particular, quiero ofrecer la entrada que es ensalada y además otras opciones pero que requieren un pago adicional.

Entonces voy a necesitar que el cliente pueda seleccionar varias opciones a la vez. Para ello vamos a poner éste nuevo addon que estamos creando como type: «Checkboxes».

De título le pondré: «Selecciona tu entrada», y no le añadiré descripción ni lo pondré como obligatorio.

Igual que como en el caso anterior, desde la parte inferior podemos añadir todas las opciones que se necesiten.

Agregando Montos adicionales a las opciones

A éstas opciones sí les voy a agregar montos adicionales. Como se ve en la imagen de abajo, en el último campo de cada opción puede añadirse el precio. Éste monto, en caso de seleccionar esa opción, se añadirá al precio total del producto.

De cara al usuario, se verá como en la imagen de abajo. Pueden notar que los montos adicionales se remarcan al final de cada opción. Y como se dijo, todo lo seleccionado se suma al subtotal. 

En teoría, se puede añadir costos adicionales a cualquier opción.

¿Te imaginas todo el potencial de ésto?

Tercer Addon usado: Añadiendo Texto Corto

El último addon que agregaré para éste ejercicio es el de campo de texto corto. El cual utilizaré para que el cliente pueda escribir indicaciones adicionales con respecto a su menú.

Como puede verse, el type del addon será «Short Text».

De Título le pondré «Indicaciones Adicionales».

No añadiré descripción. No lo haré Obligatorio. 

Con «Limit character Lenght» podemos limitar la cantidad de texto. Lo dejaré inactivo.

Si activara «Adjust Price» podría cobrar un monto adicional si el cliente llena el campo. Por ahora lo dejaré inactivo. Pero hay muchas situaciones en las que puede usarse.

La primera que se me viene a la mente es por ejemplo, cuando vendemos un anillo de un precio base y podemos escribir un nombre en él por un costo adicional. Crearíamos el campo con texto corto y lo configuraríamos con Adjust Price.

Cabe mencionar que éste addon nos permite restringir el contenido del campo para: Sólo texto, sólo números, etc.

En mi caso lo dejaré como «Any text», que es para aceptar cualquier caracter.

En el Frontend, éste addon se verá de la siguiente manera:

¿Y si quiero configurar addons globales?

Hasta ahora hemos visto cómo configurar addons desde la página de edición de cada producto. Lo cual, como hemos visto, funciona fantásticamente. Pero, ¿Qué sucede si quiero configurar un mismo addon a todos los productos de la tienda?¿O a toda una categoría específica?

Pues déjame decirte que no tendrás que hacerlo uno por uno en cada producto. El plugin también nos da la opción de addons globales.

Para ello, desde el panel de WordPress, nos vamos a la pestaña «Productos» y dentro de ésta elegimos la subpestaña «Add-ons».

Una vez dentro, podemos crear grupos de Addons haciendo click al botón «Create New».

En cada grupo podremos configurar el nombre del grupo, la prioridad para que se aplique ésta regla y a qué categoría va dirijida (Poner «All Products» si deseas que se aplique a todos los productos).

Más abajo, encontraremos el botón de add Field para añadir difrentes addons. Ésta última parte funciona excatamente cómo ya hemos visto en productos individuales.

Reto Cumplido

Y así de fácil hemos armado una configuración de campos compleja para productos. Se habrán dado cuenta que con ésta herramienta hay mil y un cosas que se pueden implementar. 

Para armar más cosas así de geniales, no olviden suscribirse gratuitamente a nuestro boletín, para recibir nuevos artículos en tu bandeja de entrada.

Además, ya sabes que siendo parte del Club Guau, desbloquearás todos los botones de descarga de los cientos de plugins y temas premium de la tienda.

Nos vemos en un próximo tutorial.Guau!