Cómo crear formularios de opción de rueda de la suerte de WooCommerce con Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño Divi en curso, le mostraremos cómo crear formularios de suscripción a la rueda de la suerte de WooCommerce con Divi y el complemento WP Optin Wheel . Con suerte, este tutorial lo ayudará a aumentar las tasas de conversión de formularios optin. La función de ludificación del formulario de suscripción de la rueda de la suerte le permitirá interactuar con los visitantes y recompensarlos con un código de descuento que pueden usar en sus compras en línea.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Instalar WooCommerce

Buscar complemento e instalar

Lo primero que deberá hacer si aún no lo ha hecho es instalar  WooCommerce en su sitio web de WordPress. También asumimos que ha configurado el paquete de diseño de la tienda de hardware en el sitio web de Divi en el que está trabajando.

Vaya a sus complementos y busque WooCommerce. Una vez que lo encuentre, haga clic en el botón ‘Instalar ahora’.

Activar

Asegúrese de activar el complemento WooCommerce de inmediato.

Configurar WooCommerce

Luego, WooCommerce lo redirigirá automáticamente a su formulario de configuración. Aquí, deberá completar todos los detalles para preparar su tienda para que se active. Una vez que realice este proceso, todas las páginas necesarias de WooCommerce se agregarán automáticamente a su sitio web.

Instale el complemento de rueda WP Optin

Buscar complemento e instalar

Para crear el formulario de suscripción de la rueda de la suerte, vamos a utilizar un complemento de gamificación gratuito llamado WP Optin Wheel . Regrese a sus complementos y busque el complemento WP Optin Wheel. Luego, haga clic en el botón ‘Instalar ahora’.

Activar

Continúe activando el complemento.

Agregar productos a WooCommerce

Añadir nuevo producto

Si ya ejecuta un sitio web de comercio electrónico, puede omitir esta parte. Sin embargo, si solo está probando cosas, le recomendamos que agregue algunos productos a su complemento WooCommerce. Esto le ayudará a probar el formulario de suscripción de la rueda de la suerte después. Para agregar un nuevo producto, vaya a Productos > Agregar nuevo .

Agregar detalles del producto

Rellena todos los datos del producto. Esto incluye, entre otros, el nombre del producto, la descripción, la imagen destacada, el precio y la categoría. Publique la página del producto una vez que haya terminado de agregar estos detalles.

Repita para cada producto

Repite el mismo paso para cada uno de los productos que quieras añadir a tu web.

Agregar cupones a WooCommerce

Ir a Cupones

Ahora es el momento de agregar cupones . Más adelante en esta publicación, usaremos los cupones que creamos en el formulario de suscripción de la rueda de la suerte. Ve a tu Panel de WordPress > WooCommerce > Cupones . Una vez que esté allí, continúe y comience a crear su primer cupón.

Agregar Cupón #1: 5% DE DESCUENTO

General

En la rueda de la suerte de 12 rebanadas, puedes decidir cuántas rebanadas incluyen un premio. Puedes, por ejemplo, ofrecer 4 premios y crear un cupón diferente para cada uno de ellos. También puede usar un cupón para múltiples lugares en la rueda. Una vez que haya creado su primer cupón, continúe e ingrese el código de cupón en la parte superior de la página. Luego, modifica la configuración general:

  • Tipo de descuento: Porcentaje de descuento
  • Importe del cupón: 5
  • Fecha de caducidad del cupón: Ingrese la fecha de su elección

Restricciones de uso

Continúe cambiando a las pestañas de restricción de uso. Aquí puede decidir si hay un gasto mínimo y máximo vinculado al cupón. También puede marcar las siguientes casillas:

  • Marque esta casilla si el cupón no se puede utilizar junto con otros cupones.
  • Marque esta casilla si el cupón no debe aplicarse a artículos en oferta. Los cupones por artículo solo funcionarán si el artículo no está en oferta. Los cupones por carrito solo funcionarán si hay artículos en el carrito que no están en oferta.

Repita los pasos para otros 3 cupones

Cree tantos cupones como desee siguiendo los mismos pasos que se mencionaron anteriormente. No está limitado a ofrecer un porcentaje de descuento. También puede crear un cupón que ofrezca un carrito fijo o un descuento en un producto e incluirlo en la rueda de la suerte.

Crear formulario de opción de rueda de la suerte

Ir a la configuración del complemento

Ahora que hemos realizado todos los pasos necesarios para que el formulario de suscripción de la rueda de la suerte funcione, ¡podemos comenzar a crear uno! Ve a tu panel de WordPress > WP Optin Wheel .

Agregar clave API de MailChimp

Antes de que pueda comenzar a crear una rueda de la suerte, deberá agregar su clave API de MailChimp. La versión gratuita del complemento WP Wheel Optin solo ofrece integración con MailChimp. Si desea vincular la rueda de la suerte a otro proveedor, deberá cambiar a la versión premium.

Crear nueva rueda

Escoge un tema

¡Comencemos a crear la rueda! Elija una paleta de colores de su elección. Para este tutorial, elegimos el naranja, ya que combina bien con la paleta de colores del paquete de diseño de ferretería .

Posibilidades de configuración

El siguiente paso para crear su formulario de suscripción de rueda de la suerte es elegir un porcentaje de cambio ganador. Este porcentaje indica con qué frecuencia las personas ganan algo al girar la rueda. En este caso, cada visitante que gira la rueda tiene un 70% de posibilidades de ganar un código de cupón.

Configurar rebanadas

Continúe configurando las 12 rebanadas diferentes. Puedes dedicar cada uno de los cortes a una de estas tres opciones:

  • Sin premio: el visitante no gana nada
  • Código de cupón: el visitante gana un código de cupón
  • Enlace: los visitantes ganan un libro electrónico, por ejemplo

En este ejemplo, usamos 4 de las 12 porciones para agregar un código de cupón. También estamos configurando las posibilidades de cada uno de estos cortes individualmente.

Creador de formularios de configuración

El siguiente paso lo ayuda a crear el formulario de suscripción en sí. Notarás que ya hay un campo de correo electrónico allí. El único otro tipo de campo que puede agregar al formulario de suscripción es una casilla de verificación. Han agregado específicamente este tipo de campo para que el formulario cumpla con el RGPD .

Configuración de contenido

Continuando, podrá configurar el contenido escrito del formulario de suscripción de la rueda de la suerte. Continúe y cambie todo el contenido para que coincida con su sitio web.

Configuración de diseño

Abra la configuración de diseño a continuación y elija ‘Sin patrón’ para la opción de patrón de fondo.

Configuración de comportamiento

También puede elegir cuándo aparece el formulario de suscripción de la rueda de la suerte en la configuración de comportamiento.

RGPD

Por último, pero no menos importante, puede asegurarse de que los datos que comparten los visitantes no se guarden a menos que hayan marcado las diferentes casillas en su formulario de suscripción y ¡listo! Guarde el formulario de suscripción de la rueda de la suerte y vaya a su sitio web para probarlo.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Pensamientos finales

Este tutorial es parte de nuestra iniciativa de diseño Divi en curso en la que tratamos de poner algo extra en su caja de herramientas cada semana. Esperamos que este tutorial lo ayude a crear sus listas de correo electrónico de manera más rápida e interactiva. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!