El bloque Productos relacionados te permite mostrar productos relacionados en tus plantillas de producto único de WooCommerce. WooCommerce determina automáticamente los productos relacionados en función de las categorías y etiquetas asignadas a cada producto, por lo que al colocar un producto en una categoría o añadir una etiqueta se garantiza que solo se muestren productos de la misma categoría o grupo de etiquetas.
Este bloque está diseñado exclusivamente para su uso dentro de 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
Siga estos pasos para añadir un bloque de productos relacionados a su plantilla SeedProd Single Product:
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 los ajustes
Una vez añadido, haz clic en el bloque Productos relacionados para abrir su configuración. En la pestaña Configuración, encontrarás las siguientes opciones:
- Columnas: Establezca el número de columnas de productos que se mostrarán en la cuadrícula de productos relacionados.
- Entradas por página: Establezca el número máximo de productos relacionados que se mostrarán.
- Ordenar por: Establezca cómo se ordenan los productos relacionados: por fecha, ID, orden del menú, popularidad, aleatorio, valoración o título.
- Orden: Establece la dirección de clasificación: ASC (ascendente) o DESC (descendente).
Paso 3: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto visual del bloque Productos relacionados. Los ajustes se organizan en tres secciones.
Estilos:
- Alineación: Establezca la alineación horizontal de la cuadrícula de productos relacionados (izquierda, centro o derecha) con controles específicos para cada dispositivo: ordenador, tableta y móvil.
- Tipografía del título: Establezca la familia de fuentes, el tamaño, la altura de línea, el espaciado entre letras, el grosor, el estilo y las mayúsculas y minúsculas del texto del título del producto.
- Descripción tipográfica: Establezca la familia tipográfica, el tamaño, la altura de línea, el espaciado entre letras, el grosor, el estilo y las mayúsculas y minúsculas del texto de la descripción del producto.
- Tipografía de precios: Establezca la familia tipográfica, el tamaño, la altura de línea, el espaciado entre letras, el peso, el estilo y las mayúsculas y minúsculas del texto del precio del producto.
- Color del precio: Establece el color del precio normal del producto.
- Color de rebaja: Establece el color del precio rebajado cuando un producto tiene descuento.
Botón:
- Estilo del botón: Elige un estilo visual para el botón Añadir al carrito: plano, 2D, vintage, fantasma o enlace.
- Color del botón: Establece el color de fondo del botón Añadir al carrito.
- Tipografía de botones: Establezca la familia de fuentes, el tamaño, la altura de línea, el espaciado entre letras, el peso, el estilo y las mayúsculas y minúsculas del texto de los botones.
- Tamaño del botón: Elija un tamaño de botón preestablecido: pequeño, mediano, grande, extragrande o 2X grande.
- Radio del borde: Ajusta la redondez de las esquinas del botón «Añadir al carrito» mediante un control deslizante.
Imagen:
- Sombra: Aplica una sombra a las imágenes de los productos utilizando tamaños preestablecidos: Ninguno, Línea del cabello, Pequeño, Mediano, Grande, Extragrande, 2X 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.
- Relleno de espacios 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 espacio exterior alrededor del bloque en los cuatro lados, con controles independientes para ordenador, 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 aplicar un estilo específico.
- ID CSS: SeedProd genera automáticamente un ID CSS único para este bloque. Puede utilizarlo para hacer referencia al bloque en CSS o JavaScript personalizados.
- Atributos personalizados: añade atributos HTML personalizados al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato clave|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Activa esta opción para ocultar el bloque cuando se vea en pantallas de escritorio.
- Ocultar en tableta: Activa esta opción para ocultar el bloque cuando se vea en pantallas de tableta.
- Ocultar en dispositivos móviles: Activa esta opción para ocultar el bloque cuando se vea en pantallas de dispositivos móviles.
Efectos de animación:
- Efecto de desplazamiento: aplica una animación activada por desplazamiento al bloque, incluyendo opciones de desplazamiento vertical y horizontal con controles de dirección, velocidad y desplazamiento de la ventana gráfica.
- Efecto ratón: aplica un efecto de paralaje impulsado por el movimiento del ratón al bloque.
Paso 4: Guarde los cambios
Una vez que haya terminado de configurar el bloque Productos relacionados y de personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de productos relacionados a tu plantilla de producto único! Mostrar productos relacionados es una forma probada de aumentar el valor medio de los pedidos y hacer que los clientes sigan explorando tu catálogo. Asegúrate de que tus productos estén organizados con categorías y etiquetas coherentes para que WooCommerce pueda mostrar las recomendaciones más relevantes para cada artículo.