Crear ventanas emergentes de Elementor en WooCommerce

Todos somos grandes admiradores de WooCommerce. Es sencillo de configurar y personalizar. El paquete incluye funciones que simplifican la creación y gestión de una tienda de comercio electrónico dinámica y potente.

Sin embargo, crear una página de comercio electrónico exitosa implica mucho más que simplemente agregar productos populares. Todas las páginas también deben ser visualmente atractivas. Cuanto más atractivo visualmente y fácil de usar sea su sitio web, mayor será la probabilidad de atraer a más clientes.

• Configuración de la ventana emergente
• También puedes crear ventanas emergentes usando el generador visual en Elementor.
• Preferencias de publicación

Aunque WooCommerce crea el carrito de compras y la página de pago cuando crea su sitio, Elementor los hace más atractivos al personalizarlos.

Tienes la opción de rediseñarlos o empezar de nuevo desde el principio. Puede repetir el proceso para todas las demás páginas de su sitio web.

Al crear una cálida página de agradecimiento y actualizar las páginas Mi cuenta y Términos de servicio, puede ganarse los corazones y las mentes de sus clientes.

La funcionalidad de arrastrar y soltar de Elementor, combinada con este tutorial, garantizará que tengas una experiencia sin problemas al crear tus páginas.

Después de configurar su tienda WooCommerce, es posible que desee hacerla más atractiva para sus visitantes y clientes. Agregar ventanas emergentes le da al usuario otra impresión y un nuevo deseo de permanecer en su tienda.

 Para crear una ventana emergente, vaya a Plantillas > Ventanas emergentes en la barra de menú. Se le presentará una lista de todas sus ventanas emergentes y, si aún no ha creado una, verá algo similar a lo siguiente:

Una vez que haya hecho clic en AGREGAR NUEVA POPUP (que se explica por sí mismo), se le pedirá que le dé un nombre y luego seleccione una plantilla de los amp prediseñados que se muestran. Hay varias plantillas disponibles para múltiples propósitos; algunos son apropiados para anuncios, otros para promocionar un descuento, otros son ideales para animar a los usuarios a registrarse para obtener algo. Incluso hay amp para advertir a los usuarios sobre el uso de cookies u otras notificaciones del RGPD. Tan pronto como haya encontrado algo que le guste, haga clic en él para ver una vista previa más grande y luego presione el botón Insertar.

Serás llevado al generador de ventanas emergentes en el backend de WordPress después de hacer clic en este botón.

Si ha trabajado con Elementor en el pasado, se sentirá como en casa con la interfaz, las opciones y la forma en que todo está diseñado para usted. Es esencialmente el mismo proceso que crear plantillas de página de Elementor en WordPress.

En el lado derecho de la pantalla está el lienzo principal, que muestra una vista previa de en qué estás trabajando actualmente. Puede editar y personalizar cada elemento individualmente seleccionándolo y seleccionando Editar > Editar elementos. Cuando haya terminado, verá los controles y preferencias mostrados en la barra lateral a la izquierda, junto con la opción de Publicar su trabajo.

Configuración de la ventana emergente

 Aquí es cuando deberías ver una vista previa de tu ventana emergente, ya sea una pizarra en blanco o la plantilla que elegiste.

La Configuración de ventana emergente, siempre abierta de forma predeterminada, le permite personalizar cómo funciona el lienzo emergente. Son los siguientes:

• Aquí es donde querrás pasar la mayor parte del tiempo porque es donde podrás crear diferentes tipos de ventanas emergentes. En otras palabras, al ajustar esta configuración, podrá realizar los siguientes efectos:

• Las ventanas emergentes modales son un tipo de ventana modal.
• Diapositivas, barras de notificaciones, etc.

Además, puede personalizar otras configuraciones importantes.

Las siguientes opciones están disponibles en la Configuración :

• Cambia la altura y el ancho de la imagen.
• Cambie la orientación vertical u horizontal del objeto (por amp , puede fijarlo en la parte superior o inferior para crear una barra de notificaciones)
• Tome una decisión sobre si utilizar o no una superposición (esto le permite, por amp , atenuar el fondo cuando la ventana emergente está activa)
• Desactive el botón de cerrar en su navegador.
• Incluir una animación para la entrada.

Puede hacer las siguientes cosas en la Estilo :

• Puede cambiar el color de fondo, convertirlo en degradado o utilizar una imagen como fondo.
• Si la superposición está habilitada, configúrela.
• En caso de que tengas habilitado el botón de cerrar, deberás configurarlo.

Finalmente, la pestaña Avanzado contiene algunas configuraciones de importación diversas que le permiten hacer cosas como las siguientes:

• Muestre el botón de cerrar o haga que la ventana emergente se cierre automáticamente después de un cierto período de tiempo.
• Al hacer clic en la superposición o presionar la tecla Escape, puede evitar que la ventana se cierre.

• Desactive la capacidad de desplazarse hacia abajo en la página.
• Evite múltiples ventanas emergentes (si ha dirigido varias ventanas emergentes a la misma página, esto evitará que sus visitantes se molesten).

Para darle una idea de cómo afectarán estas configuraciones a su ventana emergente, así es como se ve cuando cambia la Posición a la esquina inferior derecha de la ventana:

