El Módulo de Precio de Producto Divi Woo funciona perfectamente con WooCommerce y puede mostrar el precio de un producto en cualquier lugar de tu sitio web.

El módulo Precio de Producto Woo te permite agregar y diseñar el título de un producto en cualquier parte de tu sitio web, ¡incluyendo plantillas de página y construcciones de página regulares!

Instalar el plugin WooCommerce

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

Agregar el Módulo de Precio de Producto Divi Woo

• 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 Precio de Producto Woo para agregarlo a tu página.

Todos los ajustes del Módulo de Precio de Producto Divi Woo explicados

Estos ajustes están organizados 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.

• Producto - Esta configuración te permite especificar a qué producto se relaciona el módulo cuando muestra el precio de un producto. Por defecto, está configurado en Este Producto. Para nuestros fines, dejaremos esta configuración en Este Producto para que muestre dinámicamente el precio del producto que se esté viendo.

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

• 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 nueva pestaña.

Fondo

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Vídeo de fondo

• Patrón de fondo

• Máscara de fondo

Cómo agregar un color de fondo

• Haz clic en la primera pestaña, el ícono de cubeta 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 color nuevo.

• 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 nuevo color. Los puntos del degradado permiten agregar más colores al degradado. Haz clic en cualquier parte de la barra 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 o escribiendo un valor numérico.

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

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

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

• 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 desplaza más rápido que el contenido en primer plano, dando una ilusión 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 en el menú desplegable.

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

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

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

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

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

Opciones de vídeo de fondo:

• mp4 vs webm - Se recomienda subir ambas versiones porque no todos los navegadores soportan el formato webm. Subir ambos asegura que el vídeo se reproduzca en todos los dispositivos y navegadores.

• Ancho del vídeo - Establece el ancho escribiendo un valor numérico.

• Alto del vídeo - Establece la altura escribiendo un valor numérico.

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

• 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 del menú desplegable.

Opciones de patrón de fondo:

• Color del patrón - Selecciona el color del patrón desde la paleta del sitio o usa el cuentagotas.

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

• Tamaño del patrón - Selecciona el tamaño: tamaño real, cubrir, ajustar, estirar o tamaño personalizado. Si seleccionas personalizado, aparecerán las opciones de ancho y alto que puedes ajustar con la barra o escribiendo un valor.

• Origen de repetición del patrón - Selecciona desde dónde 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: horizontal, vertical, etc.

• Modo de mezcla del patrón - Define cómo interactúa la capa del patrón con las capas inferiores. 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 del menú desplegable.

Opciones de máscara de fondo:

• Color de la máscara - Elige el color desde la paleta o con el cuentagotas.

• Transformación de la 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 ancho a alto de la máscara.

• Tamaño de la máscara - Selecciona el tamaño: real, cubrir, ajustar, estirar o personalizado. Si seleccionas personalizado, podrás definir ancho y alto.

• Modo de mezcla de la máscara - Define cómo interactúa la máscara con las capas inferiores. Hay 16 modos disponibles.

Pestaña Diseño

Dentro de esta pestaña encontrarás todos los estilos y ajustes de diseño para este módulo.

• Fuente del precio - Elige la fuente para el texto del precio. Por defecto se selecciona una fuente automáticamente, pero puedes elegir otra o subir una personalizada desde el menú desplegable.

• Grosor de fuente del precio - Selecciona el grosor del texto.

• Estilo de fuente del precio - Elige el estilo del texto del precio:

  • Cursiva

  • Mayúscula inicial

  • Versalitas

  • Subrayado

  • Tachado

• Color del texto del precio - Elige un color específico para el texto.

• Tamaño del texto del precio - Ajusta el tamaño con la barra o escribiendo un valor.

• Espaciado entre letras del precio - Ajusta el espacio entre letras con la barra o valor numérico.

• Altura de línea del precio - Ajusta el espacio entre líneas con la barra o valor numérico.

• Sombra de texto del precio - Añade una sombra al texto. Configura dirección, fuerza y color.

• Alineación del texto del precio - Elige la alineación del texto: izquierda, centro, derecha o justificado.

• Fuente del precio antiguo

