Documentación de SeedProd

Documentación, Materiales de Referencia y Tutoriales para SeedProd

Valoración del Producto

El bloque Valoración del producto muestra la calificación en estrellas de un producto de WooCommerce en tus plantillas de producto único. Extrae los datos de valoración directamente de la pestaña Reseñas de cada producto, ofreciendo a los visitantes un indicador visual instantáneo de la satisfacción del cliente sin salir de la página del producto.

Este bloque está diseñado exclusivamente para usarse dentro de las plantillas de producto único. Asegúrate de tener WooCommerce instalado y de que las reseñas de productos estén habilitadas antes de usarlo. Puedes personalizar el tamaño de las estrellas, el espaciado y los colores para que coincidan con la marca de tu tienda.

Requisitos: El bloque Valoración del producto está disponible en el plan de licencia Elite. WooCommerce debe estar instalado antes de usar este bloque.

Bloque de valoración del producto mostrando una calificación por estrellas de WooCommerce en una plantilla de producto único

Añadir el bloque de valoración del producto a tus páginas

Sigue estos pasos para añadir un bloque de valoración del producto a tu plantilla de producto único de SeedProd:

Paso 1: Añadir el Bloque

En Diseño > Bloques > Etiquetas de plantilla de WooCommerce > Información adicional, arrastra y suelta el bloque Valoración del producto en la sección deseada de tu plantilla de producto único.

Arrastrando el bloque de valoración del producto a una plantilla de producto único de SeedProd

Paso 2: Configurar los Ajustes de Contenido

Una vez añadido, haz clic en el bloque de valoración del producto para abrir su configuración. En la pestaña Contenido, encontrarás las siguientes opciones en la sección Calificación por estrellas:

  • Alineación: Establece la alineación horizontal de la calificación por estrellas (Izquierda, Centro o Derecha) con controles por dispositivo para escritorio, tableta y móvil.
  • Tamaño: Establece el tamaño de los iconos de estrella usando un deslizador.
  • Espacio entre: Establece el espaciado horizontal entre estrellas individuales usando un deslizador.
Pestaña Contenido del bloque de valoración del producto mostrando la configuración de Alineación, Tamaño y Espacio entre

Paso 3: Personaliza el Diseño

En la pestaña Avanzado, puedes personalizar la apariencia visual de tu bloque de valoración del producto.

Estilos:

  • Color de la estrella: Establece el color de relleno de las estrellas activas (rellenas).
  • Color de estrella vacía: Establece el color de las estrellas no rellenas.

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.
Pestaña Avanzado del bloque de valoración del producto mostrando Estilos con la configuración de color de estrella y color de estrella vacía

Paso 4: Guarde sus Cambios

Una vez que hayas terminado de configurar el bloque Valoración del producto y personalizar su apariencia, asegúrate de guardar tu trabajo.


¡Has añadido con éxito un bloque de valoración del producto a tu plantilla de producto único! Las valoraciones por estrellas son una poderosa señal de confianza que ayuda a los clientes a tomar decisiones de compra seguras. Personaliza los colores y el tamaño de las estrellas para que la visualización de la valoración se sienta como una parte natural del diseño de tu página de producto.

Artículos Relacionados