The Top Rated Products block allows you to display your highest-rated WooCommerce products in a browsable grid. By surfacing products that have earned strong customer reviews, you can build trust with new visitors and guide shoppers toward items that have already proven popular with your audience.

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.

Requirements: The Top Rated Products block is available in the Elite license plan.

---

Adding the Top Rated Products Block to Your Pages

Follow these steps to add a Top Rated Products block to your SeedProd page:

Paso 1: Añadir el Bloque

Under Design > Blocks > WooCommerce, drag and drop the Top Rated Products block into the desired section of your page.

Paso 2: Configurar Ajustes

Once added, click on the Top Rated Products block to open its settings. In the Settings tab, settings are organized into two sections.

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.
• Limit: Set the maximum number of products to display. Use -1 to show all matching top-rated products (default).

Consulta:

• Type: Choose which products to display — All Products, Featured Products, Sale Products, Best Selling Products, Recent Products, or Top Rated Products. This block defaults to Top Rated Products.
• 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

In the Advanced tab, you can customize the visual appearance of your Top Rated Products block. Settings are organized into three sections.

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

Once you have finished configuring the Top Rated Products block and customizing its appearance, make sure to save your work.

---

You’ve successfully added a Top Rated Products block to your page! Featuring your best-reviewed products is a powerful way to build social proof and help undecided shoppers feel confident about purchasing. For best results, make sure your products have enough reviews to accurately reflect quality, and consider pairing this block with a star rating display to reinforce the credibility of each recommendation.