Loop Grid 产品卡片排版指南：价格、评分、Sale Flash 一次搞定

用 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 本体调。按本文的组件顺序摆放，再把响应式列数分开设置，产品列表页会立刻变得清爽、好看、好转化。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息