WooCommerce已加购商品「查看购物车」按钮刷新后可见求助

问题根源 #

你当前的代码逻辑里，PHP部分已经通过检查购物车商品来控制「Voir le Panier」按钮的显示，但刷新后按钮消失，核心问题有两个：

1. JS点击事件逻辑错误，误操作了按钮的显示状态
2. 未适配WooCommerce的AJAX加购会话同步，导致PHP判断在刷新前的状态不准确

修正方案 #

1. 优化PHP判断逻辑（确保刷新后正确识别购物车商品） #

原PHP判断基本正确，但可以优化兼容性和状态控制：

<?php
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

global $product;
$product_id = $product->get_id();
$is_in_cart = false;

// 同时检查商品ID和变体ID，适配可变商品场景
foreach ( WC()->cart->get_cart() as $cart_item ) {
    if ( $cart_item['product_id'] === $product_id || $cart_item['variation_id'] === $product_id ) {
        $is_in_cart = true;
        break;
    }
}

// 输出添加购物车按钮
$add_to_cart_button = sprintf(
    '<a href="%s" data-quantity="%s" class="button-primary xsmall rounded wide %s add-to-cart-button" data-product_id="%d" %s>%s</a>',
    esc_url( $product->add_to_cart_url() ),
    esc_attr( isset( $args['quantity'] ) ? $args['quantity'] : 1 ),
    esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
    esc_attr( $product_id ),
    isset( $args['attributes'] ) ? wc_implode_html_attributes( $args['attributes'] ) : '',
    esc_html( $product->add_to_cart_text() )
);

echo $add_to_cart_button;

// 根据购物车状态设置按钮默认显示/隐藏，确保刷新后直接生效
echo sprintf(
    '<a href="%s" class="button voir_panier_button" style="display:%s;">%s</a>',
    esc_url( wc_get_cart_url() ),
    $is_in_cart ? 'block' : 'none',
    esc_html__( 'Voir le Panier', 'woocommerce' )
);
?>

优化点说明：

• 新增变体ID检查，适配带规格的可变商品
• 按钮默认状态直接由PHP判断结果控制，刷新后无需JS介入即可正确显示

2. 重构JS逻辑（适配AJAX加购后的状态同步） #

原JS逻辑错误地尝试操作不存在的按钮，现在改用WooCommerce官方AJAX接口确保会话同步：

<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.add-to-cart-button').on('click', function(e) {
            e.preventDefault();
            const button = $(this);
            const productId = button.data('product_id');
            const viewCartButton = button.siblings('.voir_panier_button');

            // 调用WooCommerce官方AJAX加购接口
            $.ajax({
                url: wc_add_to_cart_params.ajax_url,
                type: 'POST',
                data: {
                    action: 'woocommerce_add_to_cart',
                    product_id: productId,
                    quantity: button.data('quantity') || 1
                },
                success: function(response) {
                    if (response.error && response.product_url) {
                        window.location.href = response.product_url;
                        return;
                    }
                    // 加购成功后直接显示查看购物车按钮
                    viewCartButton.show();
                    // 同步更新页面购物车相关元素（如计数）
                    if (response.fragments) {
                        $.each(response.fragments, function(key, value) {
                            $(key).replaceWith(value);
                        });
                    }
                    // 隐藏默认的加购提示按钮
                    $('.added_to_cart.wc-forward').hide();
                }
            });
        });
    });
</script>

关键改进：

• 使用官方AJAX接口确保购物车会话正确更新，避免刷新后状态丢失
• 直接操作已渲染的按钮，无需动态创建
• 同步更新购物车片段，保证页面其他购物车元素状态一致

3. 额外注意事项 #

• 清除WooCommerce缓存和浏览器缓存，避免会话不同步
• 若使用缓存插件（如WP Rocket、W3 Total Cache），需排除商品页面的购物车相关内容缓存
• 确认后台「WooCommerce > 设置 > 高级 > 页面」中已正确配置购物车页面

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