Observe cómo la ventana emergente ahora está fijada permanentemente en la esquina inferior derecha. Usando un disparador de desplazamiento junto con una animación de entrada, puede lograr un efecto de deslizamiento agradable y discreto.

También puedes crear ventanas emergentes usando el generador visual en Elementor.

Tan pronto como haya completado la configuración básica de la ventana emergente, puede comenzar a diseñar el contenido real de su ventana emergente arrastrando y soltando elementos en la interfaz visual de arrastrar y soltar.

Puede utilizar cualquier widget de Elementor que desee, lo que le brinda un gran control sobre el diseño final. El widget de formulario es lo único que es absolutamente necesario incluir porque es el único que le permite crear su formulario de suscripción de correo electrónico.

Con el widget de formulario, tienes control total sobre los campos que deseas ofrecer, así como el texto y la apariencia del botón de enviar. Por amp :

Más allá de eso, le recomiendo encarecidamente que se familiarice con todos los widgets y opciones de diseño de Elementor.

Como se indicó anteriormente, usted tiene un gran control sobre la apariencia de su sitio web y también tiene acceso a algunos widgets útiles que pueden ayudarlo a aumentar su tasa de conversión.

Preferencias de publicación

Cuando esté satisfecho con lo que ha creado, querrá compartirlo con el mundo. Después de presionar el botón PUBLICAR, se le presentarán una serie de preguntas. A modo de ilustración:

¿Es posible especificar las condiciones bajo las cuales desea que aparezca la ventana emergente? Puede elegir qué páginas incluir o excluir de sus resultados de búsqueda. Puedes tener tantas condiciones como desees.

Entonces, ¿cuál es el evento que hace que aparezca la ventana emergente? Puede elegir si desea mostrar o no la ventana emergente inmediatamente al cargar la página, al desplazarse o cuando el usuario se desplaza a un elemento específico, entre otras posibilidades. Todas estas opciones tienen sus configuraciones, lo que permite una personalización completa.

Por último, pero no menos importante, verá algunas reglas avanzadas, como mostrar la ventana emergente solo a los visitantes que regresan, mostrar la ventana emergente solo una cantidad determinada de veces o quizás solo mostrar la ventana emergente cuando un visitante es remitido a su sitio web desde un sitio específico. URL. Hay algunos más también. Estas opciones pueden mejorar significativamente la experiencia del usuario de su ventana emergente, permitiéndole diseñarla con verdadera integridad y consideración para sus usuarios.

Complete la configuración de la manera que desee, luego haga clic en GUARDAR Y CERRAR. Se le dirigirá a una amp visión de cómo se verá su ventana emergente después de hacer clic en este botón.

Las ventanas emergentes se pueden personalizar y se les puede agregar contenido dinámico.

Lleva las cosas al siguiente nivel, ¿de acuerdo? Hasta este punto, seleccionamos una plantilla y modificamos una o dos sesiones, y eso es todo. Considere el escenario en el que queremos personalizar aún más nuestra ventana emergente.

Estamos de vuelta en la etapa AGREGAR NUEVA POPUP del proceso, donde podemos especificar un título y elegir una plantilla una vez más.

Después de eso, podemos seleccionarlo, realizar los cambios necesarios en la configuración básica y presionar PUBLICAR una vez más.

Bien, aquí es donde las cosas empiezan a ponerse interesantes. Podemos usar Elementor para obtener datos dinámicos de nuestra instalación de WordPress e insertarlos en la ventana emergente de nuestra ventana emergente. Podemos incluir información como el nombre del usuario, el título de la página, etc.

Considere el siguiente escenario: estamos ejecutando WooCommerce y queremos informar a un usuario que hay un descuento disponible en el producto específico que está viendo actualmente. Para comenzar, seleccione una sección de texto de la plantilla y luego haga clic en Dinámico en la barra lateral:

Tenemos una amplia variedad de opciones para elegir, incluida información de la publicación en sí, información del sitio en su conjunto, información de los medios, información del autor e incluso información de WooCommerce. Seleccionaremos un Título de producto y se agregará a nuestro bloque de contenido de texto como resultado de nuestra selección.

Supongamos que los detalles de la base de datos no se recuperan correctamente. En ese caso, es posible especificar algo antes del texto, algo después del texto y un texto alternativo (si los detalles de la base de datos no se recuperan correctamente).

Entonces, dupliquemos este proceso para el botón, que mostrará el precio del producto. Podemos redactar el texto anterior como COMPRE AHORA PARA para proporcionarnos un llamado a la acción convincente:

Incluso podemos ir un paso más allá y utilizar la imagen del producto como fondo de la propia ventana emergente.

Cuando presionamos PUBLICAR, se nos presenta la configuración de publicación una vez más, lo que nos permite especificar que solo queremos que la ventana emergente aparezca en las páginas de WooCommerce. Configuraremos el cronómetro a 15 segundos de inactividad para que sea el disparador. Así es como resultó al final:

Aunque el diseño podría mejorarse, puede ver que mostramos el nombre del producto, su precio y una imagen del producto como fondo de la ventana emergente. ¡Brillante!