WoodMart 产品列表页与分类页设置

一、认识产品归档（Product Archive）设置入口

在 WoodMart 中，商店页（Shop Page）、产品分类页（Product Category Page）、产品标签页（Product Tag Page）和产品属性归档页（Product Attribute Archive）统称为「产品归档页面」。这些页面的布局和展示规则不在 WordPress 原生设置里，而是集中在主题设置的一个专门板块中。

🧭 1.1 找到设置入口

所有产品归档页的全局设置都在同一个位置：

1. 登录 WordPress 后台。
2. 在顶部管理栏点击 WoodMart → Theme Settings（主题设置）。
3. 在左侧设置面板中找到 Product archive（产品归档）板块。

💡 这一个板块里的设置会同时影响商店页和所有产品分类页。也就是说，你在 Product archive 里改了列数，商店页和分类页会同时生效——除非你用主题预设（Presets）功能为特定分类单独设置（后面会讲到）。

⚖️ 1.2 Product archive 与 General → Layout 的区别

这是一个很多新手容易混淆的地方。WoodMart 有两处侧边栏设置：

• Theme Settings → General → Layout：控制全站默认侧边栏位置，作用于普通页面和博客归档页，是一个全局兜底设置。
• Theme Settings → Product archive → Sidebar：专门控制 WooCommerce 产品归档页的侧边栏，包括商店页、分类页、标签页和属性归档页。

在产品归档页上，Product archive → Sidebar 的优先级高于 General → Layout。如果你发现商店页的侧边栏位置不对，先检查 Product archive 板块里的设置。

⚠️ 如果你导入了 WoodMart 演示数据后，发现 Product archive 里的设置保存了但前台没变化，很可能是演示数据启用了自定义的归档布局模板（Custom Archive Layout）。前往 Layouts 菜单，找到产品归档布局模板进行编辑或移除其中的覆盖元素，主题设置才会正常生效。

---

二、商店页布局设置：网格、列表与边栏

🔢 2.1 每页产品数量（Products per page）

控制每次加载显示多少个产品。设置路径：Theme Settings → Product archive → Product grid。

找到 Products per page 选项，默认值通常是 12。你可以根据产品总数和页面节奏来调整：

• 产品较少（50 个以内）：建议设 8–12，页面不会显得空。
• 产品较多（100 个以上）：建议设 12–24，减少翻页次数，但要注意页面加载速度。
• 想一次性显示所有产品不翻页：设为 -1。

⚠️ 设为 -1 会一次性加载全部产品。产品超过 100 个时不建议这么做，会严重影响页面加载速度。

🔲 2.2 产品网格列数（Products columns）

设置路径：Theme Settings → Product archive → Product grid。

找到 Products columns 选项，可以选择桌面端每行显示的产品列数。常见选择：

• 3 列：产品图片较大，适合图片细节重要的品类，如服装、家具。
• 4 列：最常见的电商布局，信息密度和图片大小平衡好，适合大多数品类。
• 5–6 列：图片较小但信息密度高，适合配件、数码小件等单价较低、SKU 较多的品类。

💡 WoodMart 的产品分类展示（Category display）列数默认跟随产品列数设置。如果你想让分类展示用更多列而产品用较少列，需要通过主题预设（Presets）功能单独配置，这一块我们在第三节的分类页设置中详细讲。

↔️ 2.3 产品间距（Space between）

设置路径：Theme Settings → Product archive → Product grid。

找到 Space between 选项，控制产品卡片之间的间距（单位：像素 px）。默认值通常为 20px。

• 间距小（10–15px）：页面紧凑，适合列数多的情况。
• 间距大（30–40px）：页面透气，适合列数少、图片大的布局。

调完列数和间距后，保存设置，到前台刷新商店页查看效果。如果前台没变化，先清一下缓存插件和浏览器缓存。

📐 2.4 侧边栏位置（Sidebar position）

设置路径：Theme Settings → Product archive → Sidebar。

找到 Sidebar position 选项，有三种选择：

选项	说明	适用场景
Off（无侧边栏）	产品区域占满整页宽度	产品数量少、不需要筛选；或使用顶部筛选区替代
Left（左侧栏）	筛选和导航在左，产品在右	中文/亚洲市场常见布局，用户视线从左到右
Right（右侧栏）	产品在左，筛选和导航在右	欧美市场常见布局，与亚马逊等主流电商一致

选择后保存，前台商店页会立即调整布局。

💡 如果选了 Left 或 Right 但前台没有侧边栏内容，说明对应的侧边栏小工具区域还没有添加内容。前往 外观 → 小工具（Appearance → Widgets），找到 Shop page widget area（商店页小工具区域），往里面添加筛选、分类、搜索等小工具。这一步的具体操作可以回顾第四课。

📥 2.5 Off-canvas 侧边栏设置

Off-canvas sidebar（离屏侧边栏）是 WoodMart 的一个特色功能：在特定设备上隐藏侧边栏，用户点击一个按钮后才以滑出面板的方式展开。

设置路径：Theme Settings → Product archive → Sidebar，找到 Off-canvas 相关选项。WoodMart 允许你按设备分别开启：

• Off-canvas sidebar for desktop（桌面端）：开启后桌面端侧边栏不再常驻显示，改为点击「Filters」按钮弹出。
• Off-canvas sidebar for tablet（平板端）：同上，平板端用按钮触发。
• Off-canvas sidebar for mobile（移动端）：默认建议开启，手机屏幕小，侧边栏常驻会挤占产品展示空间。

💡 推荐配置：桌面端关闭 Off-canvas（侧边栏常驻显示），平板和移动端开启 Off-canvas（用按钮触发滑出）。这样桌面端浏览体验完整，移动端也不会被侧边栏挤占空间。

🔍 2.6 商店筛选区（Shop filters）

WoodMart 提供了一个独立于侧边栏的筛选展示区域，位于面包屑导航和产品网格之间。设置路径：Theme Settings → Product archive → Shop filters。

找到 Show shop filters widget area above products（在产品上方显示筛选小工具区域）选项，开启后会在产品列表上方出现一个新的小工具区域。

这个功能适合以下场景：

• 你选了 Off（无侧边栏）布局，但仍需要筛选功能。
• 你希望筛选条件更醒目，放在产品上方而不是侧边。
• 移动端体验更好——用户不需要点按钮展开侧边栏就能看到核心筛选项。

开启后，前往 外观 → 小工具，找到 Shop filters（商店筛选区）小工具区域，往里面添加筛选小工具。这个区域和商店页侧边栏是独立的两个区域，可以分别配置不同内容。

还有一个选项 Shop filters area always opened（筛选区始终展开）：开启后筛选区默认展开显示；关闭则折叠为按钮，点击后展开。移动端建议关闭此项，让用户按需展开。

🔀 2.7 网格/列表视图切换（Product grid/list switching）

WoodMart 支持让前台用户自行切换网格视图（Grid View）和列表视图（List View）。设置路径：Theme Settings → Product archive → Product grid。

找到 Product grid switching（产品网格切换）选项并开启。开启后，产品列表页右上角会出现两个小图标——网格图标和列表图标，用户点击即可切换。

两种视图的区别：

• 网格视图（Grid）：产品卡片以网格排列，图片为主，信息精简。适合快速浏览、对比外观。
• 列表视图（List）：产品以横向列表排列，图片在左、信息在右。信息更完整，适合需要阅读产品描述的场景。

💡 跨境电商独立站建议默认开启此功能。不同用户有不同浏览习惯，让用户自己选比替他们决定更好。默认展示网格视图即可。

🖱️ 2.8 产品悬停效果（Hover effect）

产品悬停效果是指鼠标移到产品卡片上时触发的视觉交互。设置路径：Theme Settings → Product archive → Product grid。

找到 Hover effect（悬停效果）选项，WoodMart 提供多种风格可选。常见的几类风格（选项名称以实际版本界面为准）：

风格类型	说明
简洁按钮型	悬停时显示一个按钮，点击进入产品详情页。最干净的风格
快捷图标签	悬停时显示快捷操作图标，如加入购物车、快速查看、心愿单、对比
完整信息型	悬停时展开产品简短描述和更多信息
快速购买型	悬停时直接弹出购买面板，无需进入详情页

选择建议：

• 新站、产品较简单：用简洁按钮型，干净不杂乱。
• 产品丰富、已配置心愿单和对比功能：用快捷图标型，功能入口多。
• 想缩短购买路径：用快速购买型，但需要变体产品的属性配置完善。

🎨 2.9 产品卡片背景与边框

设置路径：Theme Settings → Product archive → Product grid。

找到 Product card background（产品卡片背景）选项。开启后每个产品卡片会有一层背景色，关掉则产品卡片直接融入页面背景，视觉上更简洁。

同区域还有 Product card border（产品卡片边框）选项，开启后产品卡片周围显示细线边框。背景和边框可以组合使用：

• 开背景 + 开边框：卡片感强，适合浅色页面背景。
• 关背景 + 关边框：极简风格，产品图片直接展示，留白为主。
• 开背景 + 关边框：卡片之间有区分但不生硬，最均衡的选择。

---

三、产品分类页模板设置

🔗 3.1 分类页与商店页的共享设置

前面在 Product archive 板块做的所有设置（列数、间距、侧边栏、悬停效果等），默认同时作用于商店页和产品分类页。也就是说，你在第二节配置好商店页布局后，分类页的基本布局已经就绪了。

分类页需要单独设置的，主要是「页面标题区域」和「分类专属元素」。

🖼️ 3.2 分类页标题背景（Category header background）

产品分类页的标题栏可以设置独立的背景图片，让不同分类有视觉区分。设置路径：Theme Settings → Product archive → Page title。

找到 Category header background（分类页标题背景）选项，上传一张背景图片。这张图片会作为所有产品分类页标题栏的统一背景。

如果你想为不同分类设置不同的标题背景图，需要使用主题预设（Presets）功能：

1. 进入 Theme Settings → Presets（预设）。
2. 点击「Add new preset」新建一个预设。
3. 在预设条件（Preset conditions）中，选择 Product Category，然后指定具体的产品分类。
4. 在该预设中修改 Page Title 的背景图片设置。
5. 保存预设。

这样，指定的分类页会显示专属的标题背景，其他分类页仍使用全局默认背景。

🧭 3.3 分类标题下方展示分类导航（Categories in page title）

WoodMart 支持在产品归档页的标题下方自动展示产品分类导航条，用户点击分类名称即可无刷新切换分类。设置路径：Theme Settings → Product archive → Page title。

找到以下两个选项并开启：

• Shop Title（商店标题）：显示页面标题。
• Categories in page title（标题中的分类导航）：在标题下方显示产品分类列表。

开启后，商店页和分类页的标题下方会出现一行分类链接，点击后通过 AJAX（异步加载）无刷新切换页面内容，浏览体验流畅。

⚠️ 如果你使用了自定义的产品归档布局模板（Custom Layout），需要在模板中添加 Page Title 元素才能正常显示。前往 Layouts 菜单找到归档模板，用 Elementor 编辑，搜索并添加 Page Title 元素。

🏷️ 3.4 产品分类图标（Category icons）

WoodMart 支持为每个产品分类设置图标，在分类展示区块、菜单等位置显示。设置方式不是在 Theme Settings 里，而是在每个分类的编辑页面：

1. 进入 产品 → 分类（Products → Categories）。
2. 找到要设置图标的分类，点击编辑。
3. 在分类编辑页面底部找到 Category icon（分类图标）字段。
4. 上传或选择一个图标图片。建议使用透明背景的 PNG 或 SVG 格式，尺寸 32×32 像素左右。
5. 保存。

设置完成后，该分类在产品列表页的分类展示区块、菜单等位置会自动显示对应图标。

💡 分类图标不是必须设置的，但对用户体验有帮助——尤其是产品分类多、名称相近时，图标能让用户更快定位。如果产品分类超过 10 个，建议至少为一级分类设置图标。

📣 3.5 分类页添加 Banner（横幅内容）

除了标题背景图，WoodMart 还支持在分类页顶部添加自定义 Banner 内容，比如促销信息、品牌故事、选购指南等。

操作方式：

1. 进入 HTML Blocks（HTML 区块），新建一个 HTML Block，用 Elementor 编辑你想要的 Banner 内容。
2. 进入 产品 → 分类，编辑目标分类。
3. 在分类编辑页面找到 Category banner（分类横幅）或 Extra content（额外内容）字段。
4. 选择你创建的 HTML Block。
5. 保存。

这样该分类页会在产品列表上方展示你设计的 Banner 内容。不同分类可以挂不同的 HTML Block，实现个性化展示。

---

四、分页与快速查看配置

📄 4.1 分页方式（Pagination type）

分页决定了用户如何浏览超出「每页产品数量」之后的产品。设置路径：Theme Settings → Product archive → Product grid。

找到 Pagination type（分页方式）选项，有三种选择：

分页方式	说明	适用场景
Default（默认分页）	底部显示页码导航，如「1 2 3 … Next」	产品数量适中（50–200 个），用户可能需要跳页
Load more button（加载更多按钮）	底部显示一个「Load More」按钮，点击后 AJAX 加载下一批产品并追加到列表底部	产品较多，希望用户持续浏览不中断
Infinite scroll（无限滚动）	用户滚动到页面底部时自动加载下一批产品，无需点击	移动端为主、产品量大（200+），类似社交媒体的浏览体验

选择建议：

• 跨境电商独立站，桌面端为主：用 Default 或 Load more button，用户对这两种方式最熟悉。
• 移动端流量占比高：用 Infinite scroll 或 Load more button，减少操作步骤。
• 产品总量超过 500 个：用 Load more button 比 Infinite scroll 更可控，避免无限滚动导致页面过长、性能下降。

⚠️ 使用 Load more button 或 Infinite scroll 时，需要确保 WoodMart 的 AJAX 功能正常。如果点击「Load More」没反应，检查以下几点：
– 是否有缓存插件（如 WP Rocket、LiteSpeed Cache）阻止了 AJAX 请求。将 AJAX 相关的 JS 文件加入缓存排除名单。
– 是否修改过固定链接（Permalink）结构。某些自定义 URL 重写规则可能导致 AJAX 请求返回 404。进入 设置 → 固定链接，点击「保存更改」刷新链接结构。
– 是否有安全插件（如 Wordfence）拦截了 AJAX 请求。

🔧 4.2 分页样式微调

在 Product grid 区域还有一些分页相关的附加选项：

• Products per page links（每页产品数切换链接）：开启后前台显示「Show 12 / 24 / 36」等链接，用户可自行选择每页显示数量。如果你希望用户能控制浏览节奏，建议开启。
• Show results count（显示结果数量）：开启后在产品列表上方显示「Showing 1–12 of 48 results」，让用户了解当前浏览位置和产品总量。建议开启，有助于提升浏览信心。

👁️ 4.3 快速查看（Quick View）功能

快速查看是 WoodMart 的一个重要电商功能：用户在产品列表页悬停或点击时，弹出一个轻量级窗口，展示产品主图、价格、简短描述、属性选择和加入购物车按钮，无需跳转到产品详情页。

设置路径：Theme Settings → Shop → Quick view（快速查看是 Shop 板块下的独立子项）。

找到快速查看的启用开关并开启。开启后：

• 产品卡片悬停时会出现一个「眼睛」图标，点击即可弹出快速查看窗口。
• 窗口内容来自产品详情页的精简版，包括主图轮播、标题、价格、简短描述、加入购物车按钮。
• 支持在窗口内直接选择产品属性（如颜色、尺码）并加入购物车。

💡 快速查看对转化率有明显帮助。用户在不离开浏览页面的情况下就能了解产品核心信息并下单，减少了页面跳转带来的流失。跨境电商独立站强烈建议开启此功能。

快速查看窗口中显示哪些内容（比如是否显示产品评分、SKU 等），同样在 Theme Settings → Shop → Quick view 中调整。

🛒 4.4 加入购物车行为（AJAX add to cart）

在产品列表页点击「加入购物车」时的行为，也在 Product archive 板块中配置。设置路径：Theme Settings → Product archive → Product grid。

找到 AJAX add to cart（AJAX 加入购物车）选项并开启。开启后，用户点击「加入购物车」按钮时，商品会通过 AJAX 方式加入购物车，页面不刷新，购物车图标数量实时更新。

同时还有一个 AJAX shop（AJAX 商店）选项：开启后，筛选、排序、分页等操作全部通过 AJAX 完成，不刷新页面。建议同时开启这两个选项，让整个产品列表页的交互完全无刷新，体验更流畅。

⚠️ AJAX add to cart 可能与某些自定义表单插件冲突。如果加入购物车后页面无反应，尝试关闭 AJAX add to cart 看是否恢复正常，然后排查冲突插件。

---

五、移动端产品列表适配

📱 5.1 移动端列数自动调整

WoodMart 会根据屏幕宽度自动调整产品网格的列数，不需要你手动设置移动端列数。默认行为：

• 桌面端（≥ 1025px）：按 Products columns 设置显示（如 4 列）。
• 平板端（768px–1024px）：自动调整为 3 列（或跟随桌面设置）。
• 手机端（≤ 767px）：自动调整为 1–2 列，取决于产品图片比例和卡片内容量。

💡 你不需要为移动端单独设置列数。WoodMart 的响应式布局会自动处理。但你需要到移动端实际预览，确认产品卡片在 1–2 列时信息展示是否完整、图片是否清晰。

🎛️ 5.2 移动端侧边栏与筛选按钮

前面第二节提到的 Off-canvas sidebar 设置，在移动端尤为重要。推荐配置：

1. 进入 Theme Settings → Product archive → Sidebar。
2. 开启 Off-canvas sidebar for mobile（移动端离屏侧边栏）。
3. 开启后，移动端侧边栏不再常驻显示，而是在产品列表上方出现一个「Filters」按钮，点击后侧边栏从屏幕边缘滑出。

这样移动端产品列表页的浏览空间最大化，用户需要筛选时点击按钮即可呼出筛选面板，不需要时筛选区不会挤占屏幕。

如果你还开启了第二节的 Shop filters（商店筛选区），在移动端筛选区会折叠为按钮状态（前提是关闭了 Shop filters area always opened）。用户点击「Filters」按钮后展开筛选项。

✨ 5.3 移动端产品卡片优化

移动端产品卡片显示的内容需要精简，避免信息过密。以下设置会影响移动端产品卡片展示：

• 产品标题行数：在 Product grid 中找到 Product title lines（产品标题行数）选项，建议移动端设为 2 行，超出部分截断。标题过长时 2 行截断比 3 行更整洁。
• 加入购物车按钮位置：WoodMart 在移动端会将加入购物车按钮显示在价格下方，而非悬停触发。这是自动行为，无需手动设置。
• 产品评分显示：如果产品评分数较少，移动端可以考虑隐藏评分，减少卡片内容。在 Product grid 中找到 Product rating（产品评分）选项，可以按需关闭。

✅ 5.4 移动端预览检查清单

配置完成后，用手机或浏览器开发者工具的移动端模拟器检查以下项目：

1. 产品列表在手机上显示为 1–2 列，图片大小适中。
2. 侧边栏不常驻显示，「Filters」按钮可点击展开。
3. 快速查看窗口在手机上能正常弹出，内容不超出屏幕。
4. 分页方式在移动端正常工作（Load More 按钮可点击 / 无限滚动正常触发）。
5. 产品悬停效果在触摸设备上的替代行为正常（移动端无悬停，关键按钮应始终可见或可点击触发）。
6. 网格/列表切换图标在移动端可见且可操作。
7. 产品卡片间距在移动端不显得拥挤。

---

六、常见问题排查

6.1 列表页样式错乱、布局不生效

按顺序排查：

1. 检查自定义布局模板：如果你导入了演示数据，演示可能启用了自定义产品归档布局模板。前往 Layouts 菜单，找到产品归档布局模板，检查其中是否有覆盖主题设置的元素。如果有，编辑或移除对应元素。
2. 清空缓存：清空缓存插件（如 WP Rocket、LiteSpeed Cache、W3 Total Cache）的缓存，以及浏览器缓存和 CDN 缓存。
3. 检查页面构建器覆盖：如果你用 Elementor 编辑过商店页（Shop Page），页面构建器的布局设置可能覆盖了主题设置。进入商店页编辑器，检查页面布局设置是否与主题设置冲突。
4. 重新生成 CSS 文件：如果修改设置后样式没更新，在 Theme Settings → Performance → CSS 中重新生成 CSS 文件。

6.2 分页不显示或点击无效

1. 确认 Products per page 的值不是 -1。设为 -1 会显示所有产品，不产生分页。
2. 确认产品总数大于每页显示数量。如果产品总共只有 8 个，每页设 12 个，自然不会有分页。
3. 如果使用 Load more button，按钮点击无反应时检查 AJAX 请求是否被拦截（见第 4.1 节注意事项）。
4. 如果使用 Default 分页但页码不显示，用浏览器开发者工具（F12）查看 Console 面板是否有 JavaScript 报错，排查是否有脚本被缓存插件错误合并或拦截。

6.3 快速查看窗口不弹出

1. 确认 Theme Settings → Shop → Quick view 中的快速查看选项已开启并保存。
2. 确认产品悬停效果中包含快速查看入口。如果悬停效果选了简洁按钮型，可能不会显示快速查看图标。建议换用带快捷图标的悬停风格，或确保悬停效果包含快速查看入口。
3. 清空缓存后刷新前台页面。
4. 检查是否有插件冲突：临时禁用非 WoodMart 核心插件，逐一排查。

6.4 分类页标题背景图不显示

1. 确认 Category header background 已上传图片并保存。
2. 如果使用了主题预设（Presets）为特定分类设置背景，确认预设的条件匹配正确（预设条件选择了正确的 Product Category）。
3. 检查页面标题区域是否被自定义布局模板中的设置覆盖。如果归档布局模板中有 Page Title 元素，其样式设置可能覆盖主题设置中的背景图。
4. 确认背景图文件可正常访问（检查图片 URL 是否返回 404）。

6.5 移动端产品列数不对

WoodMart 移动端列数是自动调整的，通常不需要手动设置。如果移动端列数异常（如手机上仍显示 3 列）：

1. 检查是否有自定义 CSS 强制了列数。在 Appearance → Customize → Additional CSS（外观 → 自定义 → 额外 CSS）中搜索 grid-template-columns 或 width 相关的规则。
2. 如果使用了 Elementor 自定义商店页布局，检查 Elementor 的响应式设置中列数是否被手动指定。
3. 清空缓存后在真实移动设备上预览（不要只用浏览器模拟器，某些情况下模拟器和真机表现可能不同）。

6.6 AJAX 筛选或排序无响应

1. 确认 AJAX shop 选项已开启（Theme Settings → Product archive → Product grid）。
2. 确认 WooCommerce 的固定链接设置正确。进入 设置 → 固定链接，确保产品归档基础（Product archive base）设置合理，然后点击「保存更改」刷新链接结构。
3. 检查缓存插件是否缓存了 AJAX 请求结果。如果怀疑是缓存问题，在缓存插件设置中排除 AJAX 请求，或暂时停用缓存插件对比测试。
4. 检查主题和插件版本是否兼容。确保 WoodMart Core 插件已更新到与主题版本匹配的最新版。