Documentación de SeedProd

Documentación, Materiales de Referencia y Tutoriales para SeedProd

Bloque Botón Comprar Ahora (Easy Digital Downloads)

El bloque Botón Comprar Ahora de EDD te permite añadir botones de compra con un solo clic para productos de Easy Digital Downloads en tus páginas de SeedProd. Este bloque agiliza el proceso de compra al permitir que los clientes omitan los pasos tradicionales de carrito y pago, posibilitando compras instantáneas con un solo clic.

El botón Comprar Ahora es perfecto para ventas de productos digitales donde deseas eliminar fricciones en el proceso de compra. En lugar de requerir que los clientes añadan artículos a un carrito, revisen su carrito y luego procedan al pago, pueden completar su compra de inmediato. Este flujo de trabajo simplificado es ideal para vender productos digitales individuales, licencias de software, eBooks, cursos o cualquier descarga digital donde una experiencia de compra rápida y sin complicaciones aumente las conversiones.

Requisitos: El bloque Botón Comprar Ahora de EDD está disponible en nuestro plan de licencia Elite Elite. Antes de empezar, asegúrate de que Easy Digital Downloads esté instalado en tu sitio web y que haya algunos productos de descarga publicados.

Bloque de Botón de Compra Ahora de EDD con opciones de personalización

Añadir el Bloque Botón Comprar Ahora de EDD a tus Páginas

Sigue estos pasos para añadir un bloque Botón Comprar Ahora de EDD a tu página de SeedProd:

Paso 1: Añadir el Bloque

En Diseño > Bloques > Easy Digital Downloads, arrastra y suelta el bloque Botón Comprar Ahora en la sección deseada de tu página.

Arrastrando el bloque de Botón de Compra Ahora de EDD a la página

El bloque Botón Comprar Ahora de EDD se encuentra en Easy Digital Downloads y se puede añadir a cualquier página.

Paso 2: Configurar los Ajustes de Contenido

Una vez añadido, haz clic en el bloque Botón Comprar Ahora de EDD para abrir su configuración. En la pestaña Contenido, puedes seleccionar tu producto y personalizar la apariencia del botón.

Ajustes:

  • ID del Producto: Selecciona qué producto de Easy Digital Downloads comprará este botón. Elige de una lista desplegable de todas tus descargas publicadas
  • Ir Directamente al Pago: Activa para enviar a los clientes directamente a la página de pago después de hacer clic, o desactiva para añadir primero el artículo a su carrito
  • Mostrar Precio: Activa para mostrar u ocultar el precio del producto en el propio botón

Botón:

  • Texto del Botón: Introduce el texto que aparece en tu botón (por ejemplo, “Comprar Ahora”, “Pagar”, “Obtener Acceso Inmediato”). Mantenlo claro y orientado a la acción
  • Color de Fondo: Establece el color de fondo de tu botón para que coincida con tu marca
  • Alinear: Establece la alineación horizontal del botón dentro de su contenedor (izquierda, centro o derecha)
  • Tamaño: Elige el tamaño del botón entre Pequeño, Mediano, Grande, Muy Grande o Extra Grande. Los botones más grandes son más prominentes para productos importantes

Iconos:

  • Icono Antes del Texto: Añade un icono que aparezca a la izquierda del texto de tu botón. Haz clic en Elegir Icono para buscar iconos disponibles
  • Icono Después del Texto: Añade un icono que aparezca a la derecha del texto de tu botón, comúnmente utilizado para indicadores de carrito de compras o descargas
Configuración del contenido del bloque de Botón de Compra Ahora de EDD

Selecciona tu producto, personaliza el texto y la apariencia del botón, y añade iconos opcionales.

Campos:

Estas configuraciones dan estilo a los campos de entrada de cantidad que permiten a los clientes especificar cuántas copias desean comprar. Para habilitar los campos de cantidad, primero debe habilitar Misc > General > Cart Item Quantities en la configuración del plugin Easy Digital Downloads. Asegúrese también de que la casilla Deshabilitar campo de cantidad para este producto no esté marcada en la página de descarga de cada producto.

  • Color de fondo del campo: Establece el color de fondo para los campos de entrada de cantidad
  • Color del texto del campo: Elige el color del texto dentro de los campos de cantidad
  • Color del borde del campo: Establece el color de los bordes de los campos de cantidad
  • Ancho del borde del campo: Ajusta el grosor de los bordes alrededor de los campos de cantidad (Superior, Derecho, Inferior, Izquierdo)
  • Espaciado de fila: Controla el espaciado vertical entre el botón y el campo de cantidad
  • Radio del borde: Ajusta la redondez de las esquinas del campo de cantidad
  • Ancho del campo: Establece el ancho del campo de entrada de cantidad
Configuración del campo de cantidad del bloque de Botón de Compra Ahora de EDD

Personaliza la apariencia de los campos de entrada de cantidad (requiere que los campos de cantidad estén habilitados en la configuración de EDD).

Paso 2a: Elegir un Estilo de Plantilla

En la pestaña Plantillas, puedes seleccionar entre estilos de botones prediseñados para cambiar rápidamente la apariencia general de tu botón Comprar ahora.

  • Botón píldora, Botón plano, Botón azul, Botón verde claro, Botón verde, Botón naranja, Botón rojo, Botón amarillo, Botón blanco, Botón gris, Botón negro: Elige entre once diseños de plantillas diferentes, cada uno con colores y estilos únicos. Previsualiza cada estilo para encontrar el que mejor se adapte al diseño de tu página.
Estilos de plantilla del bloque de Botón de Compra Ahora de EDD

La pestaña Plantillas ofrece once estilos prediseñados para personalizar rápidamente la apariencia de tu botón.

Paso 3: Personaliza el Diseño

En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de botón Comprar ahora de EDD:

Estilos:

  • Tipografía: Controla las propiedades de fuente para el texto de tu botón, incluyendo familia de fuentes, tamaño, peso y estilo.
  • Relleno vertical: Controla el espaciado superior e inferior dentro del botón, afectando su altura.
  • Relleno horizontal: Controla el espaciado izquierdo y derecho dentro del botón, afectando su anchura.
  • Radio del Borde: Ajusta la redondez de las esquinas de los botones. Valores más altos crean botones más redondeados, mientras que cero crea esquinas afiladas.
  • Estilo del botón: Elige el tratamiento visual para tu botón. Las opciones incluyen Plano (diseño plano moderno), 2D (profundidad sutil), Vintage (aspecto clásico), Fantasma (transparente con borde) o Enlace (enlace de texto simple).
  • Sombra del texto: Añade efectos de sombra al texto del botón para darle profundidad y legibilidad. Elige entre Ninguna, Capilar, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o Personalizada.
  • Sombra: Aplica efectos de sombra a todo el botón para darle profundidad. Elige entre Ninguna, Capilar, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o Personalizada.

Espaciado:

  • Margen: Controla el espaciado exterior alrededor de tu bloque de botón (Superior, Derecho, Inferior, Izquierdo). Esto determina cuánto espacio aparece entre el botón y los elementos circundantes.
  • Relleno: Ajusta el espaciado interior dentro del contenedor de tu bloque de botón (Superior, Derecho, Inferior, Izquierdo). Esto crea espacio libre alrededor del botón en sí.

Atributos:

  • ID de CSS: Muestra el identificador único autogenerado para tu bloque de botón. Esta ID es creada automáticamente por SeedProd para estilos personalizados o para apuntar con JavaScript.
  • Clase personalizada: Agrega clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
  • Atributos personalizados: Añade cualquier atributo HTML al elemento contenedor del botón. Introduce cada atributo en una nueva línea usando el formato: nombre-atributo|valor (por ejemplo, data-producto|descarga-digital)

Visibilidad del Dispositivo:

  • Ocultar en escritorio: Oculta el bloque de botón en pantallas de escritorio.
  • Ocultar en tableta: Oculta el bloque de botón en dispositivos tableta.
  • Ocultar en móvil: Oculta el bloque de botón en dispositivos móviles.

Efectos de Animación:

  • Animación de entrada: Elige entre varios efectos de animación que se reproducen cuando el botón entra en la vista. Las opciones incluyen Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchas más. Esto atrae la atención a tu botón de compra.
Configuración avanzada del bloque de Botón de Compra Ahora de EDD

La pestaña Avanzado proporciona opciones de estilo que incluyen tipografía, relleno, bordes, sombras y efectos de animación.

Paso 4: Guarde sus Cambios

Una vez que hayas terminado de configurar el bloque de Botón de Compra Ahora de EDD y personalizar su apariencia, asegúrate de guardar tu trabajo.


¡Has añadido con éxito un bloque de Botón de Compra Ahora de EDD a tu página! Este botón de compra optimizado elimina la fricción del proceso de compra, permitiendo a los clientes comprar tus descargas digitales con un solo clic. Experimenta con diferentes estilos, colores y tamaños de botón para crear un botón de Compra Ahora que convierta visitantes en clientes y maximice las ventas de tus productos digitales.

Artículos Relacionados