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 clientes puedan agregar notas a sus pedidos al finalizar la compra.
Ve a Escritorio de WordPress → Plugins → Añadir Nuevo Plugin.
Usa el campo de búsqueda (esquina superior derecha) y busca WooCommerce.
Haz clic en el botón Instalar ahora.
Haz clic en el botón Activar.
Haz clic en el ícono verde + para insertar una Fila y selecciona la estructura de columnas deseada.
Haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos de Divi, que contiene todos los módulos incluidos con el tema Divi.
Haz clic en Módulos Woo para ver todos los módulos Divi Woo.
Haz clic en el módulo Información de Pago Woo para agregarlo a tu página.
Una vez agregado, aparecerá automáticamente la ventana modal de Configuración del módulo. Aquí es donde se configuran el contenido y los estilos de diseño de este módulo.
Estos ajustes están organizados en tres grupos mediante las pestañas en la parte superior del módulo:
Contenido
Diseño
Avanzado
Dentro de esta pestaña encontrarás las opciones de contenido disponibles para este módulo.
Aquí puedes elegir qué información del producto se muestra.
Mostrar Título – Activa o desactiva esta opción para mostrar u ocultar el título de Información Adicional.
En el grupo de opciones Fondo, se pueden configurar las siguientes opciones:
Color de fondo
Degradado de fondo
Imagen de fondo
Video de fondo
Patrón de fondo
Máscara de fondo
Haz clic en la primera pestaña, el ícono del balde de pintura.
Haz clic en Añadir color de fondo y elige un color de la paleta de colores de tu sitio, o usa el ícono cuentagotas para encontrar un nuevo color.
Haz clic en la segunda pestaña, el ícono de degradado.
Haz clic en Añadir degradado de fondo.
Para cambiar los colores del degradado, haz clic en los puntos del degradado y selecciona un color de la paleta o usa el cuentagotas. Puedes agregar más colores haciendo clic en cualquier parte de la barra deslizante.
Opciones de degradado de fondo:
Tipo de degradado – Cambia el tipo de degradado desde el menú desplegable.
Dirección del degradado – Cambia la dirección arrastrando la barra deslizante o escribiendo un valor numérico.
Repetir degradado – Activa para que el degradado se repita.
Unidad del degradado – Cambia cómo se calculan los puntos del degradado.
Colocar degradado sobre la imagen de fondo – Si hay una imagen de fondo, activa esta opción para colocar el degradado encima.
Haz clic en la tercera pestaña, el ícono de imagen.
Haz clic en el ícono gris + para abrir la Biblioteca de medios y seleccionar una imagen ya subida o subir una nueva.
Opciones de imagen de fondo:
Usar efecto parallax – Activa para aplicar un efecto parallax donde la imagen se desplaza más rápido que el contenido frontal, dando un efecto 3D. Por defecto está desactivado.
Tamaño de la imagen de fondo – Elige el tamaño desde el menú desplegable.
Posición de la imagen de fondo – Elige la posición desde el menú desplegable.
Repetición de la imagen de fondo – Decide si y cómo se repite la imagen.
Mezcla de imagen de fondo – Define cómo se mezcla la imagen con otras capas.
Haz clic en la cuarta pestaña, el ícono de video.
Haz clic en el ícono gris + para abrir la Biblioteca de medios y seleccionar un video ya subido o subir uno nuevo.
Opciones de video de fondo:
mp4 vs Webm – Se recomienda subir versiones mp4 y webm para asegurar compatibilidad con todos los navegadores.
Ancho del video de fondo – Escribe un valor numérico.
Alto del video de fondo – Escribe un valor numérico.
Pausar video cuando otro video se reproduzca – Activa para pausar el video de fondo si otro video está reproduciéndose. Por defecto, el video se pausa cuando no está visible. Desactiva para que siga reproduciéndose.
Haz clic en la quinta pestaña, el ícono de patrón.
Haz clic en Añadir patrón de fondo.
Elige el tipo de patrón desde el menú desplegable.
Opciones de patrón de fondo:
Color del patrón – Elige un color de la paleta o usa el cuentagotas.
Transformar patrón – Transformar horizontal o verticalmente, rotar o invertir.
Tamaño del patrón – Selecciona tamaño real, cubrir, ajustar, estirar o tamaño personalizado. Si eliges personalizado, aparecerán opciones para ancho y alto.
Origen de repetición – Selecciona el punto desde donde se repite el patrón.
Desplazamiento horizontal y vertical – Ajusta el desplazamiento horizontal y vertical del patrón.
Repetición del patrón – Define cómo se repite horizontal, verticalmente, etc.
Modo de mezcla del patrón – Define cómo interactúa el patrón con capas debajo. Hay 16 modos disponibles.
Haz clic en la sexta pestaña, el ícono de máscara.
Haz clic en Añadir máscara de fondo.
Selecciona el tipo de máscara desde el menú desplegable.
Opciones de máscara de fondo:
Color de máscara – Elige un color o usa el cuentagotas.
Transformar máscara – Transformar horizontal o verticalmente, rotar o invertir.
Relación de aspecto – Define la proporción entre ancho y alto de la máscara.
Tamaño de máscara – Selecciona tamaño real, cubrir, ajustar, estirar o personalizado. Si eliges personalizado, podrás definir ancho y alto.
Modo de mezcla de máscara – Define cómo interactúa la máscara con capas debajo. Hay 16 modos disponibles.
La Etiqueta Administrativa es donde puedes ponerle un nombre al módulo visible solo para ti, para ayudarte a mantener el orden y facilitar la comprensión en el backend. Por defecto, la etiqueta administrativa es el nombre del módulo, pero puedes cambiarla a lo que prefieras.
Aquí encontrarás todos los estilos y configuraciones de diseño para este módulo.
Puedes aplicar estilos y configuraciones únicas al texto del título aquí.
Fuente del título – Elige la fuente para el texto del título. La fuente predeterminada está seleccionada automáticamente, pero puedes elegir otra o subir una fuente personalizada.
Grosor de fuente del título – Selecciona el grosor de la fuente.
Estilo de fuente del título – Elige el estilo del texto del título:
Cursiva
Mayúsculas
Versalitas
Subrayado
Tachado
Alineación del texto del título – Elige la alineación para el texto del título:
Izquierda
Centrado
Derecha
Justificado
Color del texto del título – Elige un color específico para el texto del título desde la paleta o con el cuentagotas.
Tamaño del texto del título – Ajusta el tamaño arrastrando la barra o escribiendo un valor numérico.
Espaciado entre letras del título – Ajusta el espacio entre letras arrastrando la barra o escribiendo un valor numérico.
Altura de línea del título – Ajusta el espacio entre líneas arrastrando la barra o escribiendo un valor numérico.
Sombra del texto del título – Añade una sombra al texto del título. Después de elegir un estilo, puedes configurar la dirección (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.
Alineación de texto - Elige la alineación del texto:
Izquierda
Centrado
Derecha
Justificado
Sombra de texto - Aplica una sombra paralela a todo el texto dentro de este módulo. Cuando se selecciona un tipo de sombra, se aplicará a todo el contenido de texto del módulo.
Puedes aplicar estilos y configuraciones de diseño únicos al texto de la etiqueta del campo.
Posición de la etiqueta de campo - Elige cómo quieres que se posicione la etiqueta: en línea (una al lado de la otra en una línea) o apilada (verticalmente una encima de otra).
Fuente de la etiqueta de campo - Elige la fuente que quieres para el texto de la etiqueta. La fuente predeterminada se selecciona automáticamente; sin embargo, puedes elegir una fuente diferente o subir una fuente personalizada haciendo clic en el menú desplegable.
Peso de fuente de la etiqueta de campo - Selecciona el grosor de la fuente del texto de la etiqueta.
Estilo de fuente de la etiqueta de campo - Elige el estilo de la fuente del texto de la etiqueta:
Cursiva
Mayúsculas
Versalitas
Subrayado
Tachado
Alineación del texto de la etiqueta de campo - Elige la alineación específica para el texto de la etiqueta:
Izquierda
Centrado
Derecha
Justificado
Color del texto de la etiqueta de campo - Elige un color específico para el texto de la etiqueta. Selecciona desde la paleta de colores de tu sitio o haz clic en el icono del cuentagotas para encontrar un color nuevo.
Tamaño del texto de la etiqueta de campo - Elige el tamaño de fuente del texto de la etiqueta arrastrando el control deslizante o escribiendo un valor numérico.
Espaciado entre letras de la etiqueta de campo - Elige el espacio entre letras del texto de la etiqueta arrastrando el control o escribiendo un valor numérico. El espaciado es el espacio entre cada letra; a mayor número, más espacio.
Altura de línea de la etiqueta de campo - Elige la altura de línea del texto de la etiqueta arrastrando el control o escribiendo un valor numérico. La altura de línea es el espacio entre cada línea de texto; a mayor número, más espacio.
Sombra de texto de la etiqueta de campo - Añade una sombra paralela al texto de la etiqueta. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la fuerza del desenfoque y el color de la sombra.
Aquí puedes diseñar el aspecto y la sensación de los campos.
Color del texto marcador de posición - Elige un color para el texto de marcador de posición desde la paleta o usa el cuentagotas para un color nuevo.
Color de fondo de los campos - Elige un color de fondo para los campos. Selecciona de la paleta o usa el cuentagotas para uno nuevo.
Color del texto de los campos - Elige el color del texto dentro de los campos. Selecciona de la paleta o usa el cuentagotas para uno nuevo.
Color de fondo del campo enfocado - Elige un color de fondo para cuando un campo está enfocado (por ejemplo, al hacer clic y empezar a escribir). Selecciona de la paleta o usa el cuentagotas para uno nuevo.
Color del texto del campo enfocado - Elige el color del texto cuando el campo está enfocado. Selecciona de la paleta o usa el cuentagotas para uno nuevo.
Margen de los campos - Los márgenes añaden espacio alrededor del elemento. Para agregar espacio alrededor de los campos, escribe un valor numérico o usa las flechas para aumentar o disminuir el margen.
Relleno de los campos - El relleno añade espacio dentro del elemento. Para agregar espacio dentro de los campos, escribe un valor numérico o usa las flechas para aumentar o disminuir el relleno.
Fuente de los campos - Elige la fuente para el texto. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra o subir una fuente personalizada.
Peso de fuente de los campos - Selecciona el grosor de la fuente del texto del campo.
Estilo de fuente de los campos - Elige el estilo de fuente del texto del campo:
Cursiva
Mayúsculas
Versalitas
Subrayado
Tachado
Alineación del texto de los campos - Elige la alineación específica para el texto de los campos:
Izquierda
Centrado
Derecha
Justificado
Tamaño del texto de los campos - Elige el tamaño de fuente del texto de los campos arrastrando el control o escribiendo un valor numérico.
Espaciado entre letras de los campos - Elige el espacio entre letras del texto de los campos arrastrando el control o escribiendo un valor numérico.
Altura de línea de los campos - Elige la altura de línea del texto de los campos arrastrando el control o escribiendo un valor numérico.
Sombra de texto de los campos - Añade una sombra paralela al texto de los campos. Puedes configurar dirección, fuerza y color.
Esquinas redondeadas de los campos - Para redondear las esquinas, escribe un valor numérico. A mayor número, más redondeadas. Los valores están vinculados (cadena azul); para valores independientes, haz clic en la cadena para desvincular.
Estilos de borde de los campos - Añade borde a todos o a lados específicos (arriba, derecha, abajo, izquierda).
Ancho del borde de los campos - Establece el grosor del borde. Debe ser al menos 1px para mostrarse.
Color del borde de los campos - Elige el color del borde desde la paleta o con el cuentagotas.
Estilo de borde de los campos - Elige el estilo: sólido, punteado, rayado, doble, relieve, etc.
Usar bordes en foco - Activa esta opción para mostrar estilos de borde cuando el campo esté enfocado.
Esquinas redondeadas en foco - Igual que las esquinas normales, para campos enfocados.
Estilos de borde en foco - Añade borde para campos enfocados.
Ancho de borde en foco - Define el grosor del borde en campos enfocados.
Color de borde en foco - Elige color del borde para campos enfocados.
Estilo de borde en foco - Selecciona estilo del borde para campos enfocados.
Sombra de caja de los campos - Elige la sombra que quieres para los campos. Por defecto no tiene sombra.
Ancho - Define el ancho del módulo. Para más información, consulta la documentación oficial.
Ancho máximo - Define el ancho máximo del módulo.
Alineación del módulo - Si el ancho o ancho máximo están definidos, el módulo puede alinearse:
A la izquierda
Centrado
A la derecha
Altura mínima - Define la altura mínima del módulo.
Altura - Define la altura del módulo.
Altura máxima - Define la altura máxima del módulo.
Puedes agregar márgenes o rellenos escribiendo valores numéricos.
El margen agrega espacio fuera del módulo; el relleno, espacio dentro.
Para bloquear proporciones y mantener valores iguales, haz clic en el icono de cadena entre los valores que quieres que sean idénticos (ej. arriba y abajo).
Valores predeterminados de margen: 0
Valores predeterminados de relleno: 0
Añade un borde al módulo completo o a un solo lado. Ajusta ancho con el control y selecciona color y estilo desde el menú.
Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas. Valores vinculados por defecto, desvincúlalos si quieres diferentes valores.
Estilos de borde – Añade borde a todos o a lados específicos.
Ancho del borde - Ajusta grosor del borde.
Color del borde – Elige color desde la paleta o con cuentagotas.
Estilo del borde – Selecciona estilo: sólido, punteado, doble, etc.
Añade sombra paralela a todo el módulo. Al seleccionar estilo, puedes configurar:
Posición horizontal
Posición vertical
Fuerza del desenfoque
Extensión del desenfoque
Color de la sombra
Posición (dentro o fuera del módulo)
Ajusta filtros del módulo:
Matiz
Saturación
Brillo
Contraste
Invertir
Sepia
Opacidad
Desenfoque
El modo de mezcla define cómo se combina el módulo con las capas debajo. Por defecto, normal.
Opciones para:
Escalar
Trasladar
Rotar
Sesgar
Punto de origen
Navega entre opciones y configura valores numéricos o arrastrando.
Puedes bloquear valores para que sean iguales con el icono de cadena.
Aplica animación al módulo. Al elegir un estilo, ajusta:
Duración de la animación
Retardo antes de iniciar
Opacidad inicial
Curva de velocidad (suavizado)
Repetición (por defecto solo una vez; puedes activar repetición continua)
Aquí, puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS personalizados al módulo, los cuales pueden usarse para personalizar los estilos del módulo con propiedades CSS más avanzadas o para aplicar código CSS personalizado usando la clase CSS del módulo.
ID y Clases CSS
Asigna un ID CSS o una Clase específica a este módulo. Esto es útil al aplicar CSS personalizado a un módulo usando la hoja de estilos de tu tema hijo.
CSS Personalizado
CSS Libre - Escribe CSS libre usando el selector keyword para apuntar a este módulo. Ejemplo: selector h1 {color: rojo;}
Elementos del Módulo - También puedes aplicar CSS personalizado a este módulo pegándolo en esta pestaña. Cuando haces clic en la pestaña Elementos del Módulo, verás secciones individuales donde puedes añadir propiedades CSS personalizadas.
Condiciones
Las Condiciones de Visualización te permiten elegir cuándo mostrar este módulo basándote en un conjunto de condiciones, como cuando un usuario visita la página, si ya ha comprado anteriormente en tu empresa, qué navegador usa, qué sistema operativo usa, y más.
Puedes añadir una condición o múltiples condiciones.
Visibilidad
Desactivar en - Define la visibilidad del módulo. Puedes desactivarlo (ocultarlo de la vista) cuando la ventana de visualización sea Teléfono, Tableta o Escritorio marcando la casilla correspondiente.
Desbordamiento Horizontal - Define qué mostrar cuando el contenido desborda los bordes izquierdo y derecho de un elemento de nivel bloque. Esto puede ser:
Visible - El contenido se mostrará si el contenido del módulo desborda su altura.
Desplazar (Scroll) - Si el contenido del módulo desborda su altura, se usará una barra de desplazamiento vertical para recorrer el contenido.
Oculto - Si el contenido del módulo desborda su altura, la parte que desborda será oculta.
Automático - El navegador decidirá si se muestra una barra de desplazamiento.
Desbordamiento Vertical - Define qué mostrar cuando el contenido desborda los bordes superior e inferior de un elemento de nivel bloque. Esto puede ser:
Visible - El contenido se mostrará si el contenido del módulo desborda su altura.
Desplazar (Scroll) - Si el contenido del módulo desborda su altura, se usará una barra de desplazamiento vertical para recorrer el contenido.
Oculto - Si el contenido del módulo desborda su altura, la parte que desborda será oculta.
Automático - El navegador decidirá si se muestra una barra de desplazamiento.
Transiciones
Controla la duración, retraso y curva de velocidad de la transición de la animación hover.
Duración de la transición - Define la duración (en milisegundos) de la transición de la animación hover.
Retraso de la transición - Define el retraso de la transición de la animación hover (en milisegundos).
Curva de velocidad de la transición - Define la curva de velocidad de la transición de la animación hover.
Relativa (valor por defecto) - El módulo se posiciona según el flujo normal del documento, y los valores de desplazamiento son relativos a sí mismo según los valores de Desplazamiento Vertical y Desplazamiento Horizontal. El desplazamiento no afecta la posición de otros elementos; por lo tanto, el espacio reservado para el módulo en el diseño de página es el mismo que si la posición fuera estática.
Absoluta - El módulo se elimina del flujo normal del documento y no crea espacio para el elemento en el diseño. Se posiciona respecto a su ancestro más cercano posicionado (si existe) o el bloque contenedor inicial. Las opciones de ubicación determinan su posición final.
Fija - El elemento se elimina del flujo normal del documento y no crea espacio en el diseño. Se posiciona según las opciones de ubicación en relación con la ventana del navegador. Esto se puede usar para crear un módulo pegajoso (sticky).
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 el diseño. Los módulos con un índice z más alto se superponen a los de índice más bajo.
Además, puedes activar movimiento vertical en este módulo, lo que permite ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos circundantes.
La función de Activador de Efecto de Movimiento te permite elegir cuándo se activa el efecto de desplazamiento que aplicaste. Puedes activar el efecto cuando la parte superior, media o inferior del elemento esté visible.
Cómo instalar WooCommerce y configurar tu tienda
Cómo configurar los ajustes de WooCommerce
5 ideas de personalización para WooCommerce
Optimización de rendimiento de WooCommerce: 14 consejos y mejores prácticas
Guía simple para las páginas predeterminadas de WooCommerce
Actualización de WooCommerce: mejores prácticas para seguir siempre