很多 WooCommerce 商城在安装 YITH WooCommerce Compare 插件后会遇到一个很常见的问题：
✅ 在 产品详情页（Product page） 、产品列表页（Shop page） 点击 Compare 能正常弹出对比表
❌ 但在 Wishlist 页面、博客页、首页、About 页面 点击 Header 的 Compare 图标却没反应
比如你点 Header 图标后 Network 里可能只出现：
https://你的域名/cdn-cgi/rum（204 No Content）
而不是 Compare 正常工作的请求：
https://你的域名/?wc-ajax=yith-woocompare-reload-compare（200 OK）
这说明：点击事件没有触发 YITH Compare 的 AJAX，而是页面里根本没加载 Compare 所需脚本。
本文分享一个最简单、最稳定的解决方案：
✅ 强制 YITH Compare 脚本全站加载
让你在任何页面点 Header Compare 都能直接弹出对比表。
为什么 YITH Compare 在非产品页无法弹出？
YITH Compare 插件后台有一个设置：
Show compare in：
-
Shop page
-
Product pages
-
Both
这个选项的含义是：
"Compare 按钮显示在哪些产品相关页面上"
但问题在于：
✅ 插件会在 Shop / Product 这些页面里自动加载 Compare 所需的 JS
❌ 在 Wishlist、博客等普通页面，插件为了优化性能，可能不会加载 Compare 的核心脚本
结果就是：
-
你的 Header 上虽然有 Compare 图标
-
也加了正确 class：
yith-woocompare-open -
但是插件 JS 没加载 → 点击根本打不开弹窗
解决方案：强制 Compare 脚本全站加载
✅ 适用场景
如果你希望：
-
Header Compare 图标 全站任意页面都可点开对比表
-
不想依赖插件默认"只在产品页加载脚本"
-
不想改插件源码（避免更新覆盖）
那么方案 C 是最稳的做法。
第一步：确保 Header Compare 按钮写法正确
你的 Header 代码类似这样是正确的 ✅：
<a href="#" aria-label="Compare" title="Compare" class="yith-woocompare-open">
<span class="compare-icon">
<i class="porto-icon-compare-link"></i>
<span class="compare-count">5</span>
</span>
</a>关键点只有一个：
✅ class="yith-woocompare-open"
第二步：把代码加入 functions.php（核心修复）
把下面代码加入你的 子主题 child theme 的 functions.php：
路径一般是：
wp-content/themes/你的子主题/functions.php
/**
* Force YITH Compare scripts to load on all pages
* So the header compare icon works globally (Wishlist / Blog / Home etc.)
*/
add_action('wp_enqueue_scripts', function () {
// Don't load in admin dashboard
if (is_admin()) return;
// Main script for YITH Compare (script handle may vary by version)
if (wp_script_is('yith-woocompare-main', 'registered')) {
wp_enqueue_script('yith-woocompare-main');
}
// Popup dependency (some versions rely on Colorbox)
if (wp_script_is('jquery-colorbox', 'registered')) {
wp_enqueue_script('jquery-colorbox');
}
}, 99);✅ 保存后清缓存，然后刷新任意页面（如 /wishlist/）
此时点击 Header Compare 图标就会正常弹出对比表。
第三步：清理缓存（非常重要）
如果你用了缓存或加速服务（非常常见）：
-
WP Rocket / LiteSpeed Cache / Autoptimize
-
Cloudflare 缓存
-
主题 Porto 的性能优化
请务必做这几步：
✅ 清 WordPress 缓存
✅ 清 Cloudflare 缓存（可用 "Purge everything" 或 Purge URL）
✅ 浏览器强制刷新（Mac：Command + Shift + R）
如何确认修复成功？
打开浏览器开发者工具（F12），点击 Header Compare 按钮，观察 Network：
✅ 成功时应该出现：
-
/?wc-ajax=yith-woocompare-reload-compare -
状态码
200 OK
如果你还是只看到：
-
/cdn-cgi/rum -
状态码
204
说明 Compare 脚本仍未生效（通常是脚本被延迟加载或未加载）。
常见问题排查（如果仍然打不开）
1）确认页面是否加载了 compare 脚本
在不弹窗的页面（比如 wishlist 页面）按 F12 → Console 输入：
document.querySelectorAll('.yith-woocompare-open').length返回值应该 > 0
如果返回 0，说明你的按钮没真正输出或 class 没生效。
2）性能插件延迟 JS 导致 Compare 失效
如果你启用了 "延迟 JS / 合并 JS / 延迟执行"，建议把以下关键词加入排除列表：
-
woocompare -
yith-woocompare -
colorbox
这一步很关键，因为 Compare 弹窗属于强交互功能，最怕脚本执行顺序被打乱。
这个方案会影响页面加载速度吗？
很多人担心：全站加载 Compare 脚本会不会变慢？
✅ 结论：一般影响非常小，且可接受。
原因是：
-
Compare 脚本通常几十 KB
-
只是让页面具备 Compare 能力
-
真正的 AJAX 请求只会在你点击 Compare 时触发
（平时不会不断请求数据）
对于 B2B/询盘型网站来说，全站可用的体验比这点资源开销更重要。
推荐设置：让体验更像 Alibaba
如果你想让体验更专业，建议你在 YITH Compare 设置里选择：
Show table when：
✅ The user manually clicks on view anchor
因为 Header 图标就相当于 "View compare table" 入口，点击立即弹出最符合用户预期。
FAQ：YITH Compare 全站弹窗常见问题
Q1：我必须用子主题吗？
强烈建议 ✅
因为主主题更新可能会覆盖 functions.php 修改。
Q2：我的版本脚本句柄不是 yith-woocompare-main 怎么办？
不同版本确实可能不同，但你这次能成功，说明你站点版本已经匹配。
如果你未来遇到句柄不一致的情况，最简单方法是：
-
打开页面源代码（view-source）
-
搜索
woocompare或compare -
找到脚本文件名，再针对性 enqueue
Q3：Compare 图标显示数量怎么自动更新？
compare-count 的数字通常可以通过 JS 或 shortcode 动态刷新。
如果你想做成更像电商的"实时数量徽标"，我也可以帮你加一段轻量脚本自动同步。
总结
如果你安装了 YITH WooCommerce Compare，并希望：
✅ Header Compare 图标在 Wishlist / Blog / Home 等任何页面都能弹出对比表
最稳的办法就是：
强制 Compare 脚本全站加载
把下面核心代码加入 functions.php 即可：
add_action('wp_enqueue_scripts', function () {
if (is_admin()) return;
if (wp_script_is('yith-woocompare-main', 'registered')) {
wp_enqueue_script('yith-woocompare-main');
}
if (wp_script_is('jquery-colorbox', 'registered')) {
wp_enqueue_script('jquery-colorbox');
}
}, 99);