Add Tip input by customer to WooCommerce checkout page

Question

I am developing a food ordering WooCommerce store. I am trying to add an input field or a grouped button to let the customer add delivery tips to checkout total.

Backend Part: I wrote an action that add a tip to checkout based on the percentage given (let's say 10% of total order)

add_action( 'woocommerce_cart_calculate_fees', 'calculateTipsPercentage', 10, 1 );
function calculateTipsPercentage( $cart ) {

    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    $total_tax = 0;
    $carttotal= 0;
    // Get the unformated taxes array
    $taxes = $cart->get_taxes(); 

    //get Tax amount from taxes array
    foreach($taxes as $tax) $total_tax += $tax;



   global $woocommerce;


   $percentage = 0.10;//percentage of tips (must be entered by customer)
   $carttotalamount = ( $woocommerce->cart->cart_contents_total + $woocommerce->cart->shipping_total );  //Cart total without tax
   $totalorderwithTax = ( $carttotalamount +  $total_tax); //cart total with tax 
   $extrafee= round( $totalorderwithTax  * $percentage, 2 ); //extra fee amount 

   $percetagetoShow = ( $percentage * 100 );  

    $woocommerce->cart->add_fee( "Tip ({$percetagetoShow}%)", $extrafee, true, '' );




}

My problem is with the Front-end part.

how can I add any kind of input field with a button (add tips to checkout) that let the customer add the percentage and click this button which will fire the action found above. or if I can do it through ajax/jquery without the button (without refreshing the page) which would be better.

any help would be appreciated.

Would you please explain about *tip*? is it just string or SURCHAGE (intval) etc? — Toriqul Islam Tareq, Jul 28 '17 at 04:24
tip is an int from 0.01 to 1 (1% to 100%) from the total order amount which include the tax already — Blinders BYX, Jul 28 '17 at 04:32
Possible duplicate of [woocommerce custom checkout field to add fee to order ajax](https://stackoverflow.com/questions/32119053/woocommerce-custom-checkout-field-to-add-fee-to-order-ajax) — mujuonly, Mar 13 '19 at 19:58

score 2 · Answer 1 · answered Sep 26 '20 at 06:10

Woocommerce has various hooks that you can use to add your custom fields to the checkout page such as *

woocommerce_review_order_before_shipping woocommerce_review_order_after_shipping woocommerce_review_order_before_order_total

or you can visit here

Add Tip input by customer to WooCommerce checkout page

1 Answers1