Woocommerce – Add a Donation Box on Checkout Page

In this article we will see how to add a donation box on the checkout page, using woocommerce custom Cart Fee option.

Let’s add a text box for collecting donation amount before the Place Order button on Checkout page. place the below snippet in your functions.php

function custom_donation_form() { ?>
        <input type="number" name="donation_amount" class="input-text" style="display: inline-block !important; width: auto !important;" placeholder="<?php echo esc_attr( 'Donate Some.?', 'woocommerce' ); ?>" value="" />		
<?php 
}
add_action( 'woocommerce_review_order_before_submit', 'custom_donation_form', 99 );

Checkout  Page

Ok we have added donation text box on the checkout page, let’s check if user has entered any amount as a donation, while he placing the order, if (s)he does then add that amount as cart fee.

function donation_add_fee( $cart ) {	
	if( isset( $_REQUEST["donation_amount"] ) && !empty( $_REQUEST["donation_amount"] ) ) {
		if( is_numeric( $_REQUEST["donation_amount"] ) && $_REQUEST["donation_amount"] > 0 ) {
			WC()->cart->add_fee( "Donation", $_REQUEST["donation_amount"], true, "" );
		}
	}		
}
add_action( 'woocommerce_cart_calculate_fees', 'donation_add_fee', 1 );

Order Review

4 Comment(s)

  1. Viktor May 25, 2016

    Is it possible to add this donation box to a specific product page? Thanks

    1. Saravana Kumar K May 27, 2016

      Yes it is

      function add_donation_field() {
      	echo '<table class="variations" cellspacing="0">
                  <tbody>
                      <tr>
                          <td class="label"><label>Gift Wrap It</label></td>
                          <td class="value">
                              <input type="number" name="donation_amount" placeholder="'. esc_attr_e( 'Donate Some.?', 'woocommerce' ) .'" value="" />
                          </td>
                      </tr>
                  </tbody>
              </table>';
      }
      add_action( 'woocommerce_before_add_to_cart_button', 'add_donation_field' );
      
      function save_donation_fee( $cart_item_data, $product_id ) {
      	 
      	if( isset( $_POST['donation_amount'] ) && $_POST['donation_amount'] != "" ) {
      		$cart_item_data[ "donation_amount" ] = $_POST['donation_amount'];
      	}
      	return $cart_item_data;
      	 
      }
      add_filter( 'woocommerce_add_cart_item_data', 'save_donation_fee', 99, 2 );
      
      function donation_add_fee( $cart ) {
      	foreach ( WC()->cart->cart_contents as $key => $value ) {
      		if( isset( $value["donation_amount"] ) && is_numeric( $value["donation_amount"] ) && $value["donation_amount"] > 0 ) {
      			WC()->cart->add_fee( "Donation", $value["donation_amount"], true, "" );			
      		}
      	}
      }
      add_action( 'woocommerce_cart_calculate_fees', 'donation_add_fee', 1 );
      
  2. Rolen Sian June 8, 2016

    Wow! Nice one, how about adding a dropdown on checkout page and add fee everytime dropdown changes?

    1. Saravana Kumar K June 8, 2016

      Hi, I guess the same snippets would work for your scenario too right.? except you need to update custom_donation_form() to add select box instead of input.

Leave a Reply

Your email address will not be published. Required fields are marked *