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.

Answer 1

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