Cómo agregar, configurar y personalizar el módulo de venta cruzada de productos Divi Woo.

La venta cruzada es la práctica de promover productos relacionados que tienen un precio más alto cuando una persona se acerca a finalizar la compra.

El módulo de venta cruzada de productos Divi Woo facilita el diseño y la exhibición de productos vinculados para incentivar a los visitantes a agregar más artículos a su carrito antes de finalizar la compra. Para aumentar las ventas, puedes añadir este módulo a las páginas de producto, carrito y pago.

Las ventas cruzadas de productos provienen de la sección de productos vinculados dentro de una lista de productos.

Si no hay productos vinculados en la sección de venta cruzada, no se mostrarán artículos como ventas cruzadas.

El módulo de venta cruzada de productos Woo puede optimizarse aún más usando las opciones de condición de Divi para mostrar perfectamente cómo y cuándo aparecen las ventas cruzadas.

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 Venta Cruzada de Productos Divi Woo

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

Todas las Opciones del Módulo de Venta Cruzada de Productos Divi Woo Explicadas

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

• Contenido

• Diseño

• Avanzado

Pestaña Contenido

Aquí encontrarás las opciones de contenido disponibles para este módulo.

Contenido
El primer grupo de configuraciones es Contenido, donde puedes controlar el tipo de contenido que se muestra y cómo.

• Producto – Esta opción te permite especificar a qué producto se relacionará el módulo cuando muestre productos de venta cruzada. Por defecto, está configurado en Este Producto. Para nuestros propósitos, dejaremos esta opción en Este Producto para que muestre productos relacionados al que el visitante está viendo, ya que queremos hacer venta cruzada de productos relacionados. Este Producto puede usarse cuando el módulo Woo Upsell está colocado en una página de producto individual o en la plantilla del Constructor de Temas Todos los Productos.

• Elección de producto puede usarse cuando el módulo Woo Upsell está colocado en cualquier lugar que no sea la página individual de producto o la plantilla del Constructor de Temas Todos los Productos. Esta opción solo mostrará productos de venta cruzada (si hay) relacionados con el producto elegido en la opción Producto.

• Cantidad de productos – Define el número de productos que se mostrarán por página de resultados ingresando un valor numérico en el campo de entrada.

• Diseño de columnas – Elige cuántas columnas quieres que el módulo use para mostrar los productos de venta cruzada, seleccionando un número en el menú desplegable.

• Orden – Elige cómo quieres que se ordenen los productos desde el menú desplegable: orden aleatorio, por orden de menú, por popularidad, de más antiguo a más nuevo, de más nuevo a más antiguo, por precio de menor a mayor o de mayor a menor.

• Categorías incluidas – Elige qué categorías de productos quieres incluir en los resultados mostrados. Por defecto, se muestran todas las categorías. Para seleccionar una categoría, haz clic en su casilla correspondiente. Si se selecciona una o varias categorías, solo esas se mostrarán.

• Número de productos a omitir – Elige cuántos productos quieres saltarte. No se mostrarán en el feed. Por ejemplo, si tienes 12 productos pero solo quieres mostrar del 2 al 12, escribe 1 en este campo.

• Mostrar Nombre – Activa o desactiva esta opción para mostrar u ocultar el nombre del producto.

• Mostrar Imagen – Activa o desactiva para mostrar u ocultar la imagen del producto.

• Mostrar Precio – Activa o desactiva para mostrar u ocultar el precio del producto.

• Mostrar Calificación – Activa o desactiva para mostrar u ocultar la calificación del producto.

• Mostrar Etiqueta de Oferta – Activa o desactiva para mostrar u ocultar la etiqueta de oferta.

• URL del enlace del módulo – Pega la URL a la que quieres dirigir cuando alguien haga clic en el módulo. Esto hace que todo el módulo sea clickeable y dirigirá a los visitantes a esa URL.

• Objetivo del enlace del módulo – Define si el enlace se abre en la misma ventana o en una pestaña nueva:

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

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

• Color de fondo

• Degradado de fondo

• Imagen de fondo

• Video 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 del balde de pintura.

• Haz clic en Añadir color de fondo y elige un color del paleta de colores del sitio o usa el ícono del cuentagotas para elegir 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 de parada del degradado y selecciona un color de la paleta de colores o usa el cuentagotas para elegir un nuevo color. Puedes añadir más colores al degradado haciendo clic en cualquier parte de la barra deslizante.

Opciones del 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 o ingresando 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 de parada del degradado.

