如何在WooCommerce中显示自定义商品加入购物车按钮？

核心问题解决思路 #

放弃失效的链接式加购，通过绑定WooCommerce原生AJAX逻辑实现可靠的自定义按钮加购，以下是具体实现步骤：

1. 标准化按钮结构（批量复用） #

保留你现有按钮的核心属性，确保每个按钮的data-product_id和data-quantity对应正确商品ID与数量：

<button type="button" class="button add_to_cart" data-product_id="998" data-quantity="1">
  Add to cart
</button>

2. 绑定AJAX加购事件 #

如果按钮点击无响应，大概率是未触发WooCommerce的AJAX加购逻辑，添加以下JS代码（可放入主题自定义JS文件或functions.php的脚本注册中）：

jQuery(document).ready(function($) {
    $('.add_to_cart').on('click', function(e) {
        e.preventDefault();
        const $btn = $(this);
        const productId = $btn.data('product_id');
        const quantity = $btn.data('quantity') || 1;

        $.ajax({
            url: wc_add_to_cart_params.ajax_url,
            type: 'POST',
            data: {
                action: 'woocommerce_add_to_cart',
                product_id: productId,
                quantity: quantity
            },
            beforeSend: () => {
                $btn.text('Adding...').prop('disabled', true);
            },
            success: (res) => {
                if (res.error && res.product_url) {
                    window.location.href = res.product_url;
                } else {
                    $(document.body).trigger('added_to_cart', [res.fragments, res.cart_hash, $btn]);
                    $btn.text('Add to cart').prop('disabled', false);
                }
            },
            error: () => {
                $btn.text('Add to cart').prop('disabled', false);
                alert('Failed to add product to cart.');
            }
        });
    });
});

3. 确保WooCommerce全局参数加载 #

在主题functions.php中添加代码，保证页面加载WooCommerce必要的加购参数：

add_action('wp_enqueue_scripts', function() {
    if (function_exists('is_woocommerce') && is_woocommerce()) {
        wp_enqueue_script('wc-add-to-cart');
    }
});

4. 批量生成按钮的高效方式 #

若需批量创建大量按钮，可在PHP模板中用循环实现：

<?php
// 示例：商品ID数组，可根据需求从数据库或配置中获取
$productIds = [998, 999, 1000, 1001];
foreach ($productIds as $id) {
    ?>
    <button type="button" class="button add_to_cart" data-product_id="<?php echo esc_attr($id); ?>" data-quantity="1">
      Add to Cart - #<?php echo $id; ?>
    </button>
    <?php
}
?>

链接式加购失效的常见原因 #

• 商品为可变产品，需选择规格才能加购，GET请求无法传递规格参数
• 主题或插件拦截了GET方式的加购请求
• 开启了AJAX加购模式后，原生链接逻辑被禁用

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