El bloque de Productos Relacionados te permite mostrar productos relacionados en tus plantillas de Producto Único de WooCommerce. WooCommerce determina automáticamente los productos relacionados basándose en las categorías y etiquetas asignadas a cada producto, por lo que colocar un producto en una categoría o añadir una etiqueta asegura que solo se muestren productos del mismo grupo de categorías o etiquetas.
Este bloque está diseñado exclusivamente para usarse dentro de las plantillas de Producto Único. Puedes controlar cuántos productos aparecen, cómo se ordenan y personalizar completamente la tipografía de la cuadrícula, los estilos de los botones y la presentación de las imágenes desde la pestaña Avanzado.
Añadir el bloque de Productos Relacionados a tus páginas
Sigue estos pasos para añadir un bloque de Productos Relacionados a tu plantilla de Producto Único de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > Etiquetas de Plantilla de WooCommerce, arrastra y suelta el bloque Productos Relacionados en la sección deseada de tu plantilla de Producto Único.
Paso 2: Configurar Ajustes
Una vez añadido, haz clic en el bloque de Productos Relacionados para abrir su configuración. En la pestaña Configuración, encontrarás las siguientes opciones:
- Columnas: Establece el número de columnas de productos a mostrar en la cuadrícula de productos relacionados.
- Entradas por página: Establece el número máximo de productos relacionados a mostrar.
- Ordenar por: Establece cómo se ordenan los productos relacionados: por Fecha, ID, Orden de Menú, Popularidad, Aleatorio, Calificación o Título.
- Orden: Establece la dirección de ordenación: ASC (ascendente) o DESC (descendente).
Paso 3: Personaliza el Diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de Productos Relacionados. Los ajustes están organizados en tres secciones.
Estilos:
- Alineación: Establece la alineación horizontal de la cuadrícula de productos relacionados (Izquierda, Centro o Derecha) con controles por dispositivo para escritorio, tableta y móvil.
- Tipografía del Título: Establece la familia de fuentes, tamaño, altura de línea, espaciado entre letras, grosor, estilo y mayúsculas para el texto del título del producto.
- Tipografía de la descripción: Establece la familia de fuentes, tamaño, altura de línea, espaciado entre letras, grosor, estilo y mayúsculas para el texto de la descripción del producto.
- Tipografía de precios: Establece la familia de fuentes, el tamaño, la altura de línea, el espaciado entre letras, el grosor, el estilo y las mayúsculas para el texto del precio del producto.
- Color del precio: Establece el color del precio normal del producto.
- Color de oferta: Establece el color del precio de oferta cuando un producto tiene descuento.
Botón:
- Estilo del botón: Elige un estilo visual para el botón Añadir a la cesta: Plano, 2D, Vintage, Fantasma o Enlace.
- Color del botón: Establece el color de fondo del botón Añadir a la cesta.
- Tipografía del botón: Establece la familia de fuentes, el tamaño, la altura de línea, el espaciado entre letras, el grosor, el estilo y las mayúsculas para el texto del botón.
- Tamaño del botón: Elige un tamaño de botón preestablecido: Pequeño, Mediano, Grande, Muy Grande o Extra Grande.
- Radio del borde: Ajusta la redondez de las esquinas del botón Añadir a la cesta con un control deslizante.
Imagen:
- Sombra: Aplica una sombra a las imágenes de los productos usando tamaños preestablecidos: Ninguna, Cabello, Pequeña, Mediana, Grande, Muy Grande, Extra Grande o Sombra Inferior.
- Estilo del borde: Establece el estilo del borde de las imágenes de los productos: Sólido, Punteado o Discontinuo.
- Color del borde de la imagen: Establece el color del borde de la imagen del producto.
- Ancho del borde de la imagen: Establece el grosor del borde en cada lado (Superior, Derecho, Inferior, Izquierdo) de la imagen del producto.
- Espaciado en blanco de la imagen: Añade relleno interior alrededor de las imágenes de los productos dentro de su borde.
Espaciado:
- Margen: Establece el espaciado exterior alrededor del bloque en los cuatro lados, con controles independientes para escritorio, tableta y móvil.
- Relleno: Establece el espaciado interior dentro del contenedor del bloque en los cuatro lados, con controles por dispositivo.
Atributos:
- Clase personalizada: Añade una o más clases CSS personalizadas al contenedor del bloque para una estilización específica.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puedes usarlo para referenciar el bloque en CSS o JavaScript personalizado.
- Atributos personalizados: Añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una línea nueva usando el formato clave|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Activa para ocultar el bloque cuando se ve en pantallas de escritorio.
- Ocultar en tableta: Activa para ocultar el bloque cuando se ve en pantallas de tableta.
- Ocultar en móvil: Activa para ocultar el bloque cuando se ve en pantallas móviles.
Efectos de Animación:
- Efecto de desplazamiento: Aplica una animación activada por desplazamiento al bloque, incluyendo opciones de Desplazamiento Vertical y Desplazamiento Horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto del ratón: Aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde sus Cambios
Una vez que hayas terminado de configurar el bloque de Productos Relacionados y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Productos Relacionados a tu plantilla de Producto Único! Mostrar productos relacionados es una forma probada de aumentar el valor medio del pedido y mantener a los clientes explorando tu catálogo. Asegúrate de que tus productos estén organizados con categorías y etiquetas consistentes para que WooCommerce pueda mostrar las recomendaciones más relevantes para cada artículo.