Checkbox field that add / remove a custom fee in WooCommerce

Question

Need to add custom fee to cart based on form checkbox element. Current action based on product category in cart works great and adds custom delivery fee but customer has option to pickup order which is free. Can checkbox checked for delivery trigger WooCommerce add custom fee action?

Using example from "perform an action on checkbox checked or unchecked event on html form" can .change(function) function delivery(id){ if(this.checked) { add_action for custom cart fee?

 add_action( 'woocommerce_cart_calculate_fees', 'add_a_custom_fee', 10, 1 );
function add_a_custom_fee( $cart ) {
        $amount = 25;
        $cart->add_fee( __('Custom fee'), $amount );
}

Expected custom cart fee to appear in cart when checkbox checked.

Answer 1

The following code will display a checkbox field on checkout page that will enable/disable a custom fee:

// Display a checkbox field after billing fields
add_action( 'woocommerce_after_checkout_billing_form', 'add_custom_checkout_checkbox', 20 );
function add_custom_checkout_checkbox(){

    woocommerce_form_field( 'custom_fee', array(
        'type'  => 'checkbox',
        'label' => __(' Custom fee'),
        'class' => array( 'form-row-wide' ),
    ), '' );
}

// Remove "(optional)" label on checkbox field
add_filter( 'woocommerce_form_field' , 'remove_order_comments_optional_fields_label', 10, 4 );
function remove_order_comments_optional_fields_label( $field, $key, $args, $value ) {
    // Only on checkout page for Order notes field
    if( 'custom_fee' === $key && is_checkout() ) {
        $optional = '&nbsp;<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
        $field = str_replace( $optional, '', $field );
    }
    return $field;
}

// Ajax / jQuery script
add_action( 'wp_footer', 'custom_fee_script' );
function custom_fee_script() {
    // On checkoutpage
    if( ( is_checkout() && ! is_wc_endpoint_url() ) ) :
    ?>
    <script type="text/javascript">
    jQuery( function($){
        if (typeof woocommerce_params === 'undefined')
            return false;

        console.log('defined');

        $('input[name=custom_fee]').click( function(){
            var fee = $(this).prop('checked') === true ? '1' : '';

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

// Get the ajax request and set value to WC session
add_action( 'wp_ajax_custom_fee', 'get_ajax_custom_fee' );
add_action( 'wp_ajax_nopriv_custom_fee', 'get_ajax_custom_fee' );
function get_ajax_custom_fee() {
    if ( isset($_POST['custom_fee']) ) {
        WC()->session->set('custom_fee', ($_POST['custom_fee'] ? '1' : '0') );
        echo WC()->session->get('custom_fee');
    }
    die();
}

// Add / Remove a custom fee
add_action( 'woocommerce_cart_calculate_fees', 'add_remove_custom_fee', 10, 1 );
function add_remove_custom_fee( $cart ) {
    // Only on checkout
    if ( ( is_admin() && ! defined( 'DOING_AJAX' ) ) || is_cart() )
        return;

    $fee_amount = 25;

    if( WC()->session->get('custom_fee') )
        $cart->add_fee( __( 'Custom fee', 'woocommerce'), $fee_amount );
}

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