El bloque de Checkout te permite incrustar un formulario de pago de WooCommerce totalmente personalizado en cualquier página de SeedProd. Te da control total sobre el diseño y el estilo visual del checkout: desde los colores de los campos, la tipografía de las etiquetas y el espaciado entre filas, hasta el diseño de los botones, el estilo del carrito y la apariencia de la sección de pago, para que puedas crear una experiencia de pago que coincida con tu marca sin tocar ningún código.
Utiliza este bloque para crear una página de pago optimizada y acorde a tu marca, que reduzca las fricciones y mantenga a los clientes centrados en completar su compra. Una vez publicada tu página, simplemente asígnala como tu página de pago en la configuración de WooCommerce para que los clientes sean dirigidos a ella automáticamente.
Añadir el bloque de Checkout a tus páginas
Sigue estos pasos para añadir un bloque de Checkout a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > WooCommerce, arrastra y suelta el bloque Checkout en la sección deseada de tu página.
Paso 2: Configurar los ajustes de estilo
Una vez añadido, haz clic en el bloque de Checkout para abrir su configuración. En la pestaña Estilos, los ajustes están organizados en siete secciones.
Diseño:
- Columnas de Diseño: Elige entre un diseño de Una Columna (campos de facturación y resumen del pedido apilados verticalmente) o un diseño de Dos Columnas (campos de facturación a la izquierda, resumen del pedido a la derecha).
Encabezados:
- Color del Encabezado: Establece el color del texto para los encabezados de sección dentro del formulario de pago.
- Tipografía: Establece la familia de fuentes, tamaño, altura de línea, espaciado entre letras, grosor, estilo y mayúsculas para el texto del encabezado del checkout.
Campos:
- Color de Fondo del Campo: Establece el color de fondo de los campos de entrada del checkout.
- Color del texto del campo: Establece el color del texto dentro de los campos de entrada.
- Color del borde del campo: Establece el color del borde de los campos de entrada.
- Ancho del borde del campo: Establece el grosor del borde en cada lado de los campos de entrada.
- Color de la Etiqueta: Establece el color del texto para las etiquetas de los campos.
- Tipografía de la Etiqueta: Establece la familia de fuentes, tamaño, altura de línea, espaciado entre letras, grosor, estilo y mayúsculas para el texto de las etiquetas de los campos.
- Espaciado entre Filas: Ajusta el espaciado vertical entre las filas de los campos del formulario con un deslizador (predeterminado: 6px).
Botones:
- Estilo del Botón: Elige un estilo visual para los botones de pago: Plano, 2D, Vintage, Fantasma o Enlace.
- Color del Botón: Establece el color de fondo de los botones de acción del checkout.
- Radio del Borde: Ajusta la redondez de las esquinas de los botones de pago con un deslizador.
Alertas:
- Color de resaltado de información: Establece el color utilizado para los mensajes de alerta informativos.
- Color de resaltado de error: Establece el color utilizado para los mensajes de alerta de error.
- Color de resaltado de éxito: Establece el color utilizado para los mensajes de alerta de éxito.
Carrito:
- Color del Borde del Carrito: Establece el color del borde de la tabla del resumen del pedido.
- Ancho del Borde del Carrito: Establece el grosor del borde en cada lado de la tabla del carrito.
- Radio del Borde: Ajusta la redondez de las esquinas de la tabla del carrito con un deslizador.
- Color de Fondo: Establece el color de fondo de la tabla del carrito.
- Color del Texto: Establece el color general del texto dentro de la tabla del carrito.
- Familia de fuentes: Elige la fuente utilizada para el texto del cuerpo del carrito.
- Color de Fondo del Encabezado: Establece el color de fondo de la fila del encabezado de la tabla del carrito.
- Familia de fuentes del encabezado: Elige la fuente utilizada para el texto del encabezado del carrito.
- Color del Encabezado: Establece el color del texto de la fila del encabezado de la tabla del carrito.
Sección de pago:
- Color de fondo: Establece el color de fondo de la sección de métodos de pago.
- Color del texto: Establece el color del texto dentro de la sección de métodos de pago.
- Familia de fuentes: Elige la fuente utilizada para el texto de la sección de pago.
Paso 3: Elegir una plantilla
En la pestaña Plantillas, puedes elegir entre una colección de estilos de pago pre-diseñados. Cada plantilla aplica un conjunto coordinado de estilos de campo, botón y diseño a tu formulario de pago con un solo clic. Los estilos de campo de entrada disponibles incluyen Claro, Sin borde, Borde ancho, Sombra interior, Gris, Oscuro, Borde inferior y Transparente.
Paso 4: Personaliza el diseño
En la pestaña Avanzado, puedes refinar aún más el diseño y el comportamiento de tu bloque de pago.
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Atributos:
- Clase personalizada: Añade una o más clases CSS personalizadas al contenedor del bloque para una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 5: Establecer como tu página de pago de WooCommerce
Después de publicar tu página, navega a WooCommerce > Ajustes > Avanzado y establece tu nueva página de SeedProd como la página de pago designada. Esto asegura que los clientes sean dirigidos a tu página de pago personalizada cuando procedan a completar una compra.
Paso 6: Guardar tus cambios
Una vez que hayas terminado de configurar el bloque de pago y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de pago a tu página! Con opciones de diseño, plantillas prediseñadas y control granular sobre cada detalle visual —desde las etiquetas de los campos y los estilos de los botones hasta los encabezados de la tabla del carrito y la tipografía de la sección de pago— puedes crear una experiencia de pago que se sienta fluida y profesional. No olvides asignar la página como tu página de pago en los ajustes de WooCommerce para que tus clientes siempre aterricen en el lugar correcto.