woocommerce custom checkout field to add fee to order ajax

I’m trying to ad a custom fee to the order total upon checkout.
I’ve added a checkbox within woocommerce

add_action( 'woocommerce_after_checkout_billing_form', 'add_box_option_to_checkout' );
function add_box_option_to_checkout( $checkout ) {
    echo '<div id="message_fields">';
    woocommerce_form_field( 'add_gift_box', array(
        'type'          => 'checkbox',
        'class'         => array('add_gift_box form-row-wide'),

        'label'         => __('Ilość pudełek ozdobnych - 25 PLN/szt'),
        'placeholder'   => __(''),
        ), $checkout->get_value( 'add_gift_box' ));
}

Included a custom js file which schould handle the event

Read More
jQuery( document ).ready(function( $ ) {

  $('#add_gift_box').click(function(){
        var data = {
            action: 'woocommerce_add_gift_box',
            state: '200',
        };
        jQuery.ajax({
            type: 'POST',
            url: wc_checkout_params.ajax_url,
            data: data,
            success: function (code) {
                console.log(code);
                jQuery('body').trigger('update_checkout');
            },
            dataType: 'html'
        });

  });
});

And a php fee handling function

function woo_add_cart_fee( $data ){
  if ( is_admin() && ! defined( 'DOING_AJAX' ) || ! $_POST )  return;

  $extracost = 0;
  if (isset($_POST['state'])) {
    $extracost = intval($_POST['state']);
  }
  WC()->cart->add_fee( 'Ozdobne pudełka:', $extracost );

}
add_action( 'woocommerce_cart_calculate_fees', 'woo_add_cart_fee' );


add_action('wp_ajax_woocommerce_add_gift_box', 'woo_add_cart_fee', 10);
add_action('wp_ajax_nopriv_woocommerce_add_gift_box', 'woo_add_cart_fee', 10);

For some reasons the value of $_POST[‘state’] isn’t added, the function works when I give a hard coded value, I’ve tried many option but cant get this to work.

I’ve seen similar posts but none of them had the answer.

Related posts

2 comments

  1. The post data is sent by the AJAX functions in ‘post_data’, serialized. So to get the value of your checkbox, you only need to parse_str() this!

    parse_str( $_POST['post_data'], $post_data );
    

    then you can get your ‘add_gift_box’ option from $post_data['add_gift_box']. Note that upon order completion, this ‘post_data’ element is not available anymore and everything is in $_POST.

    Complete example, based on your code:


    1) adding the checkbox to the checkout

    add_action( 'woocommerce_after_checkout_billing_form', 'add_box_option_to_checkout' );
    function add_box_option_to_checkout( $checkout ) {
        echo '<div id="message_fields">';
        woocommerce_form_field( 'add_gift_box', array(
            'type'          => 'checkbox',
            'class'         => array('add_gift_box form-row-wide'),
    
            'label'         => __('Ilość pudełek ozdobnych - 25 PLN/szt'),
            'placeholder'   => __(''),
            ), $checkout->get_value( 'add_gift_box' ));
            echo '</div>';
    }
    

    2) script to update cart when checkbox clicked (no need for extra AJAX requests!)

    add_action( 'wp_footer', 'woocommerce_add_gift_box' );
    function woocommerce_add_gift_box() {
        if (is_checkout()) {
        ?>
        <script type="text/javascript">
        jQuery( document ).ready(function( $ ) {
            $('#add_gift_box').click(function(){
                jQuery('body').trigger('update_checkout');
            });
        });
        </script>
        <?php
        }
    }
    

    3) action to add the fee

    add_action( 'woocommerce_cart_calculate_fees', 'woo_add_cart_fee' );
    function woo_add_cart_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; // fallback for final checkout (non-ajax)
        }
    
        if (isset($post_data['add_gift_box'])) {
            $extracost = 25; // not sure why you used intval($_POST['state']) ?
            WC()->cart->add_fee( 'Ozdobne pudełka:', $extracost );
        }
    
    }
    
  2. This is awesome!! Thanks a lot. I’ve changed it a little bit to add a percentage instead. I know this is not a better answer but I have no reputation to push your answer up. For whoever was stuck like me..

    add_action( 'woocommerce_cart_calculate_fees', 'woo_add_cart_fee' ); function woo_add_cart_fee( $cart ){
      global $woocommerce;
    
        if ( ! $_POST || ( is_admin() && ! is_ajax() ) ) {
        return;
    }
    
    if ( isset( $_POST['post_data'] ) ) {
        parse_str( $_POST['post_data'], $post_data );
    } else {
        $post_data = $_POST; // fallback for final checkout (non-ajax)
    }
    
    if (isset($post_data['add_gift_box'])) {
    
    $percentage = 0.01;
    $surcharge = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total ) * $percentage;    
    $woocommerce->cart->add_fee( 'Surcharge', $surcharge, true, '' );
    }
    
    }
    

Comments are closed.