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

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

图片[1]-用 WoodMart 实现产品快速查看(Quick View)弹窗效果

开启 Quick View 功能

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

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

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

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

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

图片[2]-用 WoodMart 实现产品快速查看(Quick View)弹窗效果

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

修改按钮样式和文字

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

图片[3]-用 WoodMart 实现产品快速查看(Quick View)弹窗效果

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

图片[4]-用 WoodMart 实现产品快速查看(Quick View)弹窗效果
  • 可修改按钮颜色、边框、字体大小
  • 改变按钮文字,例如将“快速查看”改为“点我预览”或“商品详情”
  • 支持上传自定义图标或者使用图标字体(如 Font Awesome)
图片[5]-用 WoodMart 实现产品快速查看(Quick View)弹窗效果

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

.quick-view-button {
  background-color: #111;
  color: #fff;
  font-size: 14px;
  border-radius: 4px;
}
图片[6]-用 WoodMart 实现产品快速查看(Quick View)弹窗效果

优化移动端展示效果

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,节假日休息
© 转载声明
本文作者:小Lin
THE END
喜欢就支持一下吧
点赞1258 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容