Add or remove a fixed Fee based on a checkbox in WooCommerce checkout

Question

Using Add a dynamic fee based on a select field in WooCommerce Checkout answer code I managed to add a new fee on a checkbox change:

add_action('woocommerce_after_checkout_billing_form', 'checkout_shipping_form_packing_addition', 20);
function checkout_shipping_form_packing_addition()
{
    $domain = 'woocommerce';

    echo '<tr class="packing-select"><th>' . __('EMBRULHO?', $domain) . '</th><td>';

    $chosen   = WC()->session->get('chosen_packing');

    // Add a custom checkbox field
    woocommerce_form_field('chosen_packing', array(
        'type'      => 'checkbox',
        'class'     => array('form-row-wide packing'),
        'label'         => __('$5', 'woocommerce'),
        'required'  => false,
    ), $chosen);

    echo '</td></tr>';
}

// jQuery - Ajax script
add_action('wp_footer', 'checkout_shipping_packing_script');
function checkout_shipping_packing_script()
{
    // Only checkout page
    if (is_checkout() && !is_wc_endpoint_url()) :

        WC()->session->__unset('chosen_packing');
?>
        <script type="text/javascript">
            jQuery(function($) {
                $('form.checkout').on('change', 'input#chosen_packing', function() {
                    var p = $(this).prop('checked');    
                    console.log(p);
                    $.ajax({
                        type: 'POST',
                        url: wc_checkout_params.ajax_url,
                        data: {
                            'action': 'woo_get_ajax_data',
                            'packing': p,
                        },
                        success: function(result) {
                            $('body').trigger('update_checkout');
                            console.log('response: ' + result); // just for testing | TO BE REMOVED
                        },
                        error: function(error) {
                            console.log(error); // just for testing | TO BE REMOVED
                        }
                    });
                });
            });
        </script>
<?php
    endif;
}

// Php Ajax (Receiving request and saving to WC session)
add_action('wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data');
add_action('wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data');
function woo_get_ajax_data()
{
    if (isset($_POST['packing'])) {
        $packing = sanitize_key($_POST['packing']);
        WC()->session->set('chosen_packing', $packing);
        echo json_encode($packing);
    }
    die(); // Alway at the end (to avoid server error 500)
}

// Add a custom dynamic packaging fee
add_action('woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1);
function add_packaging_fee($cart)
{
    if (is_admin() && !defined('DOING_AJAX'))
        return;

    $domain      = "woocommerce";

    if(WC()->session->get('chosen_packing')){
        $label = __('Embrulho', $domain);
        $cost = 5;
    }
    if (isset($cost))
        $cart->add_fee($label, $cost);
}

How can I remove the fee when unselected?

It is a gift wrapping option, if selected an extra fee will be added to the total at checkout. If unselected the fee should be removed and checkout updated.

Answer 1

You need to simply to make some little changes in your code like:

add_action('woocommerce_after_checkout_billing_form', 'checkout_shipping_form_packing_addition', 20);
function checkout_shipping_form_packing_addition()
{
    $domain = 'woocommerce';

    echo '<tr class="packing-select"><th>' . __('EMBRULHO?', $domain) . '</th><td>';

    $chosen   = WC()->session->get('chosen_packing');

    // Add a custom checkbox field
    woocommerce_form_field('chosen_packing', array(
        'type'      => 'checkbox',
        'class'     => array('form-row-wide packing'),
        'label'         => __('$5', 'woocommerce'),
        'required'  => false,
    ), $chosen);

    echo '</td></tr>';
}

// jQuery - Ajax script
add_action('wp_footer', 'checkout_shipping_packing_script');
function checkout_shipping_packing_script()
{
    // Only checkout page
    if (is_checkout() && !is_wc_endpoint_url()) :
    ?>
    <script type="text/javascript">
        jQuery(function($) {
            $('form.checkout').on('change', 'input#chosen_packing', function() {
                $.ajax({
                    type: 'POST',
                    url: wc_checkout_params.ajax_url,
                    data: {
                        'action': 'woo_get_ajax_data',
                        'packing': $(this).prop('checked') ? 1 : 0,
                    },
                    success: function(result) {
                        $('body').trigger('update_checkout');
                        console.log('response: ' + result); // just for testing | TO BE REMOVED
                    },
                    error: function(error) {
                        console.log(error); // just for testing | TO BE REMOVED
                    }
                });
            });
        });
    </script>
    <?php
    else:
    WC()->session->__unset('chosen_packing');
    endif;
}

// Php Ajax (Receiving request and saving to WC session)
add_action('wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data');
add_action('wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data');
function woo_get_ajax_data()
{
    if (isset($_POST['packing'])) {
        $packing = sanitize_key($_POST['packing']);
        WC()->session->set('chosen_packing', $packing);
        echo json_encode($packing);
    }
    die(); // Alway at the end (to avoid server error 500)
}

// Add a custom dynamic packaging fee
add_action('woocommerce_cart_calculate_fees', 'add_packaging_fee', 20, 1);
function add_packaging_fee($cart)
{
    if (is_admin() && !defined('DOING_AJAX'))
        return;

    if( WC()->session->get('chosen_packing') ){
        $label = __('Embrulho', 'woocommerce');
        $cost = 5;
        $cart->add_fee($label, $cost);
    }
}

Code goes in functions.php file of the active child theme (or active theme). Tested and works.