• Grosor de fuente del precio antiguo

• Estilo de fuente del precio antiguo:

  • Cursiva

  • Mayúscula inicial

  • Versalitas

  • Subrayado

  • Tachado

• Color del texto del precio antiguo

• Tamaño del texto del precio antiguo

• Espaciado entre letras del precio antiguo

• Altura de línea del precio antiguo

• Sombra de texto del precio antiguo

• Fuente del precio nuevo

• Grosor de fuente del precio nuevo

• Estilo de fuente del precio nuevo:

  • Cursiva

  • Mayúscula inicial

  • Versalitas

  • Subrayado

  • Tachado

• Color del texto del precio nuevo

• Tamaño del texto del precio nuevo

• Espaciado entre letras del precio nuevo

• Altura de línea del precio nuevo

• Sombra de texto del precio nuevo

• 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. Para más información, consulta la documentación oficial.

• Alineación del Módulo - Si se establece un valor de ancho o ancho máximo, la alineación del módulo puede configurarse con tres opciones:

  • Alineado a la izquierda

  • Alineado al centro

  • Alineado a la derecha

• Altura Mínima - Define el valor mínimo para la altura del módulo. Para más información, consulta la documentación oficial.

• Altura - Define la altura del módulo. Para más información, consulta la documentación oficial.

• Altura Máxima - Define el valor máximo de altura que puede tener el módulo. Para más información, consulta la documentación oficial.

Espaciado
Puedes agregar márgenes o espacios a este módulo escribiendo valores numéricos.

• El margen añade espacio fuera del módulo, y el relleno añade espacio dentro del módulo. Para bloquear proporciones y mantener los valores iguales, haz clic en el icono de cadena entre los valores que quieres que siempre sean idénticos (por ejemplo, arriba y abajo).

• Los valores predeterminados de margen para el módulo son 0.

• Los valores predeterminados de relleno para el módulo son 0.

Borde

• Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Cuanto mayor sea el número, más redondeadas estarán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en la cadena azul resaltada en el medio); sin embargo, si deseas valores diferentes para cada esquina, haz clic en la cadena azul para desvincularlos. Si están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si uno cambia.

• Estilos de borde – Añade un borde a todos los lados del módulo o a lados individuales (arriba, derecha, abajo e izquierda).

• Ancho del borde - Define el ancho del borde. Para un borde más grueso, aumenta el número. El ancho del borde debe ser al menos 1px para que se muestre.

• Color del borde – Elige el color del borde. Puedes seleccionar un color de la paleta predeterminada de tu sitio o usar el icono del cuentagotas para encontrar un color nuevo.

• Estilo de borde – Selecciona el estilo del borde que prefieras: sólido, discontinuo, punteado, doble, ranurado, en relieve, embutido, saliente o ninguno.

Sombra de caja

• Posición horizontal de la sombra - Define la posición horizontal de la sombra proyectada.

• Posición vertical de la sombra - Define la posición vertical de la sombra proyectada.

• Intensidad del desenfoque de la sombra - Define la fuerza del desenfoque de la sombra. A mayor valor, mayor desenfoque y la sombra será más amplia y ligera.

• Intensidad de propagación de la sombra - Define la fuerza de propagación del desenfoque. Aumentar esta fuerza incrementa la densidad de la sombra, haciendo que sea más intensa.

• Color de la sombra - Define el color de la sombra.

• Posición de la sombra - Define si la sombra está dentro o fuera del módulo.

Filtros
Ajusta los filtros del módulo:

• Tono - Define el ángulo del tono del color.

• Saturación - Define qué tan intensa debe ser la saturación del color.

• Brillo - Define qué tan brillantes deben ser los colores.

• Contraste - Define cuán marcadas deben ser las áreas claras y oscuras.

• Invertir - Invierte el tono, saturación y brillo según el valor especificado.

• Sepia - Define una apariencia más cálida, con tonos amarillos/marrones.

• Opacidad - Define qué tan transparente u opaco debe ser el fondo (color, degradado, imagen, etc.).

• Desenfoque - Define la cantidad de desenfoque gaussiano aplicado al módulo.

El modo de mezcla se refiere a cómo se mezcla el módulo con las capas debajo de él. Por defecto está seleccionado normal.

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Navega entre las opciones para acceder a cada una. Configura cada opción ingresando valores numéricos o arrastrando y ampliando el cuadro o círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el icono de cadena en la parte inferior derecha.

Animación
Aquí puedes aplicar animación al módulo. Una vez que eliges un estilo, puedes ajustar las siguientes opciones:

• Duración de la animación - Define el tiempo que dura la animación para completar un ciclo.

• Retardo de la animación - Define cuánto tiempo esperar antes de que la animación comience. La animación puede iniciar más tarde, inmediatamente o a mitad de la animación.

• Opacidad inicial de la animación - Define el valor de opacidad al inicio de la animación.

• Curva de velocidad de animación - Define el método de suavizado de la animación para un efecto más fluido que una velocidad lineal.

• Repetición de la animación - Por defecto, las animaciones solo se reproducen una vez. Para que se repitan continuamente, selecciona la opción de bucle.

Pestaña Avanzado

Aquí puedes aplicar CSS personalizado al módulo. También puedes asignar clases e IDs personalizadas 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 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 al 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: red;}

• Elementos del módulo - También puedes aplicar CSS personalizado pegándolo en esta pestaña. Al hacer clic en esta pestaña, verás secciones individuales donde puedes agregar propiedades CSS personalizadas.

Condiciones
Las condiciones de visualización te permiten elegir cuándo mostrar este módulo basado en un conjunto de condiciones, como cuando un usuario visita la página, si ya ha comprado antes en tu empresa, qué navegador está usando, qué sistema operativo usa y más.

Puedes añadir una o varias condiciones.

Visibilidad

• Deshabilitar en - Define la visibilidad del módulo. Puedes deshabilitarlo (ocultarlo) cuando la ventana de visualización sea un 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. Puede ser:

  • Visible - El contenido se mostrará si el contenido del módulo desborda su altura.

  • Scroll - Si el contenido desborda su altura, se usará una barra de desplazamiento vertical.

  • Oculto - El contenido que desborda se ocultará.

  • Auto - El navegador decidirá si se muestra barra de desplazamiento.

• Desbordamiento vertical - Define qué mostrar cuando el contenido desborda los bordes superior e inferior, con las mismas opciones que el desbordamiento horizontal.

Transiciones
Controla la duración, retardo 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 animación hover.

• Retardo de la transición - Define el retardo de la animación hover (en milisegundos).

• Curva de velocidad de la transición - Define la curva de velocidad de la animación hover.

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

• Relativa (valor predeterminado) - El módulo se posiciona según el flujo normal del documento y los valores de desplazamiento son relativos a sí mismo. El espacio para el módulo en el diseño es igual que si la posición fuera estática.

• Absoluta - El módulo se elimina del flujo normal del documento, sin crear espacio en el diseño. Se posiciona respecto a su antecesor más cercano que tenga posición o al bloque contenedor

inicial. Las opciones de ubicación determinan su posición final.

• Fija - El elemento se elimina del flujo normal y sin espacio en el diseño. Se posiciona respecto a la ventana del navegador, útil para módulos "pegajosos".

• 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 índice Z más alto se superponen a los de índice más bajo.

Efectos de desplazamiento

También puedes habilitar movimiento vertical para ajustar la velocidad de desplazamiento del elemento sin afectar a los elementos alrededor.

La función de activación de efecto de movimiento te permite elegir cuándo se activa el efecto de desplazamiento: cuando la parte superior, media o inferior del elemento está en vista.

Guardar tu diseño

Guardar el diseño de la página

Salir del Visual Builder

Más recursos para el módulo Divi Woo Product Price

• Cómo instalar WooCommerce y configurar tu tienda

• Cómo configurar los ajustes de WooCommerce

• 5 ideas de personalización para eCommerce en WooCommerce

• Optimización del rendimiento de WooCommerce: 14 consejos y buenas prácticas

• Guía simple para las páginas predeterminadas de WooCommerce

• Actualización de WooCommerce: buenas prácticas a seguir cada vez

Continuar aprendiendo