El Módulo de Stock de Producto Divi Woo se integra con WooCommerce y puede mostrar el número de stock de un producto en cualquier lugar de tu sitio web.

El módulo de Stock de Producto Woo te permite añadir y diseñar el stock de un producto en cualquier parte de tu sitio web — ¡incluyendo plantillas de página y construcciones regulares de páginas!

Este módulo obtiene el número de stock desde la sección de Inventario en la lista de productos.

Instalar Divi y WooCommerce

Antes de poder usar el módulo de Productos Relacionados Divi Woo, necesitarás tener WooCommerce instalado en tu sitio web.

• 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.

Añadir el Módulo de Stock de Producto Divi

• Haz clic en el ícono verde + para insertar una fila y selecciona la estructura de columna deseada.

• Haz clic en el ícono gris + dentro de la fila para abrir la Biblioteca de Módulos 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 Stock de Producto Woo para añadirlo a tu página.

Explicación de todas las configuraciones del Módulo de Stock de Producto Divi Woo

Una vez añadido, la ventana modal de configuraciones del módulo aparecerá automáticamente. Aquí es donde se configura el contenido y el diseño del módulo.

Estas configuraciones están organizadas en tres grupos mediante pestañas en la parte superior del módulo:

• Contenido

• Diseño

• Avanzado

Pestaña Contenido

Dentro de esta pestaña encontrarás las opciones de contenido disponibles para este módulo.

Contenido

El primer grupo de configuraciones también se llama Contenido, donde puedes controlar el tipo de contenido mostrado y cómo se muestra.

• Producto - Esta configuración te permite especificar a qué producto quieres que el módulo se relacione cuando muestre el número de stock del producto. Por defecto, está configurado en Este Producto. Para nuestros propósitos, dejaremos esta opción en Este Producto para que muestre dinámicamente el número de stock correcto según el producto que se esté viendo.

Enlace

Si deseas aplicar un enlace clicable a todo el módulo, puedes hacerlo aquí.

• URL del enlace del módulo - Pega la URL del enlace que quieres aplicar a este módulo aquí. Esto hace que todo el módulo sea clicable, y al hacer clic, dirigirá a los visitantes a la URL pegada.

• Destino del enlace del módulo - Definir el destino del enlace determina si el enlace, al hacer clic, se abre en una nueva pestaña o en la misma ventana.

  • En la misma ventana - si quieres que el enlace se abra en la misma ventana.

  • En una nueva pestaña - si quieres que el enlace se abra en una pestaña nueva.

Fondo

En el grupo de opciones de 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

Cómo añadir un color de fondo

• Haz clic en la primera pestaña, el ícono de Cubo de pintura.

• Haz clic en Añadir color de fondo y elige del paleta de colores de tu sitio, o usa el ícono del cuentagotas para elegir un color nuevo.

Cómo añadir un degradado de fondo

• 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 de tu sitio o usa el cuentagotas para elegir un color nuevo. Los puntos del degradado permiten agregar más colores al degradado. Haz clic en cualquier parte de la barra deslizante para añadir un nuevo punto.

Opciones del degradado de fondo:

• Tipo de degradado - Puedes cambiar el tipo de degradado haciendo clic en el menú desplegable y seleccionando el deseado.

• Dirección del degradado - Puedes cambiar la dirección del degradado arrastrando la barra deslizante o escribiendo un valor numérico.

• Repetir degradado - Activa esta opción si quieres que el degradado se repita.

• Unidad del degradado - Cambia cómo se calculan los puntos del degradado. Selecciona la unidad desde el menú desplegable.

• Colocar degradado encima de la imagen de fondo - Si se aplica una imagen de fondo, puedes colocar el degradado encima activando esta opción.

Cómo añadir una imagen de fondo

• Haz clic en la tercera pestaña, el ícono de Imagen.

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar una foto ya subida o subir una nueva.

Opciones de imagen de fondo:

• Usar efecto Parallax - Para aplicar un efecto parallax a la imagen (donde la imagen se mueve más rápido que el contenido en primer plano, dando la ilusión de un efecto 3D), activa esta opción. Por defecto está desactivada.

• Tamaño de la imagen de fondo - Elige el tamaño de la imagen de fondo desde el menú desplegable.

• Posición de la imagen de fondo - Elige la posición de la imagen de fondo desde el menú desplegable.

• Repetición de la imagen de fondo - Decide si y cómo se repite la imagen de fondo.

