Cómo redirigir los carros abandonados con un promoción emergente usando el div

La redirección de carros abandonados es una técnica de marketing efectiva que estimula a los clientes a comprar los artículos que han abandonado después de agregar a su carrito en su sitio. Una estrategia efectiva para que estos clientes completen la compra es proporcionar un descuento en los artículos que pretendían comprar. .La parte difícil es dar esos descuentos solo a los usuarios que han abandonado sus carros.Las opciones de estado de la Divica incluyen condiciones de visualización que le permiten mostrar u ocultar contenido basado en el carrito de WooCommerce y las visitas de página de un usuario.Esta combinación de condiciones permite redirigir a los usuarios que han abandonado sus carros con un descuento o pop promocional.
En este tutorial, le mostraremos cómo redirigir los carros abandonados creando un pop promocional inteligente que se muestra en una página de destino solo si el usuario tiene artículos en el carrito y ha visitado la página de pago. ¡Vamos a empezar! Mirar las zapatillas de deporte es un vistazo rápido a las ventanas emergentes promocionales que construiremos en este tutorial. Esta ventana emergente promocional se mostrará en la página si el usuario ha agregado un producto a su carrito y ha visitado la página de finalización del pedido. Descargue las ventanas emergentes promocionales de la campana abandonada de la redirección para poner su mano en el aspecto de este tutorial, primero tendrá que descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico diaria utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá aún más división de amabilidad y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar. No será “read” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue gratis únase al boletín de Divin y le enviaremos una copia del paquete de diseño de la página de buceo, además de muchos otros recursos, consejos y consejos de forma gratuita. Sigue a ti mismo y te convertirás en una división maestra en el menor tiempo. Si ya está suscrito, ingrese su correo electrónico a continuación y haga clic en Descargar para acceder al paquete de diseño.

Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a Div Free Weekly Layout Div!
Para importar la apariencia de la sección en la biblioteca de la Divic, navegue en la biblioteca de la Divica. Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Una vez terminado, el aspecto de la sección estará disponible en Divi Builder. Comprender el concepto antes de ingresar al proceso de construcción esencial del tutorial podría ayudar a comprender el concepto básico de lo que construiremos. La idea es utilizar Divi Builder para crear emergentes promocionales en una página de destino existente. Una vez que se construye la sección emergente promocional, queremos agregar las opciones de condición que mostrarán la sección cuando se cumplan ambas condiciones siguientes.
El usuario tiene contenido en el carrito

El usuario visitó la página de pago
Esto se puede hacer utilizando las opciones de condición incrustadas de la división al editar la sección (o cualquier elemento de la Divica).
Una vez que las opciones de condición están configuradas para esa sección (o ventana emergente promocional), ahora podemos redirigir a los usuarios que han abandonado su canasta mostrando la ventana emergente cada vez que hayan cumplido las condiciones. El proceso funcionaría así …
El usuario visita la página de destino sin mostrar la ventana promocional

