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? — TTareq
tip is an int from 0.01 to 1 (1% to 100%) from the total order amount which include the tax already — Blinders BYX
Possible duplicate of woocommerce custom checkout field to add fee to order ajax — mujuonly

kenpachi_zaraki kenpachi_zaraki · Accepted Answer · 2020-09-26T06:10:12

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

2 Answers