• Colocar degradado sobre la imagen de fondo – Si tienes una imagen de fondo, puedes poner 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 – Aplica un efecto parallax a la imagen (la imagen se mueve más rápido que el contenido en primer plano, creando una ilusión 3D), activando esta opción. Por defecto está desactivada.

• 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 – Elige si la imagen se repite y cómo desde el menú desplegable.

• Mezcla de la imagen de fondo – Elige cómo se mezcla la imagen con otras capas desde el menú desplegable.

• 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 ambos formatos porque no todos los navegadores soportan WebM. Subir ambos garantiza que el video funcione en todos los dispositivos y navegadores.

• Ancho del video de fondo – Define el ancho del video con un valor numérico.

• Alto del video de fondo – Define el alto del video con un valor numérico.

• Pausar video cuando otro video se reproduzca – Activa esta opción si quieres que el video de fondo se pause cuando otro video esté reproduciéndose. Por defecto, el video se pausa cuando no está visible. Si quieres que siga reproduciéndose, desactiva esta opción.

Cómo Agregar un Patrón de Fondo
Haz clic en la quinta pestaña, el ícono de Patrón

Haz clic en Agregar Patrón de Fondo

Elige el tipo de patrón que deseas desde el menú desplegable

Opciones de Patrón de Fondo

• Color del Patrón - Selecciona el color del patrón desde la paleta de colores de tu sitio o usa el ícono del cuentagotas para encontrar un nuevo color.

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

• Tamaño del Patrón - Aquí puedes seleccionar el tamaño del patrón: tamaño real, cubrir, ajustar, estirar para llenar o tamaño personalizado. Si seleccionas tamaño personalizado, aparecerán las siguientes opciones: ancho del patrón y alto del patrón. Arrastra el control deslizante o escribe un valor numérico para definir estas opciones.

• Origen de Repetición del Patrón - Selecciona el origen desde el cual 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 - Elige cómo se repite el patrón: horizontalmente, verticalmente, y más.

• Modo de Fusión del Patrón - Define cómo la capa del patrón interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.

Cómo Agregar una Máscara de Fondo
Haz clic en la sexta pestaña, el ícono de Máscara

Haz clic en Agregar Máscara de Fondo

Selecciona el tipo de máscara que deseas mediante el menú desplegable

Opciones de Máscara de Fondo

• Color de la Máscara - Elige el color de la máscara desde la paleta de colores de tu sitio o usa el ícono del cuentagotas para encontrar un nuevo color.

• 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 - Establece la relación de aspecto de la máscara. La relación de aspecto de una imagen es la proporción entre su ancho y su 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 seleccionas tamaño personalizado, aparecerán las siguientes opciones: ancho y alto de la máscara. Arrastra el control deslizante o escribe un valor numérico para definir estas opciones.

• Modo de Fusión de la Máscara - Define cómo la capa de la máscara interactúa con las capas debajo de ella. Selecciona uno de los 16 modos de fusión disponibles en el menú desplegable.

Etiqueta de Administración

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

Superposición

• Color del Ícono de Superposición – Elige el color del ícono seleccionando desde la paleta de colores o usando el ícono del cuentagotas para encontrar un nuevo color.

• Color de Fondo de la Superposición – Elige un color de fondo para el ícono seleccionando desde la paleta de colores o usando el cuentagotas para un nuevo color.

• Ícono de Superposición – Elige entre cientos de íconos que vienen con Divi. Usa el botón de filtro para ordenar íconos sólidos, íconos de Divi y Font Awesome.

Imagen
Este grupo de configuraciones te permite diseñar el aspecto de las imágenes de producto.

• Esquinas Redondeadas de la Imagen – Si quieres redondear las esquinas de la imagen, escribe un valor numérico. Cuanto mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están vinculados automáticamente (como se ve en el eslabón azul resaltado); sin embargo, si quieres valores diferentes para cada esquina, haz clic en el eslabón azul para desvincularlos. Si están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno.

• Estilos del Borde de la Imagen – Aquí puedes agregar un borde a la imagen. Puedes agregarlo en todos los lados o en lados individuales (arriba, derecha, abajo, izquierda).

• Ancho del Borde de la Imagen – Aquí defines el grosor del borde. Para un borde más grueso, aumenta el número. El borde debe tener al menos 1px para mostrarse.

• Color del Borde de la Imagen – Define el color del borde. Puedes elegir un color de la paleta de colores por defecto o usar el cuentagotas para un nuevo color.

• Estilo del Borde de la Imagen – Selecciona el estilo del borde que quieres: sólido, discontinuo, punteado, doble, ranurado, elevado, embutido, sobresaliente o ninguno.

• Sombra de Caja de la Imagen – Elige el estilo de sombra para la imagen. Por defecto, no hay sombra.

• Posición Horizontal de la Sombra de Caja – Controla la posición horizontal de la sombra de la imagen.

• Posición Vertical de la Sombra de Caja – Controla la posición vertical de la sombra.

• Fuerza del Desenfoque de la Sombra – Controla qué tan difusa es la sombra. A mayor número, mayor desenfoque.

• Fuerza de Expansión de la Sombra – Controla cuánto se expande la sombra alrededor de la imagen.

• Color de la Sombra – Elige el color de la sombra.

• Posición de la Sombra de Caja – Selecciona si la sombra es interna o externa.

• Matiz de la Imagen – Ajusta el matiz (tono) de la imagen.

• Saturación de la Imagen – Ajusta la saturación (intensidad de color).

• Brillo de la Imagen – Ajusta el brillo.

• Contraste de la Imagen – Ajusta el contraste.

• Invertir Imagen – Invierte los colores de la imagen.

• Sepia de la Imagen – Controla el nivel de tono sepia aplicado.

• Opacidad de la Imagen – Controla la transparencia de la imagen.

• Desenfoque de la Imagen – Controla el grado de desenfoque.

• Modo de Fusión de la Imagen – El modo de fusión indica cómo el módulo se mezcla con las capas debajo. Por defecto está “normal”.

Calificación por Estrellas

• Alineación de la Calificación por Estrellas – Elige cómo se alinea la calificación: izquierda, centro, derecha o justificado.

• Color de la Calificación por Estrellas – Define el color eligiendo desde la paleta o usando el cuentagotas.

• Tamaño de la Calificación por Estrellas – Define el tamaño escribiendo un valor numérico o arrastrando el control deslizante. Más número, más grande.

• Espaciado entre Letras de la Calificación – Ajusta el espacio entre cada letra. Más número, más espacio.

Texto de Etiqueta de Venta

• Color de la Etiqueta de Venta – Define el color desde la paleta o usando el cuentagotas.

• Margen de la Etiqueta de Venta – Agrega margen escribiendo un valor numérico. Los márgenes añaden espacio fuera del elemento. Para bloquear proporciones y mantener los valores iguales, haz clic en el ícono de cadena entre los valores que quieras sincronizar (ejemplo: arriba y abajo).

• Relleno de la Etiqueta de Venta – Agrega relleno escribiendo un valor numérico. El relleno agrega espacio dentro del elemento. También puedes bloquear proporciones igual que con el margen.

• Fuente de la Etiqueta de Venta – Elige la fuente para el texto. Por defecto está la fuente automática, pero puedes cambiarla o subir una fuente personalizada.

• Grosor de Fuente de la Etiqueta de Venta – Selecciona el grosor de la fuente en el menú desplegable.

• Estilo de Fuente de la Etiqueta de Venta – Elige el estilo:

  • Cursiva

  • Capitalizada

  • Mayúsculas Pequeñas

  • Subrayada

  • Tachada

• Alineación del Texto de la Etiqueta de Venta – Elige la alineación específica: izquierda, centro, derecha, justificado.

• Color del Texto de la Etiqueta de Venta – Elige un color específico para el texto.

• Tamaño del Texto de la Etiqueta de Venta – Ajusta el tamaño del texto.

• Espaciado entre Letras del Texto de la Etiqueta de Venta – Ajusta el espacio entre letras.

• Altura de Línea del Texto de la Etiqueta de Venta – Ajusta el espacio entre líneas.

• Sombra del Texto de la Etiqueta de Venta – Agrega sombra al texto. Puedes configurar dirección, fuerza y color de la sombra.

• Esquinas Redondeadas de la Etiqueta de Venta – Redondea las esquinas escribiendo un valor numérico. Más número, más redondeadas. Los valores están vinculados pero se pueden desvincular igual que con la imagen.

• Estilos del Borde de la Etiqueta de Venta – Agrega un borde a todos o lados específicos.

• Ancho del Borde de la Etiqueta de Venta – Ajusta el grosor del borde, mínimo 1px para mostrarse.

• Color del Borde de la Etiqueta de Venta – Elige el color del borde.

• Estilo del Borde de la Etiqueta de Venta – Elige el estilo: sólido, discontinuo, punteado, doble, ranurado, elevado, embutido, sobresaliente o ninguno.

• Sombra de Caja de la Etiqueta de Venta – Elige la sombra para el texto de la etiqueta. Por defecto no hay sombra.

Texto
Aquí se definen los estilos generales para todo el texto del módulo, aunque puedes definir estilos específicos para textos concretos en otros grupos de configuración como Texto del Título, Texto del Título del Producto, Texto del Precio y Texto del Precio de Oferta.

• Alineación del Texto – Elige la alineación: izquierda, centro, derecha, justificado.

• Sombra del Texto – Aplica sombra a todo el texto del módulo.

Texto del Título
Configuraciones específicas para el estilo y configuración del texto del título.

• Fuente del Título – Elige la fuente para el título.

• Grosor de Fuente del Título – Selecciona el grosor.

• Estilo de Fuente del Título – Elige entre: cursiva, capitalizada, mayúsculas pequeñas, subrayada, tachada.

• Alineación del Texto del Título – Elige la alineación para el texto del título.

• Color del Texto del Título – Elige un color específico.

• Tamaño del Texto del Título – Ajusta el tamaño.

• Espaciado entre Letras del Texto del Título – Ajusta el espacio entre letras.

• Altura de Línea del Texto del Título – Ajusta el espacio entre líneas.

• Sombra del Texto del Título – Agrega sombra al texto del título, con configuración de dirección, fuerza y color.

Texto del Título del Producto
Configuraciones específicas para el estilo del texto del título del producto.

• Fuente del Título del Producto

• Grosor de Fuente del Título del Producto

• Estilo de Fuente del Título del Producto (cursiva, capitalizada, mayúsculas pequeñas, subrayada, tachada)

• Alineación del Texto del Título del Producto

• Color del Texto del Título del Producto

• Tamaño del Texto del Título del Producto

• Espaciado entre Letras del Texto del Título del Producto

• Altura de Línea del Texto del Título del Producto

• Sombra del Texto del Título del Producto

Texto del Precio

• Fuente del Precio

• Grosor de Fuente del Precio

• Estilo de Fuente del Precio (cursiva, capitalizada, mayúsculas pequeñas, subrayada, tachada)

• Alineación del Texto del Precio

• Color del Texto del Precio

• Tamaño del Texto del Precio

• Espaciado entre Letras del Texto del Precio

• Altura de Línea del Texto del Precio

• Sombra del Texto del Precio

Texto del Precio de Oferta

• Fuente del Precio de Oferta

• Grosor de Fuente del Precio de Oferta

• Estilo de Fuente del Precio de Oferta (cursiva, capitalizada, mayúsculas pequeñas, subrayada, tachada)

• Alineación del Texto del Precio de Oferta

• Color del Texto del Precio de Oferta

• Tamaño del Texto del Precio de Oferta

• Espaciado entre Letras del Texto del Precio de Oferta

• Altura de Línea del Texto del Precio de Oferta

• Sombra del Texto del Precio de Oferta

Dimensionamiento

• Ancho - Define el ancho del módulo. Para más información, revisa 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, la alineación puede ser:

  • Alineado a la izquierda

  • Centrado

  • Alineado a la derecha

• Altura Mínima - Define el valor mínimo para la altura del módulo.

• Altura - Define la altura del módulo.

• Altura Máxima - Define el valor máximo para la altura del módulo.

Espaciado
Puedes añadir márgenes o espaciado 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 las proporciones y mantener los valores iguales, haz clic en el ícono de eslabón 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
Agrega un borde al módulo. Puedes añadir un borde completo o un borde solo a un lado del módulo. Ajusta el ancho mediante el control deslizante y selecciona un color. Elige un estilo de borde haciendo clic en el menú desplegable.

Esquinas redondeadas – Escribe un valor numérico para redondear las esquinas del borde. Mientras mayor sea el número, más redondeadas serán las esquinas. Los valores de las esquinas están automáticamente vinculados (como se ve en el ícono de cadena azul resaltado en el medio); sin embargo, si quieres tener valores diferentes para cada esquina, simplemente haz clic en la cadena azul para desvincular los valores. Si los valores están vinculados, siempre tendrán el mismo valor y se actualizarán automáticamente si cambias uno de ellos.

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 – Establece 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 colores de tu sitio que ya está visible o hacer clic en el ícono del cuentagotas para elegir un color nuevo.

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

Sombra de caja

• Posición horizontal de la sombra – Define la posición horizontal de la sombra.

• Posición vertical de la sombra – Define la posición vertical de la sombra.

• Fuerza de desenfoque de la sombra – Define la intensidad del desenfoque de la sombra. Mientras mayor sea el valor, más grande será el desenfoque y más amplia y ligera será la sombra.

• Fuerza de expansión de la sombra – Define la fuerza de expansión del desenfoque. Aumentar este valor incrementará la densidad de la sombra. Mayor densidad resulta en una sombra más intensa.

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

• Posición de la sombra – Define la posición de la sombra. Puede estar dentro o fuera del módulo.