• Mezcla de la imagen de fondo - Decide cómo se mezcla la imagen con otras capas en el módulo.

Cómo añadir un video de fondo

• Haz clic en la cuarta pestaña, el ícono de Video.

• Haz clic en el ícono gris + para abrir la Biblioteca de Medios, donde puedes seleccionar un video ya subido o subir uno nuevo.

Opciones de video de fondo:

• Mp4 vs Webm - Recomendamos subir tanto una versión mp4 como una webm del video porque no todos los navegadores soportan formato webm. Subir ambos asegura que el video funcione en todos los dispositivos y navegadores.

• Ancho del video de fondo - Define el ancho del video escribiendo un valor numérico.

• Alto del video de fondo - Define el alto del video escribiendo un valor numérico.

• Pausar video cuando otro video se reproduzca - Si quieres que el video de fondo se pause cuando otro video esté en reproducción, activa esta opción. Por defecto, el video se pausa cuando no está visible. Si quieres que continúe, desactiva esta opción.

Cómo añadir un patrón de fondo

• 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 que quieres desde el menú desplegable.

Opciones del patrón de fondo:

• Color del patrón - Selecciona el color del patrón desde la paleta de colores del sitio o usa el cuentagotas para elegir un nuevo color.

• Transformar patrón - Transforma el patrón horizontal o verticalmente, gíralo o inviértelo.

• Tamaño del patrón - Selecciona el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones para ancho y alto del patrón, que puedes definir arrastrando la barra o escribiendo un valor numérico.

• Origen de repetición del patrón - Selecciona el origen desde donde el patrón se repite.

• Desplazamiento horizontal y vertical del patrón - Ajusta los desplazamientos horizontal y vertical del patrón.

• Repetición del patrón - Define cómo se repite el patrón (horizontal, vertical, etc.).

• Modo de mezcla del patrón - Define cómo la capa del patrón interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles.

Cómo añadir una máscara de fondo

• 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 que deseas desde el menú desplegable.

Opciones de la máscara de fondo:

• Color de la máscara - Elige el color de la máscara desde la paleta de colores o usa el cuentagotas para elegir un nuevo color.

• Transformar máscara - Transforma la máscara horizontal o verticalmente, gírala o inviértela.

• Relación de aspecto de la máscara - Define la relación de aspecto de la máscara (proporción entre ancho y alto).

• Tamaño de la máscara - Selecciona el tamaño de la máscara: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si eliges tamaño personalizado, aparecerán las opciones para ancho y alto de la máscara, que puedes definir arrastrando la barra o escribiendo un valor numérico.

• Modo de mezcla de la máscara - Define cómo la capa de la máscara interactúa con las capas debajo. Selecciona uno de los 16 modos de mezcla disponibles.

Etiqueta de administrador

Pestaña Diseño

Alineación del texto - Elige cómo se alinea el texto:

• Izquierda

• Centro

• Derecha

• Justificado

Texto en stock
Aquí puedes estilizar el texto que indica “En stock” para este módulo.

• Fuente del texto en stock - Elige la fuente que deseas usar para el texto en stock. La fuente predeterminada se selecciona automáticamente, pero puedes elegir otra fuente o subir una fuente personalizada desde el menú desplegable.

• Peso de la fuente en stock - Selecciona el grosor de la fuente del texto en stock.

• Estilo de fuente en stock - Elige el estilo para el texto en stock:

  • Cursiva

  • Mayúsculas

  • Versales

  • Subrayado

  • Tachado

• Alineación del texto en stock - Elige la alineación específica para el texto en stock:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto en stock - Elige un color específico para el texto en stock. Selecciona de la paleta de colores de tu sitio o usa el icono de cuentagotas para seleccionar un nuevo color.

• Tamaño del texto en stock - Ajusta el tamaño de la fuente arrastrando el control deslizante o ingresando un valor numérico.

• Espaciado entre letras en stock - Ajusta el espacio entre letras del texto en stock arrastrando el control deslizante o ingresando un valor numérico. Mientras más alto el número, mayor será el espacio.

• Altura de línea en stock - Ajusta el espacio entre líneas de texto en stock. Mientras más alto el número, mayor espacio habrá entre las líneas.

• Sombra del texto en stock - Añade una sombra al texto en stock. Una vez seleccionado un estilo, puedes configurar la dirección de la sombra (horizontal y vertical), la intensidad del desenfoque y el color de la sombra.

• Fuente del texto fuera de stock - Elige la fuente para el texto fuera de stock.

