WooCommerce产品页：Ctrl/Shift点击加购提交表单时刷新当前页

当用户按住Ctrl或Shift键点击产品页的加入购物车按钮（表单提交按钮）时，浏览器会在新标签页打开跳转页面，但当前产品页不会自动刷新，导致购物车状态等信息无法实时更新。以下是具体的实现方案：

实现思路 #

通过JavaScript监听按钮点击事件，检测用户是否按下了Ctrl/Shift快捷键；在表单提交时，如果检测到快捷键被按下，就触发当前页面的刷新操作，确保页面状态和购物车同步。

代码实现 #

1. JavaScript核心逻辑 #

这段代码会监听产品页的加购表单和按钮，判断快捷键状态并触发刷新：

document.addEventListener('DOMContentLoaded', function() {
    // 获取产品页的加购表单
    const addToCartForm = document.querySelector('form.cart');
    if (!addToCartForm) return;

    // 获取加购提交按钮
    const addToCartBtn = addToCartForm.querySelector('button[type="submit"]');
    if (!addToCartBtn) return;

    let isShortcutPressed = false;

    // 监听按钮点击，记录是否按下Ctrl/Shift
    addToCartBtn.addEventListener('click', function(event) {
        isShortcutPressed = event.ctrlKey || event.shiftKey;
    });

    // 监听表单提交，若有快捷键按下则刷新页面
    addToCartForm.addEventListener('submit', function(event) {
        if (isShortcutPressed) {
            // 延迟刷新，确保购物车请求完成
            setTimeout(() => window.location.reload(), 500);
        }
    });
});

2. 将代码添加到WooCommerce #

你可以通过以下两种方式将代码部署到网站：

方法一：通过主题functions.php添加

将以下代码添加到当前主题的functions.php文件中（建议使用子主题，避免主题更新丢失代码）：

function add_to_cart_shortcut_refresh() {
    // 仅在产品页面加载代码
    if (is_product()) {
        wp_add_inline_script('jquery', '
            document.addEventListener("DOMContentLoaded", function() {
                const addToCartForm = document.querySelector("form.cart");
                if (!addToCartForm) return;

                const addToCartBtn = addToCartForm.querySelector("button[type=\'submit\']");
                if (!addToCartBtn) return;

                let isShortcutPressed = false;

                addToCartBtn.addEventListener("click", function(event) {
                    isShortcutPressed = event.ctrlKey || event.shiftKey;
                });

                addToCartForm.addEventListener("submit", function(event) {
                    if (isShortcutPressed) {
                        setTimeout(() => window.location.reload(), 500);
                    }
                });
            });
        ');
    }
}
add_action('wp_enqueue_scripts', 'add_to_cart_shortcut_refresh');

方法二：使用主题自定义JS功能

如果你的主题支持自定义JS（通常在外观 > 自定义 > 额外代码或类似菜单中），直接粘贴前面的JavaScript代码即可。

注意事项 #

• 延迟时间（示例中的500ms）可根据服务器响应速度调整，范围建议在300ms-1000ms之间，确保购物车更新请求完成后再刷新页面。
• 如果你的主题或第三方插件修改了加购表单的结构，可能需要调整form.cart或按钮的选择器，确保能正确获取到目标元素。
• 测试时需按住Ctrl/Shift点击加购按钮，确认新标签页正常打开的同时，当前产品页自动刷新，购物车数量等状态同步更新。

内容的提问来源于stack exchange，提问作者bluish