WooCommerce顶部购物车按钮跳转至结算页的代码实现咨询

针对你需要让右上角购物车按钮点击后直接跳转到结算页的需求，提供以下几种技术方案，可根据你的主题实际情况选择：

方法1：全局替换购物车链接（简单直接） #

如果你的主题基于WooCommerce标准钩子渲染购物车按钮，使用woocommerce_get_cart_url过滤器可以直接将所有购物车链接替换为结算页链接，包括右上角的按钮。将以下代码添加到主题的functions.php文件或自定义代码插件中：

add_filter('woocommerce_get_cart_url', 'cw_replace_cart_url_with_checkout');
function cw_replace_cart_url_with_checkout() {
    return wc_get_checkout_url();
}

注意：这个方法会替换所有调用wc_get_cart_url()的链接，如果你只需要修改右上角按钮，而保留其他地方的购物车链接，建议使用方法2。

方法2：JavaScript精准修改按钮跳转 #

如果主题的购物车按钮未使用标准钩子，或者你需要精准定位修改，可通过JS直接修改按钮的跳转地址。将以下代码添加到主题的functions.php：

add_action('wp_footer', 'cw_modify_cart_button_redirect');
function cw_modify_cart_button_redirect() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 替换为你网站购物车按钮的实际CSS选择器（右键检查元素获取）
        const cartButton = document.querySelector('.site-header-cart a');
        if (cartButton) {
            cartButton.href = '<?php echo esc_js(wc_get_checkout_url()); ?>';
        }
    });
    </script>
    <?php
}

使用说明：右键点击右上角购物车按钮，选择“检查”，找到按钮的HTML元素，复制其对应的CSS选择器（比如#cart-menu-item a或.header-cart-icon），替换代码中的.site-header-cart a即可。

方法3：修改导航菜单中的购物车项（如果是菜单添加的） #

如果右上角购物车是作为自定义菜单项添加到导航菜单的，无需代码，直接在后台修改：

• 进入WordPress后台 → 外观 → 菜单
• 找到购物车对应的菜单项
• 将其URL替换为你的结算页地址（可直接复制结算页的链接，或使用wc_get_checkout_url()生成的地址）

以上方案均可与你已有的添加商品跳转结算页代码共存，不会产生冲突。

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