El
Popup de Añadir al Carrito la extensión añade una funcionalidad de popup 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í tienes un ejemplo usando el estilo predeterminado del tema TwentyFifteen.
Here’s how to configure the popup.
Instrucciones de Configuración para el Popup de Añadir al Carrito
- Una vez instalado, localiza los ajustes de esta extensión en administrador de WordPress → Descargas → Ajustes → Extensiones → Popup de Añadir al Carrito
- Cuando actives el plugin, el popup estará deshabilitado por defecto. Esto es para que tengas la oportunidad de ajustar la configuración antes de activarlo en tu sitio. El popup 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, el popup se deshabilitará automáticamente para no interferir con las redirecciones de las pasarelas de pago o los popups de terceros.
Personalización
Apariencia General
Previsualizar Popup: Este botón te permite activar un popup mientras estás en la página de ajustes para ver tus cambios antes de guardarlos. También puedes usar el enlace “Previsualizar Popup” en la Barra de Administración. Lo añadimos para que no tengas que desplazarte constantemente hasta la parte superior de la página de ajustes para previsualizar el popup.
Ten en cuenta que la previsualización podría no ser totalmente 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 del popup.
Texto del Popup: Aquí puedes establecer el texto que se muestra en el popup. Si el plugin detecta “%s” (sin comillas) en cualquier lugar del texto de esta opción, se reemplazará por el nombre de la descarga que el usuario ha añadido a su carrito. También tienes la opción de añadir archivos multimedia (como imágenes), incrustaciones e incluso shortcodes dentro del popup.
Texto Plural del Popup: Similar al Texto del Popup, este texto se muestra en el popup 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 añadir varias opciones simultáneamente. Una vez más, también tienes la opción de añadir archivos multimedia (como imágenes), incrustaciones e incluso shortcodes dentro del popup.
¡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 el popup. 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 de grande que el predeterminado).
Color del texto: El color del texto del popup. Para establecer el color, haga clic en el cuadro de color para revelar el selector de color.
Color de fondo: El color de fondo del popup. Para establecer el color, haga 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 en azul:
Borde: Esta opción te permite dar estilo al borde del popup, que aparece alrededor del 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 configurado el borde como no visible (ancho cero, estilo "ninguno" o color 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 semitransparente claro:
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 "ninguno" o color transparente).
Por ejemplo: un borde "punteado" azul con un ancho de 5px y un radio de esquina de 3px:
Relleno del botón: Similar a la opción de Relleno del popup, esto te permite ajustar el espaciado interior del botón. Por ejemplo, el siguiente utiliza un relleno de 6px arriba y abajo y 30px a izquierda y derecha.
Dirección de los botones: Puede 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 de los botones: Puede elegir entre la alineación a la izquierda, al centro y a la 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 le permite elegir qué botón se muestra primero. Si la Dirección de los botones está configurada como horizontal, esta opción determinará qué botón se muestra a la izquierda. Si la Dirección de los botones está configurada como vertical, esta opción determinará qué botón se muestra arriba.
Botón de Finalizar compra/Continuar
Las dos siguientes secciones consisten en opciones idénticas que le permiten ajustar la apariencia individual de ambos botones.
Habilitado: Elija si desea mostrar u ocultar el botón.
Texto: Puede personalizar el texto de cada botón como desee.
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 utiliza botones blancos con texto negro que se convierten en botones rojos con texto blanco cuando el cursor del ratón está sobre el botón.
El selector de color, explicado
