WooCommerce快速查看功能？

照着做完，你能在自己的 WooCommerce 商城商品列表页上，点一下按钮就弹出商品详情、并直接加购，不用跳转到单品页。

快速查看（Quick View）解决的是一个很具体的体验问题：顾客在分类页浏览商品时，想多看一眼详情就得离开当前页面、翻完再回来，位置全丢。加上快速查看后，商品图或标题旁会出现一个「快速查看」按钮，点击弹出一个模态窗口，里面有主图、价格、简介、规格选择和加入购物车按钮，关掉窗口还停在原来的列表位置。

第一步：先决定用主题自带还是装插件

这一步决定后面所有操作入口。先看你的主题：如果你用的是 WoodMart、Flatsome、Astra（配合 Spectra/Shop Builder）、Kadence 这类电商向主题，它们大多已经把快速查看做进去了。WoodMart 在 后台 → WoodMart → Theme Settings → WooCommerce → Products，找到「Quick View」一项打开即可；Flatsome 在 后台 → Theme Options → Shop → Product Catalog 里有 Quick View 开关。

如果你用的是 Twenty Twenty-Four 这类通用主题，或者想要更多样式控制，就走插件方案，进入第二步。

注意：主题设置里改完记得点页面底部的 Save/保存按钮，很多人改完直接关页面，配置没生效还以为功能坏了。

第二步：安装并启用快速查看插件

这一步做完，后台会多出一个快速查看的设置入口。推荐两个经过验证的：

• YITH WooCommerce Quick View：免费版够用，兼容性好，后台左侧菜单会新增「YITH」→「Quick View」。
• Quick View for WooCommerce：免费版支持在弹窗内直接加购，适合商品不多的小店。

安装路径：后台 → 插件 → 安装插件 → 右上角搜索框输入插件名 → 在结果卡片上点「立即安装」→ 按钮变成「启用」后点它。

注意：装之前先做一次数据库备份（用 UpdraftPlus 或主机面板自带的备份功能）。另外插件只保留一个，两个同时开会导致商品列表出现两个「快速查看」按钮，或者模态框叠加打不开。

第三步：打开开关并配置按钮位置

进 后台 → YITH → Quick View，把「Enable Quick View」开关拨到开启状态，然后依次设置：

• Button position（按钮位置）：选「On the product image」会在商品主图上悬停显示；选「Below the product image」则固定显示在图下方。手机端没有悬停，建议选后者。
• Button text（按钮文字）：默认是 Quick View，中文站建议改成「快速查看」。
• Modal style（弹窗样式）：可选「Standard」或「Centered」，前者是顶部滑出的长条弹窗，后者是居中小窗。
• Show on（显示范围）：勾选 Shop page、Category page、Tag page，只勾需要的，避免首页轮播也弹出窗口。

改完点页面底部的「Save changes」。

第四步：让弹窗里能直接加购

快速查看的价值一半在加购。如果弹窗里只有图片和文字，顾客还是要跳转，效果打对折。

在 YITH → Quick View 的设置页里找到「Add to cart button」相关选项并开启；如果用的是免费版且没有这项，可以在 后台 → WooCommerce → 设置 → 产品 里确认「启用 AJAX 加到购物车」已勾选（WooCommerce 6.0 之后该选项已默认开启，部分主题会接管）。

可变商品（有尺码、颜色等属性）在弹窗里会显示下拉框，选完规格后加购才有效，测试时记得把规格都选一遍。

第五步：清缓存并做三轮测试

这一步验证成果。按顺序做三件事：

1. 清缓存：如果你装了 WP Rocket、LiteSpeed Cache 或 W3 Total Cache，进对应插件点「清除所有缓存」，再清一次浏览器缓存。
2. 桌面端测试：打开一个分类页，悬停商品图，点「快速查看」，检查图片、价格、加购是否正常，点右上角 × 能关闭。
3. 手机端测试：用手机浏览器打开同一页面，确认按钮不会挡住商品图，弹窗可以滚动。

注意：如果点了按钮没反应，九成是 JavaScript 冲突。临时把其他插件逐个停用测试，定位到冲突插件后换替代品，比改代码快得多。

小结

• 快速查看 = 列表页弹窗看详情 + 直接加购，核心价值是减少跳转、保住浏览位置。
• 优先用主题自带功能（WoodMart 在 Theme Settings，Flatsome 在 Theme Options），不行再装插件。
• 插件只装一个，装前备份，按钮位置手机端建议选图下方固定显示。
• 弹窗里一定要能加购，可变商品记得测规格选择。
• 改完设置必清缓存，出问题先查插件冲突而不是改代码。