Add a button on the single page product that add's the product to the cart with an amount of 0$

[PedroMag]

I want to show a button in my single product page template that says "Try at home for free" under the product description and when you press the button it will add the product to the woocommerce cart with an amount of 0$.

I'm using woocommerce with elementor.

I have the following PHP code on the child theme function.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);

I have the following JS code also on a snippet:

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;
                }
            },
        });
    });
});

Inside my elementor single product page template I've added an HTML widget and passed this code:

<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>

When I press the button it goes to the cart page but it doesn't add the product to the cart.

My console says the following:

Product ID: <?php echo esc_attr(get_the_ID()); ?>
(index):388 Variation ID: <?php echo esc_attr($product->get_variation_id()); ?>
(index):389 Variation data: <?php echo esc_attr(json_encode($product->get_variation_attributes())); ?>

I've tried to understand if the values are getting through the PHP code to the button but it's not working.

If I hardcode the id of the product into the HTML code, it adds the product to the cart with no issues:

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

The URL where I'm trying this: Armações de Teste Aviator (Cópia) – BeeQuick

From my understanding, the PHP code is not being executed.

Can someone please help me out with this?

My coding skills in PHP and JS are very basic.

Thanks in advance.

 

[Johna]

Hi @PsyMyself,
I think because the PHP code for the id is in quotes, it's a string, and that becomes the id.

Try this and see if it works:

<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>

You could also first define some variables and use those variables:

<?php
$product_id = esc_attr(get_the_ID());
$variation_id = esc_attr($product->get_variation_id());
$variation_data = esc_attr(json_encode($product->get_variation_attributes()));

echo '<button class="btn-at-home"
              data-product-id="$product_id"
              data-variation-id="$variation_id"
              data-variation-data="$variation_data">Try at Home for free</button>';
?>