El Módulo de Pago en el Proceso de Compra de Divi Woo

El Módulo de Pago en el Proceso de Compra de Divi Woo

El módulo de pago en el proceso de compra de Divi Woo añade funcionalidad de pago a la página de finalizar compra de Woo y se integra a la perfección con WooCommerce.


Divi Woo Checkout Payment Module

Instalar el plugin WooCommerce

Antes de poder usar el módulo de pago de Divi Woo, necesitas tener WooCommerce instalado en tu sitio.

  • Ve al panel de WordPress → Plugins → Añadir nuevo.

  • Usa el campo de búsqueda (arriba a la derecha) y busca WooCommerce.

  • Haz clic en Instalar ahora.

  • Haz clic en Activar.


Añadir el módulo de pago de Divi Woo

  • Haz clic en el icono verde + para insertar una fila y selecciona la estructura de columnas deseada.

  • Haz clic en el icono gris + dentro de la fila para abrir la biblioteca de módulos de Divi, que incluye todos los módulos del tema.

  • Haz clic en Módulos Woo para ver los disponibles.

  • Haz clic en el módulo Pago en finalizar compra para añadirlo a tu página.


Add the Divi Woo Checkout Payment Module

Todos los ajustes del módulo de pago de Divi Woo explicados

Al añadirlo, se abrirá automáticamente la ventana de configuración, donde puedes ajustar contenido y estilos. Estos se organizan en tres pestañas:

  • Contenido

  • Diseño

  • Avanzado


All Divi Woo Checkout Payment Module Settings Ex

Pestaña Contenido

Aquí se definen las opciones de contenido del módulo.


Divi Woo Checkout Payment module Background Content Tab settings

Fondo

En este grupo puedes definir:

  • Color de fondo

  • Degradado de fondo

  • Imagen de fondo

  • Vídeo de fondo

  • Patrón de fondo

  • Máscara de fondo

Cómo añadir un color de fondo

  • Haz clic en la primera pestaña (icono de cubo de pintura).

  • Haz clic en Añadir color de fondo y elige un color, o usa el cuentagotas.

Divi Woo Checkout Payment module Background Color settings

Cómo añadir un degradado de fondo
  • Haz clic en la segunda pestaña (icono de degradado).

  • Haz clic en Añadir degradado de fondo y ajusta los colores, tipo, dirección, repetición, unidades, y decide si el degradado va encima de una imagen.

Divi Woo Checkout Payment module Background Gradient settings

Cómo añadir una imagen de fondo
  • Haz clic en la tercera pestaña (icono de imagen).

  • Haz clic en + para abrir la biblioteca de medios y seleccionar o subir una imagen.

  • Ajusta tamaño, posición, repetición, efecto parallax y modo de mezcla.

Divi Woo Checkout Payment module Background Image settings

Cómo añadir un vídeo de fondo
  • Haz clic en la cuarta pestaña (icono de vídeo).

  • Haz clic en + para abrir la biblioteca de medios y seleccionar o subir un vídeo.

  • Sube versiones mp4 y webm.

  • Ajusta ancho, alto y define si debe pausarse cuando otro vídeo se inicia o está fuera de vista.

Divi Woo Checkout Payment module Background Video settings

Cómo añadir un patrón de fondo
  • Haz clic en la quinta pestaña (icono de patrón).

  • Haz clic en Añadir patrón de fondo y elige tipo, color, tamaño, transformaciones, repetición y modo de mezcla.

Divi Woo Checkout Payment module Background Pattern settings

Cómo añadir una máscara de fondo
  • Haz clic en la sexta pestaña (icono de máscara).

  • Haz clic en Añadir máscara de fondo y elige tipo, color, transformaciones, proporción, tamaño y modo de mezcla.


Divi Woo Checkout Payment module Background Mask settings
Etiqueta administrativa

Aquí puedes cambiar el nombre interno del módulo para identificarlo fácilmente en el backend.


Divi Woo Checkout Payment module Admin Label settings

Pestaña Diseño

Aquí están los estilos y configuraciones visuales del módulo.


Divi Woo Checkout Payment module Design Tab settings

Texto

Define estilos de texto generales del módulo:

  • Alineación: izquierda, centrado, derecha o justificado.

  • Sombra de texto: aplica sombra a todo el texto del módulo.


Divi Woo Checkout Payment module Text settings

Texto del cuerpo

Establece estilos del texto principal y permite personalizar enlaces y listas:

  • Fuente, grosor, estilo (cursiva, mayúsculas, versalitas, subrayado, tachado)

  • Alineación: izquierda, centrado, derecha, justificado

  • Color, tamaño, espaciado entre letras, altura de línea

  • Sombra del texto: dirección, desenfoque y color

Divi Woo Checkout Payment module Body Text settings

Botones de opción
Aquí puedes personalizar los botones de opción.
  • Color de fondo del botón de opción: selecciona el color de fondo de los botones de opción desde la paleta de colores o usa el ícono del cuentagotas para elegir un nuevo color.

  • Color del texto del botón de opción: selecciona el color del texto desde la paleta de colores o usa el cuentagotas.

  • Margen del botón de opción: agrega márgenes escribiendo valores numéricos en las casillas. Los márgenes añaden espacio alrededor del elemento. Para bloquear los valores y que se mantengan iguales, haz clic en el ícono de cadena.

  • Relleno del botón de opción: agrega relleno escribiendo valores numéricos. El relleno agrega espacio dentro del contenedor del elemento. Para mantener los valores iguales, haz clic en el ícono de cadena.

  • Fuente del botón de opción: elige la fuente que deseas. Se selecciona una fuente por defecto, pero puedes cambiarla o subir una personalizada.

  • Grosor de la fuente del botón de opción: selecciona qué tan negrita será la fuente.

  • Estilo de fuente del botón de opción: elige entre los siguientes estilos:

    • Cursiva

    • Mayúsculas

    • Versalitas

    • Subrayado

    • Tachado

  • Alineación del texto del botón de opción:

    • Izquierda

    • Centrado

    • Derecha

    • Justificado

  • Tamaño del texto del botón de opción: ajusta el tamaño arrastrando el control deslizante o escribiendo un valor numérico.

  • Espaciado entre letras del botón de opción: ajusta el espaciado entre letras. A mayor valor, más espacio.

  • Altura de línea del botón de opción: ajusta la distancia entre líneas de texto. A mayor valor, más espacio entre líneas.

  • Sombra de texto del botón de opción: agrega sombra. Puedes configurar la dirección (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

  • Esquinas redondeadas del botón de opción: escribe un valor numérico para redondear las esquinas. A mayor valor, más redondeadas serán. Los valores están enlazados por defecto. Haz clic en el ícono de cadena para separarlos.

  • Estilos de borde del botón de opción: agrega bordes a todos los lados o a lados individuales (superior, derecho, inferior, izquierdo).

  • Ancho del borde del botón de opción: define el ancho. Para un borde más grueso, aumenta el valor. Debe ser al menos 1px para mostrarse.

  • Color del borde del botón de opción: elige el color del borde desde la paleta o usa el cuentagotas.

  • Estilo de borde del botón de opción: elige entre sólido, discontinuo, punteado, doble, canal, cresta, empotrado, resaltado o ninguno.

  • Sombra de caja del botón de opción: elige un estilo de sombra. Por defecto, no se aplica ninguna.

Divi Woo Checkout Payment module Radio Buttons settings

Tamaño
  • Ancho: define el ancho del módulo.

  • Ancho máximo: define el ancho máximo del módulo.

  • Alineación del módulo: si se define un ancho o ancho máximo, puedes alinear el módulo a:

    • Izquierda

    • Centro

    • Derecha

  • Altura mínima: define la altura mínima del módulo.

  • Altura: define la altura total del módulo.

  • Altura máxima: define la altura máxima que puede tener el módulo.

Divi Woo Checkout Payment module Sizing settings

Espaciado
Puedes agregar márgenes o relleno escribiendo valores numéricos.
  • Margen: añade espacio fuera del módulo.

  • Relleno: añade espacio dentro del módulo.
    Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que deseas mantener iguales (por ejemplo, superior e inferior).
    Los valores predeterminados para margen y relleno son 0.

Divi Woo Checkout Payment module Spacing settings

Borde
Agrega un borde al módulo completo o a un lado individual.
  • Esquinas redondeadas: escribe un valor numérico para redondear las esquinas. A mayor valor, más redondeo. Los valores están enlazados por defecto. Haz clic en el ícono de cadena para desenlazarlos.

  • Estilos de borde: puedes agregar borde a todos los lados o individualmente.

  • Ancho del borde: ajusta el ancho con el control deslizante.

  • Color del borde: selecciona desde la paleta o usa el cuentagotas.

  • Estilo del borde: elige entre sólido, discontinuo, punteado, doble, canal, cresta, empotrado, resaltado o ninguno.

Divi Woo Checkout Payment module Border settings

Sombra de caja
Agrega una sombra a todo el módulo. Una vez seleccionada, puedes personalizar:
  • Posición horizontal: define la posición horizontal de la sombra.

  • Posición vertical: define la posición vertical de la sombra.

  • Intensidad del desenfoque: entre mayor valor, mayor desenfoque y más suave la sombra.

  • Intensidad del esparcimiento: entre mayor valor, mayor densidad e intensidad de la sombra.

  • Color de la sombra: define el color de la sombra.

  • Posición de la sombra: puede estar dentro o fuera del módulo.

Divi Woo Checkout Payment module Box Shadow settings

Filtros
Ajusta los siguientes filtros del módulo:
  • Matiz: ángulo del matiz de color.

  • Saturación: intensidad del color.

  • Brillo: qué tan brillantes son los colores.

  • Contraste: qué tan marcadas son las áreas claras y oscuras.

  • Invertir: invierte el matiz, saturación y brillo.

  • Sepia: da un tono cálido y marrón.

  • Opacidad: define qué tan transparente u opaco es el fondo.

  • Desenfoque: define la cantidad de desenfoque aplicado.

  • Modo de fusión: cómo se mezcla el módulo con las capas debajo. Por defecto es normal.

Divi Woo Checkout Payment module Filters settings

Transformar
  • Escalar

  • Trasladar

  • Rotar

  • Inclinar (Skew)

  • Puntos de origen

Puedes acceder a cada opción mediante pestañas. Configura cada una escribiendo valores numéricos o arrastrando los controles.
Haz clic en el ícono de cadena para mantener los valores sincronizados.

Divi Woo Checkout Payment module Transform settings

Animación
Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar:
  • Duración de la animación: cuánto tarda en completarse.

  • Retardo de la animación: cuánto tiempo esperar antes de iniciar.

  • Opacidad inicial: valor inicial de opacidad.

  • Curva de velocidad de la animación: define el tipo de movimiento (aceleración/desaceleración).

  • Repetición de la animación: por defecto solo se ejecuta una vez. Si deseas que se repita, selecciona la opción de bucle.

Divi Woo Checkout Payment module Animation settings

Pestaña Avanzado

Dentro de la pestaña Avanzado, encontrarás opciones que los diseñadores web más experimentados pueden encontrar útiles, como el uso de hojas de estilo personalizadas.

Aquí puedes aplicar hojas de estilo personalizadas a tu módulo. También puedes aplicar clases e identificadores personalizados al módulo, que pueden utilizarse para personalizar los estilos del módulo con propiedades más avanzadas o para aplicar código personalizado mediante la clase del módulo.

Divi Woo Checkout Payment module Advanced Tab settings


ID CSS y Clases
Asigna un identificador o clase específica a este módulo. Esto es útil cuando se aplica código personalizado a un módulo utilizando la hoja de estilos del tema hijo.

Divi Woo Checkout Payment module CSS ID and Classes settings


CSS Personalizado

  • Código Libre – Escribe código libre utilizando el selector de palabras clave para apuntar a este módulo. Ejemplo: selector h1 {color: red;}

  • Elementos del Módulo – También puedes aplicar código personalizado pegándolo en esta pestaña. Al hacer clic en la pestaña de Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades personalizadas.

Divi Woo Checkout Payment module Custom CSS settings


Condiciones
Las condiciones de visualización permiten elegir cuándo mostrar este módulo según un conjunto de reglas, como por ejemplo si el usuario ya ha comprado antes, qué navegador está utilizando, qué sistema operativo tiene, y más.

Puedes añadir una o múltiples condiciones.

Divi Woo Checkout Payment module Display Conditions settings


Visibilidad

  • Desactivar en – Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo) cuando la ventana de visualización sea Teléfono, Tableta o Escritorio haciendo clic en la casilla correspondiente.

  • Desbordamiento Horizontal – Define qué se muestra cuando el contenido se desborda a los bordes izquierdo y derecho de un elemento de bloque. Puede ser:

    • Visible – El contenido se mostrará si desborda.

    • Desplazar – Aparece una barra de desplazamiento horizontal.

    • Oculto – La parte que se desborda se oculta.

    • Automático – El navegador decide si muestra barra de desplazamiento.

  • Desbordamiento Vertical – Define qué se muestra cuando el contenido se desborda hacia arriba o abajo. Puede ser:

    • Visible – El contenido se mostrará si desborda.

    • Desplazar – Aparece una barra de desplazamiento vertical.

    • Oculto – La parte que se desborda se oculta.

    • Automático – El navegador decide si muestra barra de desplazamiento.

Divi Woo Checkout Payment module Visbility settings


Transiciones
Esto controla la duración, el retardo y la curva de velocidad de la animación al pasar el cursor.

  • Duración de la Transición – Define la duración (en milisegundos) de la animación.

  • Retardo de la Transición – Define cuánto tarda en comenzar la animación después de pasar el cursor.

  • Curva de Velocidad de la Transición – Define la velocidad de inicio y fin de la animación.

Divi Woo Checkout Payment module Transitions settings


Posición
Define la posición del módulo:

  • Relativa (valor predeterminado) – El módulo se posiciona según el flujo normal del documento. Los valores de desplazamiento vertical u horizontal no afectan a otros elementos.

  • Absoluta – El módulo se elimina del flujo del documento y se posiciona en relación con su contenedor más cercano.

  • Fija – El módulo se posiciona en relación con la ventana del navegador. Ideal para módulos que permanecen visibles mientras se desplaza.

  • Desplazamiento Vertical – Define la posición vertical del módulo.

  • Desplazamiento Horizontal – Define la posición horizontal del módulo.

  • Índice Z – Define el orden del módulo en la capa de diseño. Módulos con un número más alto se superponen sobre los de menor valor.

Divi Woo Checkout Payment module Position settings


Efectos de Desplazamiento
Esta sección define el comportamiento del módulo cuando el usuario se desplaza por la página. Puedes hacer que el módulo se mantenga fijo arriba, abajo o en ambas posiciones, y decidir si debe transformarse al hacer scroll.

También puedes activar movimiento vertical, lo que permite ajustar la velocidad de desplazamiento del elemento sin afectar los elementos circundantes.

La función de activación del efecto de desplazamiento te permite elegir cuándo se activa: cuando la parte superior, media o inferior del módulo está visible.

Divi Woo Checkout Payment module Scroll Effects settings


Guardar y Salir

Una vez que termines de diseñar y configurar el módulo contador numérico, haz clic en la flecha verde en la esquina inferior derecha para guardar tu diseño. Si cierras sin guardar, se perderán los cambios.

Guardar el Diseño de la Página

Para guardar el diseño de la página, puedes presionar CMD + S en Mac o CTRL + S en PC. También puedes usar la barra inferior de Divi haciendo clic en el icono púrpura circular con tres puntos para expandir la barra y luego hacer clic en el botón verde de Guardar en la esquina inferior derecha.

Salir del Constructor Visual

Una vez guardados todos los cambios, haz clic en "Salir del Constructor Visual" en la barra de herramientas del administrador superior para salir del modo de edición.

Más Recursos para el Módulo de Pago de Divi Woo Checkout

  • Cómo instalar WooCommerce y configurar tu tienda

  • Cómo configurar las opciones de WooCommerce

  • 5 ideas de personalización para comercio electrónico en WooCommerce

  • Optimización del rendimiento en WooCommerce: 14 consejos y mejores prácticas

  • Guía sencilla de las páginas predeterminadas de WooCommerce

  • Actualizar WooCommerce: mejores prácticas a seguir siempre


Sigue Aprendiendo

Mantente actualizado con nuestros últimos tutoriales del módulo de pago de Divi Woo Checkout visitando nuestra página dedicada.


    • Popular Articles

    • Guía de Negocio para Resellers y Partners

      En esta Guía de Negocio vamos a analizar los 8 puntos más importantes a tener en cuenta si te estás planteando lanzar tu Propio Negocio de Apps: ¿Cuánto puedes ganar con un Negocio de Apps? Demo de Scoreapps: Cómo crear Apps y Monetizarlas ¿Qué ...
    • Ver una Demo de Scoreapps para Resellers

      En este vídeo te explicamos el modelo de negocio, los tipos de Apps que puedes crear y las distintas herramientas que incluye Scoreapps en su Plan de Resellers: Y en este otro vídeo te enseñamos cómo funciona el software por dentro:
    • Proporciona acceso a tus Aplicaciones

      Con el Plan Reseller o Plan Partner puedes otorgar fácilmente a tus clientes o colaboradores acceso a tus aplicaciones. Accede a tu Panel de Apps, y después accede a cualquier Aplicación: Una vez dentro del constructor de Apps, ve a Mi Cuenta - ...
    • Cómo Crear una App de Tienda

      El comercio electrónico desde dispositivos móviles se disparó desde comienzos de 2020 debido a la Pandemia del Covid19 y sigue creciendo a tasas del 45% anual. Hoy en día, contar con una App de Tienda resulta imprescindible para cualquier negocio de ...
    • Cómo diseñar la pantalla de inicio o portada de una App

      En el video que te mostramos a continuación te explicamos cómo diseñar la pantalla de inicio de una App:
    • Related Articles

    • El Módulo de Facturación en el Pago de Divi Woo

      Cómo agregar, configurar y personalizar el módulo de facturación en el pago de Divi Woo. El Módulo de Facturación en el Checkout de Divi Woo se integra perfectamente con WooCommerce en tu sitio web de WordPress y captura los datos de facturación de ...
    • Uso de las Opciones de Sombra de Caja en Divi

      Las opciones de sombra de caja en Divi te permiten darle a cualquier elemento de la página la ilusión de profundidad. Las sombras proyectadas son una forma creativa de dar vida a los elementos de diseño de tu sitio web. Pueden resaltar elementos e ...
    • El módulo de suscripción por correo electrónico de Divi

      Cómo agregar, configurar y personalizar el módulo de suscripción por correo electrónico de Divi <br> El módulo de suscripción por correo electrónico de Divi simplifica el proceso de aumentar tus suscriptores de correo electrónico al ...
    • El Módulo de Información de Pago de Divi Woo

      Cómo agregar, configurar y personalizar el módulo de Información de Pago de Divi Woo. El Módulo de Información de Pago de Divi Woo se integra perfectamente con WooCommerce. Puede añadirse al diseño o plantilla de tu página de pago Woo para que los ...
    • El Módulo Detalles de Pago de Divi Woo

      Cómo agregar, configurar y personalizar el módulo Detalles de Pago de Divi Woo. El Módulo de Detalles de Pago Divi Woo El módulo Detalles de Pago Divi Woo se integra con las funcionalidades de WooCommerce y muestra los detalles del carrito. Este ...