在WooCommerce中通过JQuery和Ajax添加产品变体

如果你看 WC_Ajax add_to_cart method (line 470 to 474) ,您将看到以下内容:

if ( $product && 'variation' === $product->get_type() ) {
    $variation_id = $product_id;
    $product_id   = $product->get_parent_id();
    $variation    = $product->get_variation_attributes();
}

这意味着你不需要在代码中设置主变量product Id,但你可以将变体Id设置为product Id参数,数量如下:

jQuery(function($) {
    // wc_add_to_cart_params is required to continue
    if ( typeof wc_add_to_cart_params === 'undefined' ) {
        console.log('Error: wc_add_to_cart_params is not defined.');
        return false;
    }

    $(document.body).on('click', '#button', function(e) {
        const data = {
            product_id: 1017, // The variation ID
            quantity: 2,
        };

        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'add_to_cart' ),
            data: data,
            success: function(response) {
                // Refresh cart items counter and mini-cart widget
                $(document.body).trigger('wc_fragment_refresh'); 
                console.log(response);
            },
            error: function (error) {
                console.log(error);
            }
        });
    });
});

经过测试并使用真实的变体ID。