¿Te gustaría que tu página de checkout se pareciera al resto de tu tienda en lugar de un formulario predeterminado? Easy Digital Downloads funciona con el constructor de páginas Elementor, para que puedas rediseñar cada parte de tu checkout sin tocar código.
Esta guía te guía a través del bloque EDD Checkout, el widget EDD Checkout en Elementor y los widgets individuales del checkout que usas para rediseñar y reorganizar la página.
Requisitos: Los widgets de Elementor a continuación requieren el plugin Elementor instalado y activado, y la función Contener configurada como Activa en la pantalla Elementor Editor » Configuración » Funciones.
A partir de una plantilla de checkout
Si prefieres no crear un checkout desde cero, puedes importar una plantilla de checkout lista para usar y luego editarla con todo lo anterior. Cada plantilla importada coloca los cuatro widgets de checkout por ti, por lo que los pasos de estilo y reordenación de esta guía se aplican directamente a ella.
Las plantillas llegan con encabezados de marcador de posición y texto de ejemplo alrededor de los campos de pago activos, por lo que reemplazar ese texto con el tuyo suele ser la primera edición que harás.
Configuración del bloque EDD Checkout
La página de Checkout se crea para ti cuando activas Easy Digital Downloads. Se encuentra en tu lista de Páginas de WordPress como Checkout, y utiliza el bloque EDD Checkout.
Nota: El Bloque EDD Checkout y su configuración están disponibles para todos los usuarios, independientemente de si usas Elementor o no.
Abre la página de Checkout y la configuración del bloque aparecerá a la derecha.
Comienza con la configuración de Vista previa como invitado, que te permite comprobar la experiencia tanto de los visitantes primerizos como de los clientes recurrentes. También obtienes una vista previa en tiempo real de la página de checkout y del formulario de tarjeta de crédito directamente en el editor.
Elige uno de tus productos del menú Seleccionar un producto para ver cómo se ve el formulario con algo en el carrito.
La configuración propia del bloque te permite cambiar el diseño, ajustar el tamaño de la miniatura del carrito y mostrar u ocultar el formulario de descuento.
Edición de tu checkout con Elementor
Elementor crea su propio widget EDD Checkout, que te ofrece un control de diseño mucho más profundo que el bloque por sí solo.
Acceso al editor de Elementor
Con el plugin Elementor instalado y activado, tu página de Checkout ofrece una opción de Editar con Elementor.
Al seleccionarla, se abre el editor de Elementor.
Agregar el widget EDD Checkout
En el panel de elementos de la izquierda, busca EDD Checkout, luego arrástralo a tu página.
Un widget recién agregado permanece vacío hasta que eliges un diseño, que es el siguiente paso. Una vez que lo hagas, renderizará una vista previa en vivo de tu formulario de checkout, para que puedas ver tus cambios a medida que los realizas en lugar de publicar y revisar el frontend.
Este widget es el contenedor de todo tu checkout. Su propia configuración se encuentra en tres pestañas: Diseño, Estilo, y Avanzado.
Elección de un diseño de checkout
En la pestaña Diseño, abre Diseño del Checkout. Tienes cinco arreglos listos para elegir, que cubren diseños de una y dos columnas, y selectores para mostrar u ocultar el carrito y el formulario de descuento.
Nota: Elementor te advierte que al cambiar el diseño se reemplazarán todos los contenidos del widget. Elige tu diseño antes de invertir tiempo en el estilo, para que tu trabajo se mantenga.
Estilo del contenedor del checkout
La pestaña Estilo maneja el checkout en su conjunto, con secciones para Fondo, Superposición de Fondo, Borde, Divisor de Forma, y Elementos del Formulario.
Shape Divider es el que vale la pena conocer, porque agrega una forma decorativa al borde superior o inferior de tu checkout en lugar de un límite plano. Elige un borde, luego elige una forma.
Personalización de los widgets individuales del checkout
Tu checkout se construye a partir de cuatro widgets separados: el carrito, la información personal, la información de pago y el formulario de descuento. Cada uno tiene su propia configuración, lo que te permite estilizar una parte del checkout sin alterar el resto.
No encontrarás estos cuatro en el panel de elementos, porque no los agregas manualmente. Llegan como parte del widget EDD Checkout. Para acceder a su configuración, selecciona la pieza que deseas directamente en la página.
El widget del carrito
En la pestaña Contenido, el carrito te ofrece un interruptor Encabezado del Carrito, un interruptor Miniatura del Carrito, y un control deslizante de Tamaño para esas miniaturas.
Su pestaña de Estilo es la más profunda de las cuatro. Los controles se agrupan en Encabezado del Carrito, Artículos del Carrito, y Filas del Pie de Página, para que puedas estilizar los totales de forma diferente a los artículos de línea que están encima.
El widget de información personal
Este widget cubre los campos de nombre y correo electrónico, además de los enlaces de inicio de sesión y registro. Su pestaña de Contenido incluye Vista Previa como Invitado, Alineación de Cuenta, y una opción de Nombre en una Sola Línea que pone el nombre y el apellido en una fila.
El widget de información de pago
Este se encarga del área de pago. Su pestaña de Estilo agrupa los controles en Botón de Compra, Selector de Pasarela, Método de Pago, y Detalles de la Tarjeta, para que el botón en el que hacen clic tus clientes pueda ser estilizado por sí solo.
El formulario de descuento
El formulario de descuento tiene una única configuración de contenido, Mostrar Campo de Descuento, y una profunda pestaña de Estilo que cubre el enlace de alternancia, el campo en sí y el botón de aplicar.
Reorganización de tu checkout
Debido a que cada parte del checkout es su propio widget, puedes cambiar el orden en que aparecen las cosas. Selecciona un widget, abre la pestaña Avanzado, luego abre Diseño. El control Orden mueve ese elemento al principio o al final de su contenedor, y una opción personalizada te permite establecer una posición exacta.
La forma más rápida de seleccionar la pieza que deseas es el panel de Estructura de Elementor, que enumera cada elemento de la página. Seleccionar uno allí lo resalta en el lienzo y carga su configuración.
Cuando estés satisfecho con el resultado, selecciona la flecha junto a Publicar, luego elige Guardar Borrador, Guardar como Plantilla, o Ver Página. Selecciona Publicar en sí para que tus cambios se publiquen.
Solución de problemas
Si no ves el bloque EDD Checkout o la configuración del widget descrita anteriormente, hay algunas opciones para probar.
La primera es verificar si el experimento de Contenedor Flexbox de Elementor está activado. Ve a Elementor » Editor » Ajustes » Funciones y asegúrate de que la opción Contenedor esté configurada en Activo.
Además, asegúrate de confirmar que tu plugin de Easy Digital Downloads está actualizado. Busca actualizaciones en Panel » Actualizaciones.
Los widgets individuales de pago y el selector de diseño necesitan Easy Digital Downloads 3.7.0 o superior. Los widgets propios de Elementor necesitan Elementor 3.35.0 o superior. De lo contrario, es posible que veas un widget llamado EDD Checkout (Legacy). Sigue funcionando y su configuración se encuentra en un solo widget en lugar de estar dividida entre los cuatro descritos anteriormente. Agrega el widget actual EDD Checkout a una página para pasar a la configuración más reciente.
Para cualquier cosa específica de los controles propios de Elementor, la base de conocimientos de widgets de Elementor los cubre en detalle.
Preguntas frecuentes: Personalización de EDD Checkout con Elementor
Aquí tienes respuestas a algunas preguntas comunes sobre la personalización del pago de EDD en Elementor.
¿Necesito la versión de pago de Elementor?
No. El plugin gratuito de Elementor es suficiente para el widget EDD Checkout y toda la configuración que se cubre aquí.
¿Por qué no encuentro el formulario del carrito o del descuento en el panel de elementos?
Esos cuatro widgets no se agregan manualmente. Vienen como parte del widget EDD Checkout, por lo que accedes a su configuración seleccionándolos en la página en lugar de arrastrarlos.
¿Cambiar el diseño del checkout deshace mi estilo?
Puede ser. Elementor advierte que cambiar el diseño reemplaza todo el contenido del widget, así que elige tu diseño primero y luego aplícale el estilo.
¿Puedo cambiar el orden de las secciones del checkout?
Sí. Selecciona el widget que deseas mover, luego usa el control de Orden en la pestaña Avanzado, bajo Diseño.
¿El checkout sigue funcionando sin Elementor?
Sí. El bloque EDD Checkout maneja tu checkout por sí solo, y su configuración está disponible para todos los usuarios. Elementor agrega control de diseño sobre él.
