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

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

开启 Quick View 功能

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

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

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

布局样式:横向展示(左图右文)或纵向展示(上下排列)

显示信息:包括商品描述、价格、变体选择、评分、库存状态等

图片样式:是否开启缩略图轮播

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

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

修改按钮样式和文字

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

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

可修改按钮颜色、边框、字体大小

改变按钮文字,例如将“快速查看”改为“点我预览”或“商品详情”

支持上传自定义图标或者使用图标字体(如 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 功能无需安装插件,自带设置界面和样式控制,可以快速提升商品列表页的互动性。如果搭配好样式和移动端优化,也能进一步提升转化效率。建议每个商品都开启此功能,让买家更方便浏览对比和下单。

最近更新

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注