• Peso de la fuente fuera de stock - Selecciona el grosor para el texto fuera de stock.

• Estilo de fuente fuera de stock - Elige el estilo para el texto fuera de stock:

  • Cursiva

  • Mayúsculas

  • Versales

  • Subrayado

  • Tachado

• Alineación del texto fuera de stock - Elige la alineación específica para el texto fuera de stock:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto fuera de stock - Elige un color para el texto fuera de stock.

• Tamaño del texto fuera de stock - Ajusta el tamaño de fuente para el texto fuera de stock.

• Espaciado entre letras fuera de stock - Ajusta el espaciado entre letras para el texto fuera de stock.

• Altura de línea fuera de stock - Ajusta el espacio entre líneas del texto fuera de stock.

• Sombra del texto fuera de stock - Añade una sombra para el texto fuera de stock y configura dirección, intensidad y color.

• Fuente del texto en pedido pendiente - Elige la fuente para el texto en pedido pendiente.

• Peso de la fuente en pedido pendiente - Selecciona el grosor para este texto.

• Estilo de fuente en pedido pendiente - Elige el estilo:

  • Cursiva

  • Mayúsculas

  • Versales

  • Subrayado

  • Tachado

• Alineación del texto en pedido pendiente - Define la alineación para este texto:

  • Izquierda

  • Centro

  • Derecha

  • Justificado

• Color del texto en pedido pendiente - Elige el color para el texto.

• Tamaño del texto en pedido pendiente - Ajusta el tamaño de fuente.

• Espaciado entre letras en pedido pendiente - Ajusta el espaciado entre letras.

• Altura de línea en pedido pendiente - Ajusta el espacio entre líneas.

• Sombra del texto en pedido pendiente - Añade sombra y configura dirección, intensidad y color.

• 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 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 del módulo.

• Altura máxima - Define la altura máxima del módulo.

• El margen agrega espacio fuera del módulo.

• El relleno agrega espacio dentro del módulo.

• Para mantener proporciones y que los valores sean iguales, haz clic en el icono de cadena entre los valores (por ejemplo, entre arriba y abajo).

• Los valores predeterminados para márgenes y rellenos son 0.

• Ajusta el ancho con el control deslizante y selecciona un color.

• Elige un estilo de borde desde el menú desplegable.

• Esquinas redondeadas - Escribe un valor numérico para redondear las esquinas. Mientras más alto, más redondeadas estarán. Los valores están enlazados automáticamente (icono de cadena azul). Para valores diferentes en cada esquina, haz clic en el icono para desvincular.

• Estilos de borde - Aplica el borde a todos los lados o a lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del borde - Define el grosor del borde (mínimo 1 px para que se muestre).

• Color del borde - Elige un color para el borde desde la paleta o usa el cuentagotas.

• Estilo del borde - Selecciona entre sólido, punteado, rayado, doble, relieve, biselado, incrustado, sobresaliente o ninguno.

Sombra de caja

• Posición horizontal de la sombra.

• Posición vertical de la sombra.

• Fuerza del desenfoque (mientras más alto, más difusa y amplia será la sombra).

• Fuerza de extensión (aumenta la densidad de la sombra).

• Color de la sombra.

• Posición de la sombra (dentro o fuera del módulo).

• Matiz (ángulo de color).

• Saturación (intensidad del color).

• Brillo.

• Contraste (diferencia entre luces y sombras).

• Invertir (invierte matiz, saturación y brillo).

• Sepia (tono amarillento/marrón cálido).

• Opacidad (transparencia del fondo).

• Desenfoque (cantidad de desenfoque gaussiano aplicado).

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

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega entre las opciones para configurar con valores numéricos o arrastrando cajas o círculos. Puedes vincular valores para que sean idénticos con el icono de cadena.

Animación

• Retraso (tiempo antes de que inicie la animación).

• Opacidad inicial.

• Curva de velocidad (para suavizar la animación).

• Repetición (por defecto se reproduce una vez; selecciona "bucle" para repetir continuamente).

Pestaña Avanzado

• Puedes aplicar CSS personalizado directamente al módulo.

• Puedes asignar clases y IDs personalizados para estilos avanzados o para aplicar CSS adicional mediante la clase del módulo.

• CSS libre - Escribe CSS libre para este módulo usando el selector “selector”. Ejemplo: selector h1 {color: red;}

• Elementos del módulo - Aplica CSS personalizado a partes específicas del módulo en secciones individuales dentro de esta pestaña.