解决WooCommerce自定义亚马逊按钮切换变体不更新链接问题

你当前的代码在可变产品页面仅加载第一个变体的Amazon链接，未监听变体切换事件，导致用户切换变体时按钮链接无法同步更新。以下是修复方案：

第一步：修改PHP按钮输出与变体数据传递 #

替换原有的add_amazon_button函数，同时将所有变体的Amazon链接传递到前端：

// 添加Buy on Amazon按钮并传递变体链接数据
add_action('woocommerce_single_product_summary', 'add_amazon_button', 15);
function add_amazon_button() {
    global $product;

    if ($product->is_type('variable')) {
        // 收集所有变体的Amazon链接
        $variation_amazon_links = array();
        foreach ($product->get_available_variations() as $variation) {
            $variation_id = $variation['variation_id'];
            $amazon_link = get_post_meta($variation_id, '_buy_on_amazon', true);
            if ($amazon_link) {
                $variation_amazon_links[$variation_id] = esc_url($amazon_link);
            }
        }

        // 输出初始按钮（默认用第一个有链接的变体，无链接则禁用）
        $initial_link = !empty($variation_amazon_links) ? reset($variation_amazon_links) : '';
        if ($initial_link) {
            echo '<a href="' . $initial_link . '" class="amazon-button" target="_blank">Buy on Amazon</a>';
        } else {
            echo '<a href="#" class="amazon-button disabled" target="_blank" disabled>Buy on Amazon</a>';
        }

        // 注册脚本并传递变体链接数据到前端
        wp_enqueue_script('amazon-variation-script', get_stylesheet_directory_uri() . '/js/amazon-variation.js', array('jquery'), '1.0', true);
        wp_localize_script('amazon-variation-script', 'variationAmazonLinks', $variation_amazon_links);
    } else {
        // 普通产品逻辑保持不变
        $amazon_link = get_post_meta($product->get_id(), '_buy_on_amazon', true);
        if ($amazon_link) {
            echo '<a href="' . esc_url($amazon_link) . '" class="amazon-button" target="_blank">Buy on Amazon</a>';
        }
    }
}

第二步：添加前端JS监听变体切换 #

在你的主题目录下创建js/amazon-variation.js文件，添加以下代码：

jQuery(document).ready(function($) {
    // 监听变体匹配成功事件
    $('form.variations_form').on('found_variation', function(event, variation) {
        var amazonButton = $('.amazon-button');
        var variationId = variation.variation_id;
        
        // 更新按钮链接或设置禁用状态
        if (variationAmazonLinks[variationId]) {
            amazonButton.attr('href', variationAmazonLinks[variationId]);
            amazonButton.removeClass('disabled').removeAttr('disabled');
        } else {
            amazonButton.attr('href', '#').addClass('disabled').attr('disabled', 'disabled');
        }
    });

    // 监听变体重置事件（用户取消选择属性时）
    $('form.variations_form').on('reset_data', function() {
        var amazonButton = $('.amazon-button');
        var initialLink = Object.values(variationAmazonLinks)[0] || '#';
        
        amazonButton.attr('href', initialLink);
        initialLink === '#' 
            ? amazonButton.addClass('disabled').attr('disabled', 'disabled')
            : amazonButton.removeClass('disabled').removeAttr('disabled');
    });
});

可选：优化禁用按钮的视觉样式 #

在主题的style.css中添加以下CSS，提升用户体验：

.amazon-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

代码逻辑说明 #

1. PHP部分：收集所有变体的Amazon链接，输出初始按钮，并通过wp_localize_script将链接数据传递到前端，确保JS能获取每个变体对应的链接。
2. JS部分：监听WooCommerce内置的found_variation事件（用户选完属性匹配到变体时触发），实时更新按钮链接；同时监听reset_data事件，处理用户取消选择属性的重置场景。
3. CSS部分：让禁用状态的按钮视觉上更清晰，避免用户误操作。

替换你原有的add_amazon_button函数，创建对应的JS文件并添加样式即可解决问题。

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