Página de lista de productos con Loop Grid: organización de etiquetas de precio, valoración y promoción (incluidos ajustes de posición y pasos operativos)

gasto o desembolso Rejilla de bucle Al crear una página de listado de productos, el verdadero reto no es si puedes mostrar la información, sino dónde configurarla y cómo organizarla de forma ordenada. A continuación, explicaré los pasos prácticos que hay que seguir: dónde colocar el precio, la valoración y las etiquetas promocionales dentro de Elementor, y cómo gestionar las preguntas frecuentes.

1. Primero, asegúrate de que estás editando el «Elemento de bucle», no la página en sí.

La disposición de los precios, las valoraciones y las etiquetas promocionales dentro de las fichas de productos se gestiona casi en su totalidad dentro de la plantilla «Loop Item».

Ruta operativa (dos puntos de entrada comunes):

Entrada: Acceso a través de la biblioteca de plantillas

• WordPress Entre bastidores → Plantillas → Creador de temas

• localice Elementos de bucle
• Abre el que estás utilizando actualmente.

Determinar si se debe introducir el elemento de bucle: lo que está viendo es una «ficha de producto único», no el diseño completo de la página.

2. ¿Dónde se añade el precio? ¿Qué componente se utiliza?

Se requiere indicar el precio. WooCommerce gadget.

Procedimiento operativo:

• Seleccione la posición en la que desea colocar el precio dentro del elemento de bucle.
• Haga clic en la esquina superior izquierda. + Añadir componente
• Buscar y añadir Precio del producto

Acuerdos comunes:

• Coloca la valoración debajo del título y el precio debajo de la valoración.
• Coloca el precio en la «zona de conversión inferior», cerca del botón.

Configuración de estilo de precios Ubicación:

• decidirse por un candidato Precio del producto
• Izquierda → Estilo
• Ajustes: Fuente, tamaño, color, subrayado, estilo de precios original.

Si desea destacar más el precio con descuento:

• Aumentar el tamaño de la fuente de «Precio de venta».
• Precio normal Tamaño de fuente más pequeño con tachado conservado

3. ¿Dónde se añaden las valoraciones? ¿Cómo se muestran las valoraciones con estrellas y el recuento de reseñas?

El sistema de puntuación es el mismo. WooCommerce Componente.

Procedimiento operativo:

• Haga clic dentro del elemento de bucle. +
• Buscar y añadir Clasificación del producto

• Arrastra debajo del título o cerca del precio.

Ubicación de la configuración del estilo de calificación:

• decidirse por un candidato Clasificación del producto
• Derecha → Estilo
• Ajustes: Tamaño de las estrellas, tamaño del texto

Ubicación recomendada:

• Colocar debajo del titular: Ideal para destacar las recomendaciones boca a boca.
• Colocar debajo del precio: adecuado para resaltar la transacción.

Preguntas frecuentes sobre la calificación:

• Es posible que algunos productos sin reseñas no se muestren, lo que provocaría alturas de tarjetas inconsistentes.
  Solución: Mantenga un espaciado fijo para el módulo de calificación, o CSS Establecer la altura fija para el contenedor de calificación

4. ¿Cómo crear etiquetas promocionales? El método más fiable es utilizar «etiquetas de esquina con imagen».

Las etiquetas promocionales se colocan mejor como anotaciones en las esquinas de las imágenes, evitando así competir por el espacio con el precio.

Método A: Utilizar Sale Flash (etiqueta promocional)

Procedimiento operativo: Haga clic en el widget del producto.

• Senda:Estilo → Oferta flash → Oferta flash (Alternar)

2) Cómo ajustar la posición de los subíndices (sin usar Absolute)

Senda:Estilo → Oferta flash → Posición
A la derecha de «Posición» en tu captura de pantalla, hay dos pequeños iconos:

• Icono a la izquierda: Normalmente representa Arriba a la izquierda(o a la izquierda)
• Icono a la derecha: Normalmente representa Arriba a la derecha(o a la derecha)

Tócalo para alternar la alineación de la insignia a la izquierda/derecha (pueden producirse ligeras variaciones entre los diferentes temas, pero este es el control para esa posición).

Configuración del estilo de superíndice:

• Estilo → Color de fondo, Esquinas redondeadas, Fuente, Relleno

5. Diseño recomendado de la tarjeta (siga estas instrucciones para evitar confusiones)

Coloque los componentes en el elemento de bucle en este orden:

• Imagen del producto(Contenedor de imágenes)
  • Superposición: Rebajas Flash o insignia personalizada
• Título del producto(Título, dos líneas truncadas)
• Clasificación del producto(Calificación)
• Precio del producto(Precio)
• (Opcional)Texto promocional breve(Envío gratuito / Oferta de Navidad)
• Añadir a la cesta tal vez Ver producto botones

Recomendaciones de alineación:

• La alineación completa a la izquierda es más estable.
• El precio, la valoración y el botón están alineados en el mismo eje visual.

6. ¿Dónde puedo ajustar el número de columnas, el espaciado y la capacidad de respuesta en la página de la lista?

Estos pertenecen a Rejilla de bucle Configúrelo de forma independiente, no dentro del elemento de bucle.

Procedimiento operativo:

• Volver a la página de la lista de productos
• decidirse por un candidato Rejilla de bucle
• Izquierda → Diseño
• Ajustar columnas

Ajustes sensibles:

• existe Elementor Cambiar a la vista para tableta/móvil
• Establecer el número de columnas por separado
  Recomendado con frecuencia:
• Escritorio: 3-4 columnas
• Tableta: 2 columnas
• Móvil: 1-2 columnas

7. Los tres problemas tipográficos más comunes y sus soluciones

7.1 Altura inconsistente de la tarjeta

Motivos: diferencias en el número de líneas del título, presencia o ausencia de clasificaciones y longitud del texto promocional.

Solución:

• Título limitado a dos líneas y truncado.
• Permitir una altura fija en el área de calificación.
• Limita el texto promocional a una sola línea.

7.2 Índices que ocultan imágenes o desalinean

Solución:

• Coloca el superíndice dentro del contenedor de la imagen.
• Utiliza posicionamiento absoluto + superior/izquierda fijo.
• Controle el margen interior del superíndice; no lo haga demasiado grande.

7.3 Los precios y los botones están desalineados, lo que crea una apariencia desordenada.

Solución:

• Encierre la «calificación + precio + botón» dentro de un contenedor.
• Establecer el contenedor en Columna
• Establecer un espaciado uniforme para los contenedores

dar cuerda

Rejilla de bucle Precio, valoraciones, etiquetas promocionales: la clave está en Plantilla de elemento de bucleImplementación: Utiliza el precio del producto para fijar los precios, la valoración del producto para las valoraciones con estrellas y da prioridad a las superposiciones de imágenes (flash de rebajas o texto personalizado) para las etiquetas promocionales. Ajusta el número de columnas y el espaciado directamente en el componente Loop Grid. Organiza los componentes en el orden que se indica aquí y, a continuación, configura por separado los ajustes de las columnas adaptables. Tu página de listado de productos quedará al instante más limpia, más atractiva visualmente y más propicia para las conversiones.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres