用 WoodMart 实现产品快速查看（Quick View）弹窗效果

快速查看功能能让买家在产品列表页直接查看商品详情，不用跳转页面。WoodMart 自带这一功能，不需要额外安装插件，设置也非常简单，适合电商站点提升商品浏览效率。

开启 Quick View 功能

进入后台，点击 WoodMart → Theme Settings → Shop。

找到“Quick View”选项，勾选“启用”。

你还可以调整 Quick View 弹窗的展示方式：

• 布局样式：横向展示（左图右文）或纵向展示（上下排列）
• 显示信息：包括商品描述、价格、变体选择、评分、库存状态等
• 图片样式：是否开启缩略图轮播

调整好后点击保存，刷新页面即可生效。

如果你的商品列表使用了 Elementor 或 WPBakery 构建，按钮同样会自动集成进来，无需单独操作。

修改按钮样式和文字

前往主题设置 → 风格与颜色 → 按钮

往下拉找到增加规则，选择快速查看加入购物车：

• 可修改按钮颜色、边框、字体大小
• 改变按钮文字，例如将“快速查看”改为“点我预览”或“商品详情”
• 支持上传自定义图标或者使用图标字体（如 Font Awesome）

如果你使用的是 Elementor Loop Builder（循环构建器）自定义产品列表，建议统一按钮类名，如 .quick-view-button，然后在 主题自定义 CSS 或 Elementor 自定义 CSS 中统一样式，例如：

.quick-view-button {
  background-color: #111;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
}

优化移动端展示效果

WoodMart 对 Quick View 弹窗做了响应式适配，手机端会以全屏方式弹出。

可以在自定义 CSS 中进一步优化：

.quick-view-popup .product-summary {
  font-size: 16px;
}
@media(max-width:768px){
  .quick-view-popup .product-image-gallery {
    display: none; /* 隐藏图像轮播，提升加载速度 */
  }
}

另外，在移动端建议只保留主要信息，如主图、价格、购买按钮，减少干扰内容，提高加载速度。

快捷排查方式

• 弹窗不显示：检查是否启用了缓存插件，清除缓存后再测试
• 样式错乱：检查是否自定义了 CSS，或主题是否为最新版
• 变体加载失败：确认变体设置是否完整，有无缺失属性或图像

小结

WoodMart 的 Quick View 功能无需安装插件，自带设置界面和样式控制，可以快速提升商品列表页的互动性。如果搭配好样式和移动端优化，也能进一步提升转化效率。建议每个商品都开启此功能，让买家更方便浏览对比和下单。

最近更新

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