La extensión
Popup de Añadir al Carrito agrega una funcionalidad de ventana emergente a Easy Digital Downloads. Cuando se activa, después de que un cliente hace clic en un botón de ‘Añadir al Carrito’, aparece una pequeña ventana modal que le da la opción de ir directamente a la página de pago o de continuar comprando. Aquí hay un ejemplo usando el estilo predeterminado del tema TwentyFifteen.
Así es como se configura la ventana emergente.
Instrucciones de Configuración para el Popup de Añadir al Carrito
- Una vez instalado, localiza la configuración de esta extensión en Administrador de WordPress → Descargas → Ajustes → Extensiones → Popup de Añadir al Carrito
- Cuando actives el plugin, la ventana emergente estará deshabilitada por defecto. Esto es para que tengas la oportunidad de ajustar la configuración antes de activarla en tu sitio. Luego, la ventana emergente se puede habilitar marcando la casilla Habilitar Popup.
Nota: Al usar la función de botón “Comprar ahora”, o la extensión Descargas Gratuitas, la ventana emergente se deshabilitará automáticamente para no interferir con las redirecciones de las pasarelas de pago o las ventanas emergentes de terceros.
Personalización
Apariencia General
Vista Previa del Popup: Este botón te permite activar una ventana emergente mientras estás en la página de configuración para ver tus cambios antes de guardarlos. También puedes usar el enlace “Vista Previa del Popup” en la Barra de Administración. Lo agregamos para que no tengas que desplazarte constantemente hasta la parte superior de la página de configuración para previsualizar la ventana emergente.
Ten en cuenta que la vista previa podría no ser completamente precisa al usar shortcodes, ya que algunos estilos podrían no cargarse en el Administrador de WordPress. Se recomienda previsualizar en el front-end de tu sitio cuando hayas terminado para confirmar la apariencia de la ventana emergente.
Texto del Popup: Aquí puedes establecer el texto que se muestra en la ventana emergente. Si el plugin detecta “%s” (sin comillas) en cualquier lugar del texto de esta opción, se cambiará por el nombre de la descarga que el usuario ha añadido a su carrito. También tienes la opción de agregar archivos multimedia (como imágenes), incrustaciones e incluso shortcodes dentro de la ventana emergente.
Texto Plural del Popup: Similar al Texto del Popup, este texto se muestra en la ventana emergente cuando se han añadido varios artículos al carrito al mismo tiempo. Esto es típico cuando se usan opciones de precios variables que permiten agregar varias opciones simultáneamente. Una vez más, también tienes la opción de agregar archivos multimedia (como imágenes), incrustaciones e incluso shortcodes dentro de la ventana emergente.
¡Recuerda que puedes expandir la barra de herramientas del editor haciendo clic en el botón más a la derecha del editor!
Tamaño de Fuente: Esto te permite cambiar el tamaño general de la fuente utilizada en la ventana emergente. Se aceptan varios formatos CSS aquí.
- Los tamaños en píxeles son tamaños fijos absolutos. Ejemplo: 12px
- Los tamaños en porcentaje son relativos al tamaño de fuente predeterminado del tema. Ejemplo: 120% (20% más grande que el tamaño de fuente del tema).
- Los valores "em" son similares a los porcentajes, donde 1em es el tamaño de fuente predeterminado. Ejemplo: 2em (el doble del tamaño predeterminado).
Color del texto: El color del texto del popup. Para establecer el color, haz clic en el cuadro de color para revelar el selector de color.
Color de fondo: El color del fondo del popup. Para establecer el color, haz clic en el cuadro de color para revelar el selector de color.
Aquí tienes un ejemplo con el color del texto establecido en amarillo y el color de fondo establecido en azul:
Borde: Esta opción te permite dar estilo al borde del popup, que aparece en el borde de la caja del popup. Las tres opciones son el ancho (o grosor), el estilo y el color, respectivamente.
Radio del borde: El radio de las esquinas del borde. Cuanto mayor sea este valor, más redondeadas serán las esquinas. Esto también se aplica si has establecido el borde como no visible (ancho es cero, estilo es "ninguno" o color es transparente).
Sombra: Esta opción te permite añadir una sombra al popup estableciendo la cantidad de sombra (tamaño y grosor) y el color de la sombra. El siguiente ejemplo añade una sombra verde oscuro con una cantidad de sombra de 15:
Color de superposición: El término superposición se refiere al color que cubre el resto de la página cuando se muestra el popup. Puedes cambiar su color haciendo clic en el cuadro de color para revelar el selector de color, que también incluye una opción de transparencia. El siguiente ejemplo cambia la superposición a un naranja claro semitransparente:
Dimensiones del popup
Tamaño: Aquí puedes controlar el tamaño del popup. Se aceptan varios formatos CSS, incluyendo píxeles y porcentajes.
- Los tamaños en píxeles son tamaños fijos. Ejemplo: 500px (500 píxeles en la pantalla del usuario)
- Los tamaños en porcentaje son relativos al tamaño de la ventana del navegador del usuario. Ejemplo: 60% (60% de la pantalla del usuario)
Si el ancho o la altura se dejan en blanco, el popup los calculará automáticamente para que se ajusten al contenido.
El siguiente ejemplo demuestra un popup con un ancho establecido en 500px y la altura dejada en blanco para que se calcule automáticamente.
Relleno: El relleno se refiere al espacio entre el borde del popup y su contenido, como se muestra en la siguiente imagen:
El área en verde es lo que se conoce como "relleno".
Estilos de botón
Borde del botón: El borde de los botones que se muestran en el popup, similar a la opción Borde anterior. Puedes establecer el grosor, el estilo y el color del borde respectivamente.
Radio de las esquinas: El radio de las esquinas del botón. Cuanto mayor sea este valor, más redondeadas serán las esquinas. Esto también se aplica si el borde del botón no es visible (ancho establecido en 0, estilo es "ninguno" o color es transparente).
Por ejemplo: un borde "punteado" azul con un ancho de 5px y un radio de esquina de 3px:
Espaciado del botón: Similar a la opción de Espaciado del popup, esto te permite ajustar el espacio interior del botón. Por ejemplo, lo siguiente usa un espaciado de 6px arriba y abajo y 30px a izquierda y derecha.
Dirección del botón: Puedes configurar los botones para que se muestren uno al lado del otro horizontalmente, o apilados uno encima del otro verticalmente. La configuración predeterminada es horizontal.
Alineación del botón: Puedes elegir entre alineación a la izquierda, centro y derecha. Elegir izquierda o derecha empujará los botones a ese lado respectivo, mientras que elegir centro los posicionará en el centro del popup.
Orden de los botones: Esta opción te permite elegir qué botón se muestra primero. Si la Dirección del botón está configurada como horizontal, esta opción determinará qué botón se muestra a la izquierda. Si la Dirección del botón está configurada como vertical, esta opción determinará qué botón se muestra arriba.
Botón de Finalizar Compra/Continuar
Las siguientes dos secciones consisten en opciones idénticas que te permiten ajustar la apariencia individual de ambos botones.
Habilitado: Elige si mostrar u ocultar el botón.
Texto: Puedes personalizar el texto de cada botón como quieras.
Color del texto: El color del texto dentro del botón.
Color del texto al pasar el ratón: El color del texto dentro del botón cuando el cursor del ratón está sobre él.
Color de fondo: El color de fondo del botón.
Color de fondo al pasar el ratón: El color de fondo del botón cuando el cursor del ratón está sobre él.
El siguiente ejemplo usa botones blancos con texto negro que cambian a botones rojos con texto blanco cuando el cursor del ratón está sobre el botón.
El Selector de Color, Explicado
