用 Loop Grid 做产品列表页，真正难点不是“能不能显示”，而是“在哪里设置、怎么排得整齐”。下面按实际操作路径讲清楚：你在 Elementor 里分别去哪里放价格、评分、促销标签，以及常见问题怎么处理。
1. 先确认你编辑的是“Loop Item”，不是页面本身
产品卡片里价格、评分、促销标签的排版，几乎都在 “Loop Item（循环模板）”里完成。
操作路径（两种常见入口）：
入口 ：从模板库进入
WordPress 后台 → Templates / 模板 → theme builder
找到 Loop Items / 循环项
打开你正在使用的那一个
判断是否进入 Loop Item：你看到的是一张“单个商品卡片”，不是整页布局。
2. 价格在哪里加？用哪个组件？
价格显示要用 WooCommerce 的小工具。
操作步骤：
在 Loop Item 里选择你要放价格的位置
点击 左上角 + 添加组件
搜索并添加 Product Price（产品价格）
常见排法：
标题下面放评分，评分下面放价格
价格放“底部转化区”，靠近按钮
价格样式设置位置：
选中 Product Price
左侧 → Style / 样式
调整：字体、大小、颜色、划线原价样式
如果你想“折后价更醒目”：
让 Sale price 字号更大
Regular price 字号更小并保留划线
3. 评分在哪里加？怎么显示星星+评价数？
评分同样用 WooCommerce 组件。
操作步骤：
在 Loop Item 里点击 +
搜索并添加 Product Rating（产品评分）
拖到标题下方或价格附近
评分样式设置位置：
选中 Product Rating
右侧 → Style
调整：星星大小、文字大小
建议位置：
放标题下方：适合强调口碑
放价格下方：适合强调成交
评分常见问题：
有些产品没评价会不显示，导致卡片高度不一致
解决办法：给评分模块留固定间距，或在 CSS 里给评分容器固定高度
4. 促销标签怎么做？最稳的是“图片角标”
促销标签最推荐放在图片上做角标，这样不和价格抢空间。
方法 A：用 Sale Flash（促销标）
操作步骤：点击 product 小部件
路径：Style → Sale Flash → Sale Flash（开关）
2）角标位置怎么调（不用 Absolute）
路径：Style → Sale Flash → Position
你截图里 Position 右侧有两个小图标：
左边图标：通常代表 左上（或左侧）
右边图标：通常代表 右上（或右侧）
你点它就能换角标靠左/靠右（不同皮肤会略有差异，但就是这个位置控制）。
角标样式设置：
Style → 背景色、圆角、字体、内边距
5. 推荐的卡片结构（照着摆就不乱）
在 Loop Item 里按这个顺序放组件：
Product Image（图片容器）
里面叠加：Sale Flash 或自定义角标
Product Title（标题，两行截断）
Product Rating（评分）
Product Price（价格）
（可选）短促销文案（Free Shipping / Christmas Deal）
Add to Cart 或 View Product 按钮
对齐建议：
全部左对齐更稳
价格、评分、按钮在同一条视觉轴上
6. 列表页列数、间距、响应式在哪里调？
这些属于 Loop Grid 本身设置，不在 Loop Item。
操作步骤：
回到产品列表页
选中 Loop Grid
左侧 → Layout / 布局
调整 Columns（列数）
响应式设置：
在 Elementor 顶部切换到 Tablet/Mobile
分别设置列数
常见推荐：
桌面：3–4 列
平板：2 列
手机：1–2 列
7. 最常见的三个排版问题与解决思路
7.1 卡片高度不一致
原因：标题行数不同、评分有无不同、促销文字长度不同
解决：
标题限制 2 行并截断
给评分区域预留固定高度
促销文案控制在一行
7.2 角标把图片挡住或跑位
解决：
角标放在图片容器内
用 Absolute 定位 + 固定 Top/Left
控制角标内边距，别太大
7.3 价格和按钮不对齐，看着乱
解决：
用一个容器把“评分+价格+按钮”包起来
容器设为 Column
给容器设置统一间距
结尾
Loop Grid 的价格、评分、促销标签，关键都在 Loop Item 模板里完成：价格用 Product Price，评分用 Product Rating，促销标签优先用图片角标（Sale Flash 或自定义文字），列表列数和间距再回到 Loop Grid 本体调。按本文的组件顺序摆放，再把响应式列数分开设置，产品列表页会立刻变得清爽、好看、好转化。