El bloque de Productos Mejor Valorados te permite mostrar tus productos de WooCommerce mejor valorados en una cuadrícula navegable. Al mostrar productos que han obtenido excelentes reseñas de los clientes, puedes generar confianza con los nuevos visitantes y guiar a los compradores hacia artículos que ya han demostrado ser populares entre tu audiencia.
Puedes controlar cuántos productos aparecen, cómo se ordenan y aplicar filtros opcionales utilizando los controles de consulta. La pestaña Avanzado te da control total sobre la tipografía de la cuadrícula, los estilos de los botones y la presentación de las imágenes del producto para que coincidan con la marca de tu tienda.
Añadir el bloque de Productos Mejor Valorados a tus páginas
Sigue estos pasos para añadir un bloque de Productos Mejor Valorados a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques > WooCommerce, arrastra y suelta el bloque Productos Mejor Valorados en la sección deseada de tu página.
Paso 2: Configurar Ajustes
Una vez añadido, haz clic en el bloque de Productos Mejor Valorados para abrir su configuración. En la pestaña Configuración, las opciones se organizan en dos secciones.
Contenido:
- Columnas: Establece el número de columnas de productos a mostrar en la cuadrícula.
- Paginación: Activa para habilitar la paginación, dividiendo la cuadrícula de productos en varias páginas.
- Mostrar número de artículos: Activa para mostrar el número total de productos mostrados.
- Mostrar ordenación por: Activa para mostrar un menú desplegable de ordenación para que los visitantes puedan reordenar los productos por criterios como precio, popularidad o valoración.
- Límite: Establece el número máximo de productos a mostrar. Usa
-1para mostrar todos los productos mejor valorados que coincidan (por defecto).
Consulta:
- Tipo: Elige qué productos mostrar: Todos los productos, Productos destacados, Productos en oferta, Productos más vendidos, Productos recientes o Productos Mejor Valorados. Este bloque muestra por defecto Productos Mejor Valorados.
- Ordenar por: Establece cómo se ordenan los productos — por Fecha, Título, Precio, Popularidad, Valoración, Aleatorio u Orden de menú.
- 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 Mejor Valorados. Las opciones se organizan en tres secciones.
Estilos:
- Alineación: Establece la alineación horizontal de la cuadrícula de productos — Izquierda, Centro o Derecha — con controles por dispositivo para escritorio, tableta y móvil.
- 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 Mejor Valorados y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de Productos Mejor Valorados a tu página! Mostrar tus productos mejor reseñados es una forma poderosa de generar prueba social y ayudar a los compradores indecisos a sentirse seguros al comprar. Para obtener mejores resultados, asegúrate de que tus productos tengan suficientes reseñas para reflejar con precisión la calidad, y considera combinar este bloque con una visualización de calificación por estrellas para reforzar la credibilidad de cada recomendación.