Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

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

PedroMag

New Coder
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 :
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:
JavaScript:
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:

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

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.
 
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:
PHP:
<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:
<?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>';
?>
 
Last edited:

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom