Hola! ¿Cómo estás?

Soy Aurelio Couso y en este artículo vamos a ver cómo integrar un sistema de tarjetas regalo en nuestra tienda online con Woocomerce.

Vamos a ver paso a paso cómo integrar la herramienta y cómo configurarla en función de nuestras necesidades

Así que si te interesa ¡Comenzamos!

Como nos ocurre siempre, tenemos muchas herramientas disponibles, pero nosotros vamos a optar por un plugin con garantías: YITH WooCommerce Gift Cards

Podemos descargar este plugin desde la web oficial: http://bit.ly/2Mm8hQB

También tenemos la opción de descargarlo por un precio muy reducido en http://bit.ly/3pWz7gG

Documentación: antes de empezar con esta explicación ten presente que tienes la documentación completa disponible aquí: https://docs.yithemes.com/yith-woocommerce-gift-cards/

Toda esta explicación la tienes también en vídeo:

Vamos ya con la explicación.

La idea es sencilla, vamos a generar productos que sean “tarjetas regalo” para que se puedan adquirir y enviar al destinatario que él cliente quiera.

Estas tarjetas regalo las vamos a generar como cualquier otro producto de WooCommerce, la configuración técnica de estas tarjetas la personalizaremos desde el plugin.

Instalación

Lo primera será descargar el plugin, instalarlo y activarlo, una vez completemos el proceso tendremos disponible el acceso al panel desde YITH > Gift Cards
En en panel izquierdo dentro de nuestro WordPress:

Ahora que tenemos el plugin instalado ya podemos generar un nuevo tipo de producto, el producto de tipo “tarjeta regalo”. Si vamos a Productos > Añadir nuevo podremos ver ya esta opción integrada.

El funcionamiento del sistema es el siguiente:
1.-Un cliente adquiere una tarjeta regalo por un valor X
2.-Nuestro sistema genera un código único para usarlo en nuestra tienda.
3.-La persona que recibe la tarjeta regalo podrá usar su código único para canjear su tarjeta regalo.

Las tarjetas regalo podrán ser tanto físicas como digitales.
Desde el panel para añadir o editar productos podremos indicar si es digital/virtual

Antes de pasar a configurar el propio producto, la tarjeta como tal, vamos a configurar el sistema con los parámetros generales que nos interesen, para ello vamos a YITH > Gift Cards

Cuando llegamos a este panel vemos en la parte superior diferentes pestañas, iremos una a una.

Panel


En esta pestaña vemos un botón que indica “crear código” esto lo vemos aquí porque podremos siempre generar nosotros nuestras propias tarjetas, sin necesitas que un cliente realice la compra.
Recuerda que cada vez que alguien compre una tarjeta el sistema generará un código automáticamente. Nosotros siempre podremos generarlos también de forma manual.

En este panel podremos ver todos los códigos generados, tanto manualmente como automáticamente, también podremos borrar cualquiera de ellos así como editarlos.

General


Es esta zona tendremos toda la configuración del plugin, aquí fijaremos los valores por defecto, aunque muchos de ellos los podremos después modificar en cada producto individual (en cada tarjeta regalo).

Podemos modificar cómo se muestra la fecha en “formato de fecha”.
Si quisiéramos que con la compra de tarjetas regalo no se genere un código podremos definirlo en “Deshabilitar la generación de código de la tarjeta regalo”.

Los códigos que genera nuestro sistema tiene una estuctura, un patrón, éste lo podemos modificar, si por ejemplo queremos que sean tres caracteres un guión y otros tres pondremos _ cada asterisco indica un caracter, y el guión bajo la separación con guión.

Podemos bloquear que nuestros clientes utilicen tarjetas regalo para comprar otras.

Si en nuestra tienda tenemos a alguna persona con el rol de “gestor de tienda” podremos decidir si queremos que puedan modificar la configuración del plugin.

Nos encontramos ahora con la sección “Notificaciones”, aquí veremos cómo y a quién se notifica.

Tenemos las opciones de:
-Notificar al administrador de la tienda cada vez que se compra una tarjeta (recibirá todos los datos de la tarjeta en su correo).
-Notificar a quien compra la tarjeta, es decir, el cliente que compra la tarjeta para alguien también la recibe en su correo.
-Definir correos a los que se enviarán, estando en copia, los datos de la tarjeta adquirida.
-Indicar que cuando se produzca el envío de una tarjeta regalo físico el remitente, el cliente que la compró, reciba una notificación.
-Notificar al remitente/cliente cuando la tarjeta comprada se utilice.

A continuación, en la sección “Ajustes generales”, podremos definir:
-Qué título tiene la sección en la cual el cliente indica el importe de la tarjeta.
-Permitir o deshabilitar que se pueda introducir un importe personalizado.
-Meses tras los cuales caducarán por defecto las tarjetas regalo.

Es importante saber que estos valores serán los definidos por defecto, pero podremos modificar muchos de ellos en la ficha de cada una de las tarjetas regalo.

Finalmente nos encontramos con la sección “configuración de las tarjetas regalo en los pedidos”, aquí definiremos qué ocurre cuando se cancela un pedido que contiene un tarjeta regalo (lo más recomendable es que se desactive la tarjeta regalo) y qué ocurre cuando se da un reembolso (lo más recomendable, de nuevo, es que se desactive la tarjeta regalo).

Pasemos ahora a la siguiente pestaña.

Estilo

Cada una de nuestras tarjetas regalo podrá tener un estilo único, pero nosotros podremos definir unos valores predefinidos.

Podemos hacer que la tarjeta lleve de forma predeterminada el logo de nuestro negocio, simplemente tenemos que activar la opción y subir el archivo del logo (o seleccionarlo si ya lo tenemos en nuestra carpeta de medios).

Podremos decidir si queremos que el logo se muestre antes o después de la imagen de la tarjeta regalo.

La siguiente sección dentro de esta pestaña es “opciones de diseño de la tarjeta regalo”.
Aquí podremos:
-Definir una imagen predeterminada para las tarjetas regalo; si quisiéramos que todas tuviesen una identidad gráfica similar esta opción puede ser muy interesante.
-Definir el título de la sección que ve el cliente para poder subir su propia imagen para la tarjeta (podremos decidir siempre si queremos que los clientes puedan subir imágenes propias).
-Dejar que el cliente elija una imagen para la tarjeta de entre las que nosotros introduzcamos en la galería de imágenes del producto.
-Cuántas imágenes se muestran al cliente (el total se mostrará cuando haga clic en “ver todo”.
-El texto para mostrar el total de las imágenes de la galería (”ver todo” por defecto).
-Mostrar o no mostrar el título de las imágenes
-Permitir o deshabilitar que los clientes puedan subir sus propias imágenes.
-Tamaño recomendado para las imágenes, esto es muy importante, ya que teniendo en cuenta el tamaño recomendado podremos realizar nuestros diseños personalizados como veremos a continuación.
-Tamaño máximo para las imágenes personalizadas.

En esta pestaña podremos, por último, definir el color principal del plugin en la sección “opciones de diseño”.

Categoría de imágenes

Cuando generemos una tarjeta regalo podremos definir cuáles son las imágenes que se muestran como disponibles en la galería.

Lo vemos mejor con un ejemplo:
Quiero generar una tarjeta de regalo de navidad con varios diseños:
1.- Preparo los diseños y los tengo en mi ordenador
2.- Subo los diseños y les asigno una “categoría de imagen de la tarjeta regalo”, por ejemplo la categoría “navidad”.
Esto lo haremos haciendo clic en el diseño, desde nuestra carpeta de medios, y escribiendo la categoría

3.- Generamos el producto en WooCommerce de tipo tarjeta regalo y seleccionamos la categoría de imagen de tarjetas regalo “navidad”.

En esta sección de Categorías de imágenes, podremos crear nuevas categorías.

Regala este producto

Aquí tenemos la opción de que en todos los productos de nuestra tienda se de la posibilidad de “regalarlo” esto significa: generar una tarjeta regalo por el mismo importe que el valor de ese producto.

Si habilitamos esta opción nos saldrán nuevas opciones de configuración en la parte inferior, podremos:
-Mostrar el botón en la página de tienda (por defecto se mostrará en la página de cada producto).
-Activar el icono de tarjeta regalo.

-Definir estilo de solo texto o botón, podemos ver ambos diseños y decidir cuál se adapta mejor a nuestra tienda online.
-Definir el texto que aparece antes de “regala este producto”.
-Modificar el texto “regala este producto”.
-La paleta de colores.

También definiremos aquí qué aparece en el correo electrónico que recibe la persona a la que se le envía esta tarjeta regalo con el valor de un producto en concreto, definiremos:
-El texto del botón que llevará al destinatario del email hacia el producto en la tienda.
-A qué página irá el destinatario cuando pulse ese botón.
-Decidir el producto se añade directamente al carrito.
-Que el código se aplique automáticamente (muy recomendable).

Destinatario y entrega

En esta pestaña podremos:
-Modificar el texto que aparece cómo título para la sección de información de entrega.
-Permitir o deshabilitar que el usuario seleccione una fecha de entrega
-Seleccionar el intervalo de tiempo para los envíos de las tarjetas. Si seleccionamos que será “diario” podremos definir a continuación la hora de ese envío diario.
-Modificar el texto que aparece como título en la sección de información del destinatario.
-Hacer obligatorio el introducir los datos del destinatario (muy recomendable).
-Permitir múltiples destinatarios para las tarjetas virtuales (se generará un código único por cada tarjeta).
-Solicitar, o no hacerlo, el nombre del remitente.
-Texto para la sección de información del remitente.
-Texto que aparece antes de que el cliente introduzca un mensaje personalizado para el destinatario.

En la siguiente zona podremos definir las opciones para las tarjetas físicas:
-Habilitar que los usuarios puedan añadir un mensaje personalizado a la tarjeta regalo.
-Preguntar el nombre del remitente y del destinatario.

En la última sección, opciones y personalizaron del correo electrónico, podremos:
-Mostrar en el mensaje un botón hacia la tienda.
-Texto del botón.
-A qué página llevará dicho botón (a la tienda por defecto)
-Que el código de la tarjeta se aplique automáticamente (muy recomendable).
-Personalizar el texto del correo electrónico (recomendable).
-Mostrar la fecha de caducidad de la tarjeta regalo.
-Mostrar el código QR
-Adjuntar la tarjeta como PDF

*Es importante saber que podremos gestionar y editar los correos del plugin YITH Gift Cards desde los ajustes de correos electrónicos de WooCommerce.

Carrito y página de pago

Aquí podremos realizar las siguientes modificaciones:
-Permitir que los códigos de las tarjetas se puedan introducir en la sección para introducir cupones.
-Texto para “aplicar cupón” y “¿tienes un cupón”.

-Decidir si se muestra información de la tarjeta en el carrito de compra.
-Decidir si ha de haber un importe mínimo de gasto para que pueda utilizarse un cupón.
-Permitir que se pueda aplicar el código de la tarjeta en la página del carrito, y la posición de esta opción.

-Permitir que el código de la tarjeta se pueda aplicar en la página de pago y su posición.

-Textos de la zona para introducir el código de la tarjeta.
-Integrar icono en la zona.
-Opciones de diseño del campo.
-Paleta de colores

Con todo lo visto tendríamos ya la configuración de nuestro plugin, ahora pasemos a su caso de uso.

Ejemplo de uso real

Queremos crear nuestra primera tarjeta regalo, así que vamos con lo necesario:
-Decidir si queremos que sean importes fijos o uno variable que el cliente decida
-Comprobar los valores de personalización general que hemos visto antes por si hay alguna característica que nos interese integrar, por ejemplo si quisiéramos que haya un gasto mínimo en la tienda para que se pueda usar la tarjeta.
-Si será física o virtual.
-Cómo se llamará la tarjeta.
-Las opciones visuales (imágenes que el cliente pueda seleccionar).

En nuestro caso vamos a generar una tarjeta virtual sin importe mínimo, el caso más habitual, para el ejemplo la llamaremos “Tarjeta regalo navidad”. Vamos ahora con los diseños de las opciones visuales.
Como vimos en la pestaña Estilo, hay un tamaño recomendado para las imágenes:
180x330
Esta va a ser nuestra referencia, pero ahora ¿Cómo las diseñamos?

Yo os recomiendo la opción más sencilla: Canva https://bit.ly/3pG3Iz4

Aquí podéis acceder para haceros vuestra cuenta gratuita: https://bit.ly/3pG3Iz4

Yo comencé con la gratuita, pero hace años que tengo la pro, la verdad es que la herramienta es tremenda y te vale para mil cosas 🙂

Vamos entonces a Canva y pulsamos sobre “Crea un diseño” e introducimos nuestras medidas recomendadas pulsando sobre “Dimensiones personalizadas”.

Pulsamos sobre “Crear un diseño nuevo”

Y aquí ya entra nuestra imaginación, para este ejemplo vamos a utilizar una de las plantillas que nos aparecen a la izquierda y simplemente modificaremos el texto, si lo vemos necesario.
La primera ya se adapta justo a lo que buscamos:

Y aquí ya he encontrado la segunda:

En nuestro caso solo vamos a utilizar dos imágenes, pero pueden ser tantas como queramos.

Algunas de las plantillas que nos saldrán a la izquierda no serán imágenes estáticas, serán vídeos, pero si nos ocurre esto no importa, podemos descargar esa imagen sin problema. Hacemos clic sobre “Descargar” y seleccionamos JPG o PNG en “Tipo de archivo” (el formato jpg pesará menos) y pulsaremos en “Descargar”.

Una vez tengamos ya nuestros diseños, vamos a subirlos a nuestra web.
Vamos al panel de WordPress y pulsamos en “Medios”.

Aquí podremos subir nuestras imágenes, y algo muy importante definir su categoría (para luego poder asignar estas imágenes a nuestro producto).
IMPORTANTE: aunque vimos que teníamos una pestaña específica para añadir categorías de imágenes, podemos hacerlo directamente desde medios, así nos ahorramos un pasito, vamos a ello.

En la biblioteca de medios pulsamos sobre “Añadir nuevo” y seleccionamos nuestros diseños.
Una vez las imágenes estén subidas definiremos su categoría de imagen, en este caso vamos a llamar a la categoría “navidad”, así que pulsamos sobre una de las imágenes y la sección de “categorías de imagen de las tarjetas regalo” ponemos “navidad”.

Ahora se actualizará automáticamente la imagen (no tenemos que pulsar en ningún botón) y la categoría de imagen queda definida (si fuésemos a los ajustes del plugin y pulsamos en la pestaña “Categorías de imágenes” podremos verla).
Repetimos el proceso con el resto de imágenes que queremos para nuestra tarjeta regalo.

Ahora ya podemos pasar a la creación de Producto.

Vamos Productos > Añadir nuevo y en datos del producto indicaremos “Tarjeta regalo” y en este caso también “virtual”.

Podemos ahora personalizar nuestro producto, tendremos las opciones habituales como “descripción corta” o “descripción larga” y algunas un poquito diferentes, por ejemplo, para los importes los iremos añadiendo uno a uno, para este ejemplo añadiremos “10€”, “20€” y “30€” y dejaremos deshabilitada la opción de introducir un importe manualmente.

Para este ejemplo no pondremos ningún descuento ni fecha de caducidad de la tarjeta regalo.
Como categoría de producto pondré “tarjetas virtuales” aquí vosotros, si queréis tener una categoría para este tipo de productos podéis generarla como siempre en “añadir nueva”.

Por último, vamos a definir las imágenes, si vemos el panel de la derecha nos aparece lo mismo que para cualquier otro producto, “imagen del producto” y “galería del producto”.

En este caso, al ser dos imágenes, el proceso será poner una como imagen del producto y la otra en galería.
Ocurre que una vez pulsemos en “publicar” este panel se modifica, y por ello es importante haber definido anteriormente la categoría de imágenes “navidad”.

Una vez tengamos la ficha completada, pulsaremos sobre “Publicar”.
Si nos fijamos, la zona de “galeria de producto” ya no está y tenemos la nueva zona, encima de imagen del producto, “categorías de imágenes de las tarjetas regalo”, Simplemente aquí seleccionaremos “Navidad”.
Nos queda un último detalle, he preferido dejarlo para el final, para que no nos liásemos, como pusimos la categoría “navidad” a las dos imágenes y como imagen de producto he puesto una de esas dos imágenes, nos aparecerá duplicada ¿qué hacemos?
simplemente pulsamos de nuevo en establecer imagen de producto y en el panel para elegir imagen podemos borrar la categoría “navidad”.

La establecemos y actualizamos.

Con esto ya tenemos nuestra súper tarjeta preparada.

Espero que esta guía te haya sido muy útil.

Nos leemos pronto 😉

Un gran abrazo.