El usuario agrega contenido a su carrito (se encuentra con la condición #1)
El usuario visita la página de finalización del pedido (cumple con la condición no. 2), pero, por cualquier razón, el usuario no completa el proceso de completar el pedido y las hojas.
Luego, más tarde, el usuario regresa a la página de destino que ahora muestra la ventana emergente promocional que la redirige a la finalización de la finalización del pedido con un descuento. Ahora que entiendes el concepto, pasemos al tutorial, ¿verdad? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.

Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (generador visual).

Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div. Redireccionando los carros abandonados con ventanas emergentes promocionales utilizando las opciones de división Parte 1: Cargando la página de destino prefabricada para este tutorial, agregaremos la ventana emergente promocional a la página de destino de un sitio web de división. Para comenzar este proceso, importaremos la apariencia de la página del destino del perfumador en Divi Builder.
Para hacer esto, abra el menú Configuración y haga clic en el icono Agregar en la biblioteca. Luego busque y busque el paquete de apariencia del perfumador y haga clic para usar la página Busca la apariencia del perfumador.
Parte 2: Construir una sección fija como contenedor emergente promocional una vez que se carga la página de destino. Desplácese hasta la parte inferior de la página y agregue una nueva sección habitual en la sección del sótano de la página.
La sección Configuración y el revestimiento actualizan la configuración de la sección con un ancho máximo personalizado y llenado, como sigue:
Ancho máximo: 500 PX

Llenado: 10px arriba, 10px hacia abajo

Border luego dale a la sección una frontera.
Ancho de Chenar: 15pxculoare Cenar: #F6F4F2
Box Shadow Una vez que el borde está en su lugar, agregue una sombra de la caja a una pequeña profundidad:

Box Shadow: Ver captura de pantalla
Intensidad de difuminar la sombra de la caja: 38px
Color de la sombra: RGBA (203,146,116,0.6)

Animación Para darle a la ventana emergente una animación retrasada, actualice el estilo de animación de la siguiente manera:
Estilo de animación: Flip
Dirección de la animación: izquierda
Duración de la animación: 3000 ms

Esto mostrará la sección emergente a los 3 segundos después de cargar la página, con una hermosa animación.
Posicione en la pestaña avanzada, actualice la posición para que la sección permanezca fija en la parte inferior izquierda de la ventana del navegador.
Posición: fijo
Ubicación: abajo a la izquierda
La clase CSS eventualmente, agregaremos un icono “X” que se puede hacer clic, que cerrará/ocultará la ventana emergente. Necesitamos agregar una clase CSS personalizada a la sección para apuntarla con JQuey. Ingrese la siguiente clase CSS:

Clase CSS: ET-ProMo-popup
Parte 3: Agregar opciones de condición a la sección Una vez que se construye la sección (nuestro contenedor emergente), estamos listos para agregar las opciones de condición que mostrarán la sección cuando se cumplan ambas condiciones siguientes.
El usuario tiene contenido en el carrito

El usuario visitó la página de pago
Condición de visualización 1: Primero el contenido de la canasta, agregaremos una condición de visualización que mostrará la sección/ventana emergente siempre que el usuario tenga contenido. Para hacer esto, vaya a la pestaña avanzada en la sección Configuración. Luego haga clic en el icono más para agregar una nueva condición. En el menú de caída, seleccione la condición contenida. En la configuración de la ventana emergente, el contenido del carrito, asegúrese de que la opción de visualización solo si la canasta del usuario está configurada en “tiene productos”. Luego guarde los cambios. Nota: Esta condición es específica para los sitios web de la Divicidad que usan WooCommerce.

Condición de visualización 2: Visitando la página a continuación, agregaremos una condición de visualización que mostrará la sección/emergente siempre que el usuario haya visitado una determinada página, que, en este caso, será la página de pago en un sitio de WooCommerce. Para hacer esto, vaya a la pestaña avanzada en la sección Configuración. Luego haga clic en el icono más para agregar una nueva condición. En el menú de caída, seleccione la condición de visitar la página. En la configuración de la ventana emergente, el contenido del carrito, asegúrese de que la opción de visualización solo si el usuario está configurado en “visitando una determinada página”. Luego seleccione la página de pago de la lista de páginas en la ventana emergente. Luego guarde los cambios.
Muestra si todas las condiciones son verdaderas porque tenemos más condiciones en el juego, podemos elegir mostrar la sección si algunas o todas las condiciones son verdaderas.
En este caso, es lógico mostrar la ventana emergente promocional cuando todas las condiciones son verdaderas (el usuario tiene el contenido y ha visitado la página de check-out). En condiciones de visualización, seleccione lo siguiente:
Muestra si todas las condiciones son verdaderas en este momento, la funcionalidad de la condición que estamos buscando ya está en vigencia para mostrar la sección solo cuando un usuario tiene una canasta y visitó la finalización del pedido. Ahora, todo lo que tenemos que hacer es llenar la sección con el contenido necesario para crear la promoción. Parte 4: Creación del contenido emergente promocional para crear el contenido de la ventana emergente promocional, agregaremos cuatro módulos:
Un módulo de información con un icono X que se puede hacer clic para que los usuarios puedan cerrar la ventana emergente

Un módulo de texto para el título y el cuerpo del texto

Otro módulo de texto para el código promocional

Y un módulo de botones que redirigirán a la página de compra, para que los usuarios puedan completar la compra.
Creando el icono “X” para cerrar la ventana emergente para el icono antes de agregar el icono “X”, agregue una nueva fila con una sola columna a la sección.

Actualice la configuración de la fila de la siguiente manera:
El ancho de la canaleta: 1
Ancho: 100%
Llenado: 0px arriba, 0px abajo
Luego dé a la fila una posición absoluta con un índice más alto, de la siguiente manera:
Posición: Absoluto

ÍNDICE Z: 12
El icono Para crear el icono “X” para cerrar la ventana emergente, agregue un nuevo módulo de información dentro de la fila.
Elimine cualquier título o texto de cuerpo predeterminado del contenido de la propaganda. Luego haga clic para usar el icono X para la presentación.
En la pestaña Diseño, actualice lo siguiente:

Icono de color: #ddd
Tamaño de fuente de icono: 40px
Ancho: 40px

Alineación del módulo: correcto

Altura: 40px

En la pestaña avanzada, agregue la siguiente clase CSS personalizada a la información: CSS CLASS: ET-CLOSE-POPUP-IICON
Más tarde, tendremos que apuntar a esta clase con JQuey.
Crear el título y el texto del cuerpo para la ventana emergente Los otros módulos que agregaremos necesitarán una fila separada. Agregue una nueva fila con una sola columna debajo de la fila anterior, que contiene el icono de la propaganda.

Luego actualice la configuración de la fila de la siguiente manera:
El ancho de la canaleta: 1
Ancho: 100%

Llenado: 0px arriba, 20px hacia abajo, 40px izquierdo, 40px a la derecha
Para agregar el título y el contenido del cuerpo, agregue un nuevo módulo de texto a la nueva fila.
Actualice el contenido del área del cuerpo con el siguiente HTML:

¡Obtenga un 20% de descuento!

¡Use el siguiente código de cupón durante para obtener un 20% de descuento en su pedido de perfume cuando compre hoy! Esto de oferta solo está disponible por tiempo limitado.

En la pestaña Diseño, actualice los estilos de texto de la siguiente manera:
El peso de la fuente de texto: semi bold
Tamaño de texto de texto: 18px
La altura de la línea de texto: 1.8 em

Alineación de texto: Centro

Título 2 Fuente: Cormorant Garamond
Título 2 Peso de fuente: promedio

Título 2 Color de texto: #000
El tamaño del Título 2: 54 PX (escritorio), 38 PX (tableta y teléfono)
Creando el código promocional para emergentes para crear el código promocional, agregue un nuevo módulo de texto debajo del anterior.
Actualice el área del cuerpo con el texto “Código: Perfumeoff”
En la pestaña Diseño, actualice lo siguiente:
El peso de la fuente de texto: semi bold
Color de texto de texto: #CB9274
Tamaño de texto de texto: 16px
Espacio entre letras de texto: 2px

Alineación de texto: Centro

Marja: 15 px arriba, 15 px abajo

Llenado: 15px arriba, 15px abajo
Ancho fronterizo: 4px
Color del borde: #f4e8dcstil óseo: en maceta
Creando el botón emergente para crear el botón, copie el módulo de botón de uno de los botones existentes en la apariencia prefabricada.
Luego pase el módulo de botón en el módulo de texto del código promocional.
Actualice el texto del botón y alinee de la siguiente manera:

Texto del botón: use el cupón al finalizar el pedido
Alineación de los botones: centro
No olvide agregar un enlace a la página de pago. Para hacer esto, puede usar agregar un enlace de página dinámico como URL del enlace del botón a su página de pago existente.
Código personalizado para cerrar la ventana emergente al hacer clic en el icono “X”. Para nuestro último paso, necesitamos agregar un fragmento rápido de CSS y JQuey para cerrar la ventana emergente al hacer clic en el icono “X”. Para agregar el código, agregue un nuevo módulo de código debajo del botón.
Luego pegue el siguiente CSS, asegurándose de incluir el código en las etiquetas de estilo necesarias. .ET-CLOSE-POPUP-ICON: Hover {

Cursor: puntero;

}

Bajo la última etiqueta de estilo que contiene el fragmento CSS, inserte el siguiente jquey, asegurándose de incluir el código con las etiquetas de script necesarias. (función ($) {
$ (documento) .Ready (function () {
$ (“. Et-CLOSE-POPUP-ICON”). ON (“Click”, function () {

$ (“. Et-ProMo-Popup”). SlideUp (“lento”);

})

});
}) (JQuery);