我想在我的单页模板中显示一个按钮，在产品描述下显示“在家免费试用”，当您按下按钮时，它会将产品添加到woocommerce购物车中，金额为0$。我正在使用woocommerce与elementor。我在代码片段上有以下php代码：

function add_try_at_home_button() {
    global $product;

    $product_id = $product->get_id();
    $variation_id = 0;
    $variation_data = array();

    if ($product->is_type('variable')) {
        $variation_id = $product->get_variation_id();
        $variation_data = $product->get_variation_attributes();
    }

    echo '<button class="btn-at-home" data-product-id="' . esc_attr($product_id) . '" data-variation-id="' . esc_attr($variation_id) . '" data-variation-data="' . esc_attr(json_encode($variation_data)) . '">Try at Home</button>';
}

add_action('woocommerce_single_product_summary', 'add_try_at_home_button', 25);

我在一个片段上也有以下JS代码：

jQuery(document).ready(function($) {
    $('button.btn-at-home').on('click', function(e) {
        e.preventDefault();

        var product_id = $(this).data('product-id');
        var variation_id = $(this).data('variation-id');
        var variation_data = $(this).data('variation-data');

        console.log('Product ID: ' + product_id);
        console.log('Variation ID: ' + variation_id);
        console.log('Variation data: ' + variation_data);

        $.ajax({
            type: 'POST',
            url: wc_add_to_cart_params.ajax_url,
            data: {
                action: 'woocommerce_add_to_cart',
                product_id: product_id,
                variation_id: variation_id,
                quantity: 1,
                variation: variation_data
            },
            success: function(response) {
                if (response.error & response.product_url) {
                    window.location.href = response.product_url;
                    return;
                } else {
                    window.location.href = wc_add_to_cart_params.cart_url;
                }
            },
        });
    });
});

在模板中，我添加了一个HTML小部件，并传递了以下代码：

<button class="btn-at-home" data-product-id="<?php echo esc_attr(get_the_ID()); ?>" data-variation-id="<?php echo esc_attr($product->get_variation_id()); ?>" data-variation-data='<?php echo esc_attr(json_encode($product->get_variation_attributes())); ?>'>Try at Home for free</button>

当我按下按钮，它会转到购物车页面，但它不会将产品添加到购物车。
我的控制台说：
产品ID：（索引）：388变更ID：return（）;？〉（index）：389变化数据：（））;？〉
我试图了解值是否通过php代码到达按钮，但它不起作用。
如果我将产品的id硬编码到html代码中，它会将产品添加到购物车中，没有任何问题：

<button class="btn-at-home" data-product-id="16985" data-variation-id="17429" data-variation-data='{"attribute_pa_color":"blue"}'>Try at Home</button>

据我所知，PHP代码没有被执行。
有人能帮我一下吗？
我的PHP和JS的编程技巧是非常基本的。
先谢了。
PM