Cómo agregar, configurar y personalizar el módulo de avisos de WooCommerce de Divi.
Cuando un cliente añade un producto a su carrito, el Módulo de Aviso Woo de Divi muestra una notificación indicando que el producto ha sido agregado a su carrito.
En esta documentación, te mostraremos cómo añadir el módulo de aviso Woo de Divi a la plantilla de tu página de producto para que puedas agregar este aviso a cualquier página con un producto.
Ejemplo del Módulo de Aviso Woo de Divi
Ve al Panel 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.
Agregar el Módulo de Aviso Woo
Haz clic en el icono verde + para insertar una Fila y selecciona la estructura de columnas que deseas.
Haz clic en el icono 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 Woo de Divi.
Haz clic en el módulo Aviso Woo para añadirlo a tu página.
Estas configuraciones están organizadas 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 el Módulo de Aviso Woo de Divi.
Tipo de Página – Selecciona el tipo de página en la que estás colocando este módulo:
Página de producto
Página de carrito
Página de pago
Producto – Esta configuración te permite especificar a qué producto se relaciona el módulo al mostrar el mensaje de aviso. Por defecto, está configurado en Este Producto. Para nuestros propósitos, dejaremos esta configuración en Este Producto para que muestre dinámicamente el título del producto que fue añadido al carrito.
En el grupo de opciones Fondo, puedes configurar lo siguiente:
Color de Fondo
Degradado de Fondo
Imagen de Fondo
Video 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, el icono de Cubo 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 icono cuentagotas para encontrar un color nuevo.
Haz clic en la segunda pestaña, el icono de Degradado.
Haz clic en Añadir Degradado de Fondo.
Para cambiar los colores del degradado, haz clic en los puntos de parada del degradado y selecciona un color de la paleta de tu sitio o usa el cuentagotas para elegir un color nuevo. Los puntos de parada permiten agregar más colores al degradado. Haz clic en cualquier lugar del deslizador para añadir un nuevo punto.
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 el deslizador o ingresando un valor numérico.
Repetir Degradado – Activa esta opción para que el degradado se repita.
Unidad de Degradado – Cambia cómo se calculan los puntos de parada del degradado.
Colocar Degradado sobre Imagen de Fondo – Si hay una imagen de fondo aplicada, activa esta opción para colocar el degradado sobre la imagen.
Haz clic en la tercera pestaña, el icono de Imagen.
Haz clic en el icono gris + para abrir la Biblioteca de Medios y seleccionar o subir una imagen.
Opciones de Imagen de Fondo:
Usar efecto Parallax – Activa para aplicar un efecto parallax (la imagen se mueve más rápido que el contenido frontal, dando una ilusión 3D). Por defecto está desactivado.
Tamaño de Imagen de Fondo – Selecciona el tamaño desde el menú desplegable.
Posición de Imagen de Fondo – Selecciona la posición desde el menú desplegable.
Repetición de Imagen de Fondo – Elige si y cómo se repite la imagen.
Mezcla de Imagen de Fondo – Selecciona cómo se mezcla la imagen con otras capas en el módulo.
Haz clic en la cuarta pestaña, el icono de Video.
Haz clic en el icono gris + para abrir la Biblioteca de Medios y seleccionar o subir un video.
Opciones de Video de Fondo:
Mp4 vs WebM – Recomendamos subir ambas versiones para asegurar compatibilidad con todos los navegadores.
Ancho de Video de Fondo – Define el ancho con un valor numérico.
Alto de Video de Fondo – Define la altura con un valor numérico.
Pausar video cuando otro video se reproduce – Activa para pausar el video de fondo cuando otro video esté reproduciéndose. Por defecto, el video se pausa cuando no está visible.
Haz clic en la quinta pestaña, el icono 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 de Patrón – Selecciona el color del patrón o usa el cuentagotas para elegir uno nuevo.
Transformar Patrón – Transforma el patrón horizontal o verticalmente, rota o invierte.
Tamaño del Patrón – Elige el tamaño (real, cubrir, ajustar, estirar o personalizado). Si eliges personalizado, puedes definir ancho y alto con valores numéricos.
Origen de Repetición del Patrón – Selecciona el origen desde donde se repite el patrón.
Desplazamiento Horizontal y Vertical del Patrón – Ajusta el desplazamiento horizontal y vertical.
Repetición del Patrón – Elige cómo se repite el patrón (horizontal, vertical, etc.).
Modo de Mezcla del Patrón – Define cómo interactúa el patrón con las capas inferiores. Hay 16 modos de mezcla.
Cómo añadir una Máscara de Fondo
Haz clic en la sexta pestaña, el icono 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 – Selecciona un color o usa el cuentagotas para uno nuevo.
Transformar Máscara – Transforma la máscara horizontal o verticalmente, rota o invierte.
Relación de Aspecto de la Máscara – Define la proporción de ancho a alto.
Tamaño de la Máscara – Elige el tamaño (real, cubrir, ajustar, estirar o personalizado). Si es personalizado, define ancho y alto con valores numéricos.
Modo de Mezcla de la Máscara – Define cómo interactúa la máscara con las capas inferiores.
Aquí encontrarás todos los estilos y configuraciones de diseño para el Módulo de Aviso Woo de Divi.
Alineación de Texto – Elige la alineación:
Izquierda
Centro
Derecha
Justificado
Sombra de Texto – Aplica sombra a todo el texto dentro del módulo.
Fuente del Título – Elige la fuente para el texto del título. Por defecto se selecciona automáticamente, pero puedes elegir otra o subir una personalizada desde el menú desplegable.
Grosor de la Fuente del Título – Selecciona el grosor de la fuente desde el menú desplegable.
Estilo de la Fuente del Título – Elige el estilo de fuente:
Cursiva
Mayúsculas
Versales
Subrayado
Tachado
Alineación del Texto del Título – Elige la alineación solo para el título:
Izquierda
Centro
Derecha
Justificado
Color del Texto del Título – Elige un color específico para el título desde la paleta del sitio o con el cuentagotas.
Tamaño del Texto del Título – Ajusta el tamaño con el deslizador o escribiendo un valor numérico.
Espaciado entre Letras del Título – Ajusta el espacio entre letras con el deslizador o valor numérico. Entre más alto el número, mayor espacio.
Altura de Línea del Título – Ajusta el espacio entre líneas con el deslizador o valor numérico. Más alto el número, más espacio.
Sombra del Texto del Título – Añade sombra al texto del título. Puedes configurar la dirección (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.
Fuente de Error – Elige la fuente que quieres usar para el texto de error. 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.
Grosor de Fuente de Error – Haz clic en el menú desplegable para seleccionar el grosor de la fuente del texto de error.
Estilo de Fuente de Error – Elige el estilo de la fuente del texto de error:
Cursiva
Mayúsculas
Versalitas
Subrayado
Tachado
Alineación de Texto de Error – Elige la alineación del texto específicamente para el texto de error:
Izquierda
Centro
Derecha
Justificado
Color de Texto de Error – Elige un color específico para el texto de error. Selecciona del paleta de colores de tu sitio o haz clic en el icono cuentagotas para encontrar un nuevo color.
Tamaño del Texto de Error – Elige el tamaño de fuente del texto de error arrastrando el control deslizante o escribiendo un valor numérico.
Espaciado entre Letras de Error – Elige el espacio entre letras del texto de error arrastrando el control deslizante o escribiendo un valor numérico. El espaciado es el espacio entre cada letra. A mayor número, mayor espacio.
Altura de Línea de Error – Elige la altura de línea del texto de error arrastrando el control deslizante 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 del Texto de Error – Añade una sombra al texto de error. Una vez seleccionado el estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.
Fuente del Cuerpo – Elige la fuente para el texto del cuerpo. 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.
Grosor de Fuente del Cuerpo – Elige el grosor de la fuente del texto del cuerpo.
Estilo de Fuente del Cuerpo – Elige el estilo de la fuente del texto del cuerpo:
Cursiva
Mayúsculas
Versalitas
Subrayado
Tachado
Alineación del Texto del Cuerpo – Elige la alineación del texto específicamente para el texto del cuerpo:
Izquierda
Centro
Derecha
Justificado
Color del Texto del Cuerpo – Elige un color específico para el texto del cuerpo. Selecciona del paleta de colores de tu sitio o haz clic en el cuentagotas para elegir un nuevo color.
Tamaño del Texto del Cuerpo – Elige el tamaño de fuente del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico.
Espaciado entre Letras del Cuerpo – Elige el espacio entre letras del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico. A mayor número, más espacio.
Altura de Línea del Cuerpo – Elige la altura de línea del texto del cuerpo arrastrando el control deslizante o escribiendo un valor numérico.
Sombra del Texto del Cuerpo – Añade una sombra al texto del cuerpo. Puedes configurar dirección, intensidad y color igual que en las sombras anteriores.
Usar Estilos Personalizados para el Botón – Por defecto, los botones se estilizan globalmente desde el Personalizador del Tema. Para aplicar estilos únicos a este botón, activa esta opción.
Tamaño del Texto del Botón – Elige el tamaño de fuente del texto del botón arrastrando el control deslizante o escribiendo un valor numérico.
Color del Texto del Botón – Elige un color específico para el texto del botón desde la paleta de tu sitio o con el cuentagotas.
Fondo del Botón – Estiliza el fondo del botón con color sólido, degradado o imagen. Elige color o sube imagen según las opciones:
Para fondo degradado, selecciona la pestaña de degradado y haz clic en Añadir Degradado.
Para fondo con imagen, selecciona la pestaña de imagen y haz clic en Añadir Imagen.
Ancho del Borde del Botón – Ajusta el grosor del borde con el control deslizante o valor numérico.
Color del Borde del Botón – Elige el color del borde desde la paleta o con el cuentagotas.
Radio del Borde del Botón – Determina qué tan redondeadas serán las esquinas; a mayor valor, más redondeadas.
Espaciado entre Letras del Botón – Espacio entre letras del texto del botón.
Fuente del Botón – Elige la fuente del texto del botón o sube una personalizada.
Grosor de Fuente del Botón – Selecciona el grosor de la fuente.
Estilo de Fuente del Botón – Elige entre cursiva, mayúsculas, versalitas, subrayado o tachado.
Mostrar Ícono en el Botón – Activa o desactiva el ícono del botón.
Ícono del Botón – Por defecto es “>”, pero puedes elegir otro.
Color del Ícono del Botón – Elige el color del ícono.
Posición del Ícono del Botón – Decide si el ícono está a la derecha o izquierda del texto.
Mostrar Ícono Sólo al Pasar el Cursor – Por defecto está activo, es decir, el ícono sólo aparece al pasar el cursor. Puedes desactivarlo para que siempre esté visible.
Alineación del Botón – Elige si el botón se alinea a la izquierda, centro o derecha.
Sombra del Texto del Botón – Añade sombra al texto del botón, con opciones de dirección, intensidad y color.
Margen del Botón – Añade espacio externo al botón. Puedes bloquear proporciones para que arriba y abajo sean iguales, por ejemplo.
Relleno del Botón – Añade espacio interno dentro del botón, con opción para bloquear proporciones.
Sombra del Botón – Añade sombra al botón completo. Puedes configurar posición horizontal y vertical, intensidad del desenfoque y expansión, así como color y posición dentro o fuera del contenedor.
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 ancho o ancho máximo, puedes alinear el módulo a la izquierda, centro o 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.
El margen añade espacio fuera del módulo y el relleno añade espacio dentro del módulo.
Puedes bloquear proporciones para que valores como arriba y abajo sean iguales.
Los valores predeterminados de margen y relleno son 0.
Ajusta el ancho con el control deslizante o número. El mínimo para que se vea es 1px.
Elige el color del borde.
Selecciona estilo de borde: sólido, punteado, rayado, doble, ranurado, en relieve, interno, externo o ninguno.
Redondea las esquinas con un valor numérico. Puedes vincular o desvincular las esquinas para que tengan diferentes radios.
Configura posición horizontal y vertical.
Ajusta la fuerza del desenfoque y la expansión.
Elige el color de la sombra.
Decide si la sombra está dentro o fuera del módulo.
Tono – Ángulo del color.
Saturación – Intensidad del color.
Brillo – Brillo de los colores.
Contraste – Distinción entre luces y sombras.
Invertir – Invierte tono, saturación y brillo según valor.
Sepia – Apariencia cálida, amarilla/marrón.
Opacidad – Transparencia del fondo.
Desenfoque – Desenfoque Gaussiano aplicado.
El Modo de Fusión define cómo se mezcla el módulo con las capas inferiores. Por defecto es normal.
Escalar
Trasladar
Rotar
Inclinar
Puntos de origen
Navega entre opciones, ajusta valores numéricos o arrastra. Puedes bloquear los valores para que sean iguales.
Duración de la animación
Retardo antes de comenzar
Opacidad inicial
Curva de velocidad (easing) para suavizar
Repetición (por defecto solo se reproduce una vez; para repetir elige la opción de bucle)
Aquí puedes aplicar CSS personalizado a tu módulo. También puedes asignar clases e IDs CSS personalizados al módulo, que 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 o Clase CSS específica a este módulo. Esto es útil para 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 de palabra clave para dirigirte a este módulo. Ejemplo:
selector h1 {color: red;}
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 agregar propiedades CSS personalizadas.
Atributos
Relación del Botón – Define la relación del enlace del botón entre la fuente a la que estás enlazando y la página desde donde enlazas. Esto es útil porque mientras más información los motores de búsqueda obtengan de tu sitio, más precisa será la ubicación en los resultados de búsqueda.
Condiciones
Las Condiciones de Visualización te permiten elegir cuándo mostrar este módulo basado en un conjunto de condiciones, como por ejemplo: cuando un usuario visita la página, si ya ha comprado antes en tu empresa, qué navegador usa, qué sistema operativo tiene, y más.
Puedes agregar una o múltiples condiciones.
Visibilidad
Deshabilitar en – Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea Teléfono, Tableta o Escritorio seleccionando la casilla correspondiente.
Desbordamiento Horizontal – Define qué mostrar cuando el contenido sobrepasa los bordes izquierdo y derecho de un elemento de nivel bloque. Puede ser:
Visible – El contenido se mostrará si el contenido del módulo sobrepasa su altura.
Desplazar – Si el contenido del módulo sobrepasa su altura, se usará una barra de desplazamiento vertical para navegar por su contenido.
Oculto – Si el contenido del módulo sobrepasa su altura, la parte sobrante se ocultará.
Automático – El navegador decidirá si se muestra la barra de desplazamiento.
Desbordamiento Vertical – Define qué mostrar cuando el contenido sobrepasa los bordes superior e inferior de un elemento de nivel bloque. Puede ser:
Visible
Desplazar
Oculto
Automático
Transiciones
Controla la duración, retraso y curva de velocidad de la animación al pasar el cursor (hover).
Duración de la transición – Define la duración (en milisegundos) de la transición de la animación al pasar el cursor.
Retraso de la transición – Define el retraso (en milisegundos) de la transición de la animación al pasar el cursor.
Curva de velocidad de la transición – Define la curva de velocidad de la transición de la animación al pasar el cursor.
Posición
Posición – Define la posición del módulo:
Relativa (valor por defecto) – El módulo se posiciona según el flujo normal del documento y luego los valores de desplazamiento son relativos a sí mismo según los valores de Desplazamiento Vertical y Horizontal. El desplazamiento no afecta la posición de otros elementos; por lo tanto, el espacio que ocupa el módulo en la 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 se crea espacio para él en el diseño de la página. Se posiciona relativo al ancestro más cercano que esté posicionado o al bloque contenedor inicial. Las opciones de ubicación determinan su posición final.
Fija – El módulo se elimina del flujo normal del documento y no ocupa espacio en el diseño. Se posiciona con relación a la ventana del navegador. Puede usarse 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 (Z-index) – Define el orden del módulo en el diseño. Los módulos con un índice z más alto se superponen a los que tienen índice más bajo.
Efectos de Desplazamiento
Esta sección define el comportamiento del módulo cuando el usuario hace scroll en la página. Puedes hacer que el módulo sea fijo (sticky) en la parte superior, inferior, o en ambos lados, y decidir si el módulo debe transformarse mientras el usuario desplaza.
También puedes habilitar 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 aplicado. Puedes activarlo 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 del rendimiento de WooCommerce: 14 consejos y mejores prácticas
Una guía sencilla para las páginas predeterminadas de WooCommerce
Actualización de WooCommerce: mejores prácticas para seguir siempre