1

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.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
tmprojects
  • 15
  • 1
  • 5

1 Answers1

6

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.

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • This code worked perfectly for the past month but now has lost its ability to identify "Food" category items. The delivery checkbox should only appear if "Food" category items are in cart but now it appears regardless. Still great code just curious why that function would disable. – tmprojects Jun 03 '19 at 00:58
  • @tmprojects This code still works perfectly on last WooCommerce 3.6.4 … There is nothing related in this thread to a "Food" category, so may be you are making some confusion. – LoicTheAztec Jun 03 '19 at 09:47
  • @stemon Sorry but this works! just tested on last WC/WP version under storefront theme. – LoicTheAztec Apr 01 '21 at 23:03
  • This is a great piece of code, which works great. – jeet singh Jun 08 '21 at 08:51
  • 1
    I'm using this code and it works great, however I am finding if you check the field (so it adds the fee), then you do a refresh on the page, on reload it seems to retain the checked value on the field (even though it displays visually as unchecked) and the fee remains in place. The value needs to be reset on refresh so that the fee is removed on reload. Hope this makes sense. – Zach Nicodemous Aug 05 '21 at 01:29
  • @ZachNicodemous the remove_fee function was not written there. You need to write it and also you need to set the logic in the js part. – MD. Atiqur Rahman Apr 11 '22 at 21:19