Page de liste de produits utilisant Loop Grid : organisation des étiquettes de prix, de notation et de promotion (y compris les paramètres de positionnement et les étapes opérationnelles)

dépense ou frais Grille de boucles Lors de la création d'une page de liste de produits, le véritable défi n'est pas de savoir si vous pouvez afficher les informations, mais plutôt où les configurer et comment les organiser de manière claire. Ci-dessous, je vais vous expliquer les étapes pratiques à suivre : où placer le prix, la note et les balises promotionnelles dans Elementor, et comment traiter les questions fréquemment posées.

1. Assurez-vous d'abord que vous modifiez bien l'élément « Loop Item » et non la page elle-même.

La disposition des prix, des évaluations et des étiquettes promotionnelles dans les fiches produits est presque entièrement gérée dans le modèle « Loop Item ».

Chemin opérationnel (deux points d'entrée communs) :

Entrée : accès via la bibliothèque de modèles

• WordPress Backstage → Modèles → Créateur de thèmes

• localiser Éléments en boucle
• Ouvrez celui que vous utilisez actuellement.

Déterminer s'il faut entrer dans la boucle Élément : ce que vous voyez est une « fiche produit unique », et non la mise en page complète.

2. Où le prix est-il ajouté ? Quel composant est utilisé ?

Affichage des prix obligatoire WooCommerce gadget.

Procédure d'exploitation :

• Sélectionnez l'emplacement où vous souhaitez placer le prix dans l'élément de boucle.
• Cliquez dans le coin supérieur gauche. + Ajouter un composant
• Rechercher et ajouter Prix du produit

Dispositions courantes :

• Placez la note sous le titre et le prix sous la note.
• Placez le prix dans la « zone de conversion inférieure », près du bouton.

Paramètres de style de prix Emplacement :

• choisir un candidat Prix du produit
• Gauche → Style
• Ajustements : police, taille, couleur, soulignement, style de prix d'origine

Si vous souhaitez mettre davantage en avant le prix réduit :

• Augmenter la taille de la police de « Prix soldé »
• Prix normal Police plus petite avec barré conservé

3. Où sont ajoutées les notes ? Comment les notes par étoiles et le nombre d'avis sont-ils affichés ?

Le système de notation est le même. WooCommerce Composant.

Procédure d'exploitation :

• Cliquez dans l'élément de boucle. +
• Rechercher et ajouter Evaluation du produit

• Faites glisser sous le titre ou près du prix.

Emplacement des paramètres de style de notation :

• choisir un candidat Evaluation du produit
• À droite → Style
• Réglages : taille des étoiles, taille du texte

Emplacement recommandé :

• À placer sous le titre : Idéal pour mettre en avant les recommandations de bouche à oreille.
• Placez sous le prix : convient pour mettre en valeur la transaction.

Foire aux questions sur la notation :

• Certains produits sans avis peuvent ne pas être affichés, ce qui entraîne des hauteurs de carte incohérentes.
  Solution : Maintenir un espacement fixe pour le module de notation, ou CSS Définissez la hauteur fixe du conteneur de notation.

4. Comment créer des étiquettes promotionnelles ? La méthode la plus fiable consiste à utiliser des « étiquettes d'angle pour images ».

Les étiquettes promotionnelles sont mieux placées sous forme d'annotations dans les coins des images, ce qui évite la concurrence pour l'espace avec le prix.

Méthode A : Utiliser Sale Flash (étiquette promotionnelle)

Procédure d'utilisation : cliquez sur le widget du produit.

• Trajectoire :Style → Vente flash → Vente flash (Basculer)

2) Comment ajuster la position des indices (sans utiliser Absolute)

Trajectoire :Style → Vente flash → Position
À droite de « Position » dans votre capture d'écran, il y a deux petites icônes :

• Icône à gauche : représente généralement En haut à gauche(ou à gauche)
• Icône à droite : représente généralement En haut à droite(ou à droite)

Appuyez dessus pour basculer l'alignement du badge à gauche/à droite (de légères variations peuvent apparaître selon les différents thèmes, mais il s'agit bien du contrôle pour cette position).

Paramètres du style des exposants :

• Style → Couleur d'arrière-plan, Coins arrondis, Police, Remplissage

5. Disposition recommandée des cartes (suivez cette disposition pour éviter toute confusion)

Placez les composants dans l'élément Loop dans cet ordre :

• Image du produit(Conteneur d'image)
  • Superposition : Badge Flash ou personnalisé
• Titre du produit(Titre, tronqué après deux lignes)
• Evaluation du produit(Évaluation)
• Prix du produit(Prix)
• (optionnel)Texte promotionnel court(Livraison gratuite / Offre de Noël)
• Ajouter au panier peut-être Voir le produit boutons

Recommandations d'alignement :

• L'alignement à gauche est plus stable.
• Le prix, la note et le bouton sont alignés sur le même axe visuel.

6. Où puis-je régler le nombre de colonnes, l'espacement et la réactivité sur la page de liste ?

Ceux-ci appartiennent à Grille de boucles Configurez indépendamment, pas dans l'élément Loop.

Procédure d'exploitation :

• Retour à la page de la liste des produits
• choisir un candidat Grille de boucles
• Gauche → Mise en page
• Ajuster les colonnes

Paramètres réactifs :

• existent Elementor Passer à l'affichage tablette/mobile
• Définir le nombre de colonnes séparément
  Souvent recommandé :
• Ordinateur de bureau : 3 à 4 colonnes
• Tablette : 2 colonnes
• Mobile : 1 à 2 colonnes

7. Les trois problèmes de composition les plus courants et leurs solutions

7.1 Hauteur de carte incohérente

Raisons : différences dans le nombre de lignes de titre, présence ou absence de notes, et longueur du texte promotionnel.

Solution :

• Titre limité à deux lignes et tronqué
• Autoriser une hauteur fixe dans la zone d'évaluation
• Limitez le texte promotionnel à une seule ligne.

7.2 Indices masquant les images ou provoquant un désalignement

Solution :

• Placez l'exposant dans le conteneur d'image.
• Utilisez le positionnement absolu + haut/gauche fixe
• Contrôlez la marge intérieure de l'exposant ; ne la rendez pas trop grande.

7.3 Les prix et les boutons sont mal alignés, ce qui donne un aspect désordonné.

Solution :

• Placez la « note + prix + bouton » dans un conteneur.
• Définir le conteneur sur Colonne
• Définir un espacement uniforme pour les conteneurs

remonter

Grille de boucles Prix, évaluations, balises promotionnelles : la clé réside dans Modèle d'élément de boucleMise en œuvre : utilisez le prix du produit pour la tarification, la note du produit pour les notes par étoiles et donnez la priorité aux superpositions d'images (flash promotionnel ou texte personnalisé) pour les étiquettes promotionnelles. Ajustez le nombre de colonnes et l'espacement directement dans le composant Loop Grid. Disposez les composants dans l'ordre indiqué ici, puis configurez séparément les paramètres de réactivité des colonnes. Votre page de liste de produits deviendra instantanément plus claire, plus attrayante visuellement et plus propice à la conversion.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.