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.
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.
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.
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
Aquí se definen las opciones de contenido del módulo.
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.
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.
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.
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.
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.
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.
Aquí puedes cambiar el nombre interno del módulo para identificarlo fácilmente en el backend.
Aquí están los estilos y configuraciones visuales del módulo.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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