title: Display a checkbox that add a fee in Woocommerce checkout page
body: <p>In Woocommerce checkout page, I'am trying to add a check box on checkout page</p>
  
  <p>I have referred to these articles </p>
  
  <p><a href="https://stackoverflow.com/questions/32119053/woocommerce-custom-checkout-field-to-add-fee-to-order-ajax">woocommerce custom checkout field to add fee to order ajax
  </a></p>
  
  <p><a href="https://stackoverflow.com/questions/55916226/checkbox-field-that-add-remove-a-custom-fee-in-woocommerce">Checkbox field that add / remove a custom fee in WooCommerce</a></p>
  
  <p><a href="https://stackoverflow.com/questions/55519166/add-a-checkout-checkbox-field-that-enable-a-percentage-fee-in-woocommerce">Add a checkout checkbox field that enable a percentage fee in Woocommerce
  </a></p>
  
  <pre><code>add_action( 'woocommerce_review_order_before_order_total', 'checkout_shipping_form_packing_addition', 20 );
  function checkout_shipping_form_packing_addition( ){
  echo '&lt;tr class="packing-select"&gt;&lt;th&gt;';
  woocommerce_form_field( 'add_gift_box', array(
      'type'          =&gt; 'checkbox',
      'class'         =&gt; array('add_gift_box form-row-wide'),
      'label'         =&gt; __('Hỗ trợ cài đặt'),
      'placeholder'   =&gt; __(''),
      ));
  echo '&lt;/th&gt;&lt;td&gt;';}
  
  add_action( 'wp_footer', 'woocommerce_add_gift_box' );
  function woocommerce_add_gift_box() {
  if (is_checkout()) {
  ?&gt;
  &lt;script type="text/javascript"&gt;
  jQuery( document ).ready(function( $ ) {
      $('#add_gift_box').click(function(){
          jQuery('body').trigger('update_checkout');
      });
  });
  &lt;/script&gt;
  &lt;?php
  }}
  add_action( 'woocommerce_cart_calculate_fees', 'woo_add_cart_fee' );
  function woo_add_cart_fee( $cart ){
      if ( ! $_POST || ( is_admin() &amp;&amp; ! 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'])) {
      $sl = WC()-&gt;cart-&gt;get_cart_contents_count();
      $extracost = 50000 * $sl; // not sure why you used intval($_POST['state']) ?
      WC()-&gt;cart-&gt;add_fee( 'Hỗ trợ cài đặt x '.$sl.'', $extracost );
  }}
  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( 'add_gift_box' === $key &amp;&amp; is_checkout() ) {
      $optional = '&amp;nbsp;&lt;span class="optional"&gt;(' . esc_html__( 'optional', 'woocommerce' ) . ')&lt;/span&gt;';
      $field = str_replace( $optional, '', $field );
  }
  return $field;
  }
  </code></pre>
  
  <p>It does not work as I would like. What I am doing wrong?</p>
  
  <p>Any help is appreciated.</p>