如何在 Kadence 中设置 WooCommerce 商品快速预览功能

提升购物效率和浏览体验可以提高 WooCommerce 网站转化率。网站中商品快速预览（Quick View）功能可让用户在弹窗中查看商品信息并直接下单，不用跳转详情页。使用Kadence 主题轻量灵活，与 WooCommerce 高度兼容，本文将介绍如何在 Kadence 中设置快速预览功能。

一、了解 Kadence 并启用安装

1.1 什么是 Kadence？为什么适合用来打造 WooCommerce 商店？

Kadence 是一款专为速度、可用性和美学而设计的 WordPress 主题，拥有灵活的页面构建能力和强大的主题自定义器。与 WooCommerce 搭配使用时，它能提供：

• 高度可定制的商品展示布局
• 响应式移动端优化
• 与 Kadence Blocks 插件无缝集成
• 页面加载速度优化，适合SEO

借助 Kadence 和插件的配合，可以为用户打造流畅、直观的购物体验，商品快速预览功能是重要的一环。

1.2 安装启用 Kadence

• 登录 WordPress 后台，进入【外观】>【主题】
• 安装激活 Kadence 主题

二、安装并配置商品快速预览插件

Kadence 主题本身并未内置商品快速预览功能，因此我们需要借助第三方插件来实现。

2.1 安装推荐插件：YITH WooCommerce Quick View

YITH Quick View 是最受欢迎的快速预览插件之一，兼容性强，免费版即可满足多数需求。

安装步骤：

• 进入【插件】>【安装插件】，搜索 “YITH WooCommerce Quick View”
• 点击安装并启用

• 启用后在后台菜单中出现【YITH】>【Quick View】

2.2 基础功能配置

• 按钮类型：选择“图标 + 文本”或纯图标，根据页面风格决定
• 按钮位置：推荐选择“悬浮在产品缩略图上”或“位于标题下方”
• 弹窗布局：可选居中浮窗、两栏结构，适配不同风格

三、配置按钮样式以匹配 Kadence 风格

• 进入 WordPress 后台，打开 Appearance, 点击 Customize 进入 Kadence

• Colors & Fonts > Base Colors, Kadence 主色为 #0058ff

• 前往 YITH > Quick View > Customization
• 设置如下颜色值：
  • 按钮背景色（Background）：#0058ff
  • 悬停背景色（Background hover）：#0044cc（加深版）
  • 文字颜色（Text Color）：#ffffff（白色）
  • 悬停文字颜色（Text Hover Color）：#ffffff

设置完成后，按钮使用 Kadence 主色，整体样式风格统一。

四、响应式适配与性能优化

4.1 移动端优化

• 在小屏幕下，将弹窗内容设置为纵向排列
• 确保关闭按钮、变体选择与“加入购物车”按钮易于点击
• 使用 Kadence 的响应式排版功能调整字体大小与间距

4.2 加载速度优化

• 启用 Lazy Load 图片加载（Kadence 默认支持）
• 减少每页商品数量，避免触发太多弹窗资源请求
• 使用缓存插件 LiteSpeed Cache 提升整体页面响应速度

五、常见问题与解决方案

问题	原因	解决方法
按钮未显示	插件冲突或主题自定义样式干扰	暂时停用缓存或自定义 CSS，逐步排查
弹窗加载失败	缓存未清除或 AJAX 请求失败	检查 WooCommerce AJAX 设置是否启用
“加入购物车”功能无响应	JavaScript 错误或变体逻辑冲突	查看浏览器控制台报错，更新插件版本

六、结语

在 Kadence 主题中启用 WooCommerce 商品快速预览功能，可以提升浏览体验，加快下单流程、降低跳出率。借助 YITH Quick View 插件，轻松打造一个美观、高效、移动友好的电商页面。

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