php - Checkbox field that add to cart a product in Woocommerce checkout page

Question

In Woocommerce checkout section, I am trying to add a checkbox that adds an additional product.

I have a working piece of code that adds a fee and updates the cart on click of a checkbox, but I want it to add a product instead of a surcharge fee:

function cart_custom_fee( $cart ) {

    if( !$_POST || ( is_admin() && ! is_ajax() ) ) {
        return;
    }

    if( isset( $_POST['post_data'] ) ) {
        parse_str( $_POST['post_data'], $post_data );   
    } else {
        $post_data = $_POST;
    }

    if( isset( $post_data['add_test_item'] ) ) { // This is the checkbox name
        WC()->cart->add_fee('Test Item', 35);
    }
}
add_action( 'woocommerce_cart_calculate_fees', 'cart_custom_fee' );

This is the code for the checkbox

<script>
             jQuery(document).ready(function(){
                   jQuery('#cp-checkbox').click(function() {
                      jQuery('body').trigger('update_checkout'); 
                   });
                });
</script>

And the code works…

Now, I tried changing the code to add a product instead:

function add_item_checkout( $cart ) {

    if( !$_POST || ( is_admin() && ! is_ajax() ) ) {
        return;
    }

    if( isset( $_POST['post_data'] ) ) {
        parse_str( $_POST['post_data'], $post_data );   
    } else {
        $post_data = $_POST;
    }

    if( isset( $post_data['add_test_item'] ) ) { // This is the checkbox name
        WC()->cart->add_to_cart( 123 ); // 123 is the product ID
    }
}
add_action( 'woocommerce_calculate_totals', 'add_item_checkout' );

But it didn't work. Any help will be appreciated.

Answer 1

Update (related to your comment).

This can only be done with Javascript (jQuery) and Ajax as it's a client side event and nothing is submitted when making an action on a checkout field.

When this checkbox will be checked, a specific product will be added to cart refreshing the checkout order review data. If the checkbox is unchecked by the customer, it will remove the specific product, refreshing the checkout order review data.

Update changes: I have changed the checkbox under payment options and lightly changed the jQuery code, to handle the checkbox value, as it's now Ajax refreshed too.

The code:

// Display a custom checkout field
add_action( 'woocommerce_checkout_before_terms_and_conditions', 'custom_checkbox_checkout_field' );
function custom_checkbox_checkout_field() {
    $value = WC()->session->get('add_a_product');

    woocommerce_form_field( 'cb_add_product', array(
        'type'          => 'checkbox',
        'label'         => '  ' . __('Add a demo product to your order'),
        'class'         => array('form-row-wide'),
    ), $value == 'yes' ? true : false );
}


// The jQuery Ajax request
add_action( 'wp_footer', 'checkout_custom_jquery_script' );
function checkout_custom_jquery_script() {
    // Only checkout page
    if( is_checkout() && ! is_wc_endpoint_url() ):

    // Remove custom WC session variables on load
    if( WC()->session->get('add_a_product') ){
        WC()->session->__unset('add_a_product');
    }
    if( WC()->session->get('product_added_key') ){
        WC()->session->__unset('product_added_key');
    }
    // jQuery Ajax code
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof wc_checkout_params === 'undefined')
            return false;

        $('form.checkout').on( 'change', '#cb_add_product', function(){
            var value = $(this).prop('checked') === true ? 'yes' : 'no';

            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'add_a_product',
                    'add_a_product': value,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log(result);
                }
            });
        });
    });
    </script>
    <?php
    endif;
}

// The Wordpress Ajax PHP receiver
add_action( 'wp_ajax_add_a_product', 'checkout_ajax_add_a_product' );
add_action( 'wp_ajax_nopriv_add_a_product', 'checkout_ajax_add_a_product' );
function checkout_ajax_add_a_product() {
    if ( isset($_POST['add_a_product']) ){
        WC()->session->set('add_a_product', esc_attr($_POST['add_a_product']));
        echo $_POST['add_a_product'];
    }
    die();
}

// Add remove free product
add_action( 'woocommerce_before_calculate_totals', 'adding_removing_specific_product' );
function adding_removing_specific_product( $cart ) {
    if (is_admin() && !defined('DOING_AJAX'))
        return;

    if ( did_action( 'woocommerce_before_calculate_totals' ) >= 2 )
        return;

    // HERE the specific Product ID
    $product_id = 53;

    if( WC()->session->get('add_a_product') == 'yes' && ! WC()->session->get('product_added_key') )
    {
        $cart_item_key = $cart->add_to_cart( $product_id );
        WC()->session->set('product_added_key', $cart_item_key);
    }
    elseif( WC()->session->get('add_a_product') == 'no' && WC()->session->get('product_added_key') )
    {
        $cart_item_key = WC()->session->get('product_added_key');
        $cart->remove_cart_item( $cart_item_key );
        WC()->session->__unset('product_added_key');
    }
}

Code goes in function.php file of your active child theme (or active theme). Tested and work.

---

1. The order items and the checkbox custom field under payment methods

2. When enabling the checkbox, the product is added and appear in order items: