快速查看功能能让买家在产品列表页直接查看商品详情,不用跳转页面。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 功能无需安装插件,自带设置界面和样式控制,可以快速提升商品列表页的互动性。如果搭配好样式和移动端优化,也能进一步提升转化效率。建议每个商品都开启此功能,让买家更方便浏览对比和下单。