产品（网格或轮播）

产品（网格或轮播）元素以网格、列表或轮播形式展示 WooCommerce 产品。您可以根据来源选择产品，按分类法筛选，控制其排序，并自定义产品卡片设计。

该元素在 Gutenberg、Elementor 和 WPBakery 中均可用。不同编辑器中的控件分组有所不同，但主要设置及其行为是相同的。

添加产品元素

1. 使用您的页面编辑器编辑所需页面或布局。
2. 添加产品（网格或轮播）元素。
3. （可选）输入元素标题，然后按照下文所述配置产品查询和布局。

选择要显示的产品

数据源决定产品的初始集合：

• 所有产品 — 显示不应用特殊产品状态的产品。
• 特色产品 — 显示在仪表盘 → 产品 → 所有产品中标记了“特色”星标的产品。
• 促销产品 — 显示具有有效促销价的产品。
• 新产品 — 显示当前具有 WoodMart“新品”状态的产品。
• 畅销产品 — 按购买次数对产品进行排序。
• 评分最高产品 — 显示客户评分最高的产品。
• ID 列表 — 允许您在仅包含中选择特定产品。
• 最近浏览的产品 — 显示当前访客浏览过的产品。

当该元素用于 WoodMart 自定义布局时，可能会有额外的上下文相关来源：单产品布局中的相关产品和追加销售，以及购物车布局中的交叉销售。

对于最近浏览的产品，当使用整页缓存时，请启用页面加载时通过 AJAX 更新。这可以防止一个访客缓存的最近浏览列表显示给另一个访客。

可以在 WoodMart 产品设置中使用永久“新品”状态或将产品标记为“新品”至某个日期来分配新品状态。您也可以在主题设置 → 商店 → 将产品标记为“新品”一段时间下自动标记最近创建的产品。“新品”标签的可见性并不控制产品是否包含在新产品数据源中。

筛选和排序产品

• 分类法 — 按产品类别、标签、品牌或全局属性术语筛选所选来源。某些编辑器会将这些显示为单独的控件。
• 查询类型 — 使用或匹配任何选定的分类术语，或使用与要求所有选定的术语都匹配。
• 排序依据 — 按日期、ID、作者、标题、最后修改日期、评论数、菜单顺序、价格、元值或随机顺序排序。
• 排序顺序 — 当所选数据源支持手动排序时，使用升序或降序。
• 偏移量 — 跳过查询开始处指定数量的产品。
• 元键 — 当按元值或元值数字排序时必填。
• 隐藏缺货产品 — 从该元素中移除不可用的产品。
• 排除 — 从结果中移除选定的产品。

不适用于所选数据源的控件会自动隐藏。例如，“畅销产品”和“评分最高产品”已经定义了自己的排序方式。

选择布局

• 网格 — 显示响应式列。您可以为桌面端、平板端和移动端配置 1–6 列。
• 列表 — 在垂直列表中显示产品，并带有独立的响应式间距控件。
• 轮播 — 在水平滑块中显示产品，并带有响应式幻灯片和导航控件。

对于网格和列表布局，每页项目数设置产品的初始显示数量。可用的分页模式在不同编辑器之间可能略有不同，包括加载更多按钮、无限滚动、AJAX 箭头和传统页面链接。当仅应显示初始产品时，请禁用分页。

网格布局还提供了用于较大网格项的控件，允许选定的产品占据更多空间。间距控制网格和轮播布局的响应式间隙。

自定义产品卡片

打开元素的设计或样式设置以配置产品卡片：

• 产品布局 — 继承全局主题设置布局，使用预定义的产品卡片布局之一，或应用自定义的产品循环项布局。
• 图像分辨率 — 选择已注册的图像尺寸。选择“自定义”以设置特定的宽度或高度。
• 圆角和产品配色方案 — 调整卡片形状和文本配色方案。
• 促销倒计时 — 当产品的促销价有结束日期时显示倒计时。
• 库存进度条 — 以进度条形式显示已售和剩余库存值。
• 产品图库 — 让访客直接在产品循环中浏览产品图库图片。
• 产品边框、产品背景和产品阴影 — 增加产品卡片之间的视觉分隔。

当所选编辑器和产品布局支持时，突出显示产品会创建一个促销网格，其中一些产品卡片会被放大以增强视觉强调效果。

配置轮播

当布局设置为轮播时，会出现额外的控件：

• 每视图幻灯片数 — 设置桌面端、平板端和移动端的可见产品数。支持 1 到 8 的值，包括半级值。
• 按页滚动 — 一次移动一个完整的可见组，而不是一次移动一个产品。
• 居中模式 — 将活动产品居中，仅在禁用“按页滚动”时可用。
• 滑块循环 — 从最后一张幻灯片继续回到第一张。
• 自动高度 — 根据活动幻灯片内容调整轮播高度。
• 滑块自动播放和滑块速度 — 启用自动移动并设置其时间。
• 滚动时初始化轮播 — 延迟轮播初始化，直到访客接近该元素。
• 禁用溢出 — 裁剪超出元素容器的轮播内容。
• 箭头 — 显示或隐藏上一个/下一个按钮，并配置其位置和响应式偏移。
• 分页和滚动条 — 配置额外的轮播导航指示器。
• 同步 — 关联两个或多个轮播，使它们一起导航。

在产品网格演示中查看可用的布局和分页示例。