Filtro
Ajusta los filtros del módulo:

• Tono – Define el ángulo del tono de un 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 qué tan distintos deben ser las áreas claras y oscuras.

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

• Sepia – Define una apariencia más cálida, más amarilla/marrón.

• 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 fusión se refiere a cómo el módulo se mezcla con las capas debajo. Por defecto, estará seleccionado “normal”.

Transformar

• Escalar

• Trasladar

• Rotar

• Sesgar

• Puntos de origen

Puedes navegar por cada opción usando tabulador. Configura cada opción ingresando valores numéricos o arrastrando y expandiendo la caja o el círculo.

Puedes bloquear estos valores para que siempre sean idénticos haciendo clic en el ícono de cadena en la esquina 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 tarda una animación en completar un ciclo.

• Retraso de la animación – Define cuánto tiempo esperar desde que se aplica la animación a un elemento antes de que comience. La animación puede comenzar después, inmediatamente desde el inicio o inmediatamente y a mitad de la animación.

• Opacidad inicial de la animación – Define el valor inicial de opacidad.

• Curva de velocidad de la animación – Define el método de aceleración de tu animación. Usar una aceleración progresiva y regresiva crea un efecto más suave que una velocidad lineal.

• Repetición de la animación – Por defecto, las animaciones solo se reproducen una vez. Si quieres que la animación se repita continuamente, selecciona la opción “Loop” (bucle).

Pestaña Avanzada

Aquí puedes aplicar CSS personalizado a tu módulo. También puedes aplicar clases CSS personalizadas e IDs al módulo, que se pueden usar para personalizar estilos 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 específico o una Clase 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 “selector” para dirigir 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. Al hacer 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 basado en un conjunto de condiciones, como si un usuario ya ha comprado antes en tu empresa, qué navegador usa, qué sistema operativo utiliza y más.

Puedes agregar una o varias 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 haciendo clic en la casilla correspondiente.

• Desbordamiento horizontal – Define qué se muestra cuando el contenido sobrepasa los bordes izquierdo y derecho de un elemento de bloque. Puede ser:

  • Visible – El contenido se mostrará si sobrepasa la altura del módulo.

  • Scroll – Si el contenido sobrepasa la altura, aparecerá una barra de desplazamiento vertical para navegar.

  • Oculto – Si el contenido sobrepasa la altura, la parte que sobrepase se ocultará.

  • Automático – El navegador decidirá si mostrar o no una barra de desplazamiento.

• Desbordamiento vertical – Define qué se muestra cuando el contenido sobrepasa los bordes superior e inferior. Las opciones son las mismas que para el desbordamiento horizontal.

Transiciones
Controla la duración, el retraso y la curva de velocidad de la animación hover (al pasar el mouse).

• 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 (en milisegundos) de la transición hover.

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

Posició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 y luego los valores de desplazamiento vertical y horizontal son relativos a sí mismo. El espacio asignado al módulo en la página es igual 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. Se posiciona respecto a su ancestro posicionado más cercano (si existe) o al contenedor inicial. Las opciones de ubicación determinan su posición final.

  • Fija – El módulo se elimina del flujo normal y no ocupa espacio. Se posiciona respecto a la ventana del navegador. Esto puede usarse para crear un módulo fijo (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 de la página. Los módulos con un índice z más alto se superponen a los de índice más bajo.

Efectos de desplazamiento

Además, puedes habilitar el movimiento vertical en este módulo, lo que permite ajustar la velocidad del desplazamiento del elemento sin afectar a los elementos circundantes.

La función Disparador 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.

Guardar y salir

Guardar el diseño de la página

Salir del constructor visual

Consejos y mejores prácticas para usar el módulo Divi Woo Product Upsell

• Establecer el contenido del producto en Este Producto
  Cuando intentes vender productos adicionales, es buena estrategia mostrar productos similares al que tu visitante está viendo. Establecer el contenido del producto en “Este Producto” logrará eso.

• Mostrar productos upsell condicionalmente
  Las opciones de condición de Divi te brindan control potente y granular sobre cómo y cuándo se muestran los elementos. Puedes personalizar tus recomendaciones de productos basándote en diversas configuraciones disponibles en las opciones de condición de Divi.

  Para aprender más sobre las opciones de condición, haz clic aquí.

• Usar en varias páginas
  Para aprovechar al máximo el módulo Woo Product Upsell, úsalo en varias páginas de tu sitio web. Este módulo funciona bien en páginas de tienda, página de producto, carrito, pago y en todo tu sitio web.

Más recursos de Divi WooCommerce

• 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

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

• Actualización de WooCommerce: mejores prácticas para seguir siempre