Разрешить клиенту вводить пользовательскую сумму, если выбрана выпадающая опция (Woocommerce)

Question

Итак, я реализую поле «Добавить совет» при оформлении заказа в Woocommerce. Пока все выглядит хорошо, у меня есть выпадающий список, который отлично работает, используя AJAX для обновления итогов на основе 2 выборок ...

Первый, 5 долларов, добавленных к их заказу. Во-вторых, 10% добавляется на основе промежуточного итога. Что бы я хотел для третьего, это опция «Другая сумма», которая позволяет клиенту вводить сумму в долларах, которую он хотел бы дать чаевые. Это оказалось сложнее, поскольку я не гуру PHP, как бы я ни старался, хаха.

Ниже приведено то, что у меня есть. Кажется, все работает отлично - просто не хватает возможности ввода цифр c для клиента.

// -------------------------------------------
// ADD TIP TO CHECKOUT

// Add a custom select fields for tip option fee
add_action( 'woocommerce_review_order_after_shipping', 'checkout_shipping_tip_addition', 20 );
function checkout_shipping_tip_addition( ) {
    $domain = 'woocommerce';

    echo '<tr class="tip-select"><th>' . __('Tip Courier', $domain) . '</th><td>';

    $chosen   = WC()->session->get('chosen_tip');

    // Add a custom checkbox field
    woocommerce_form_field( 'chosen_tip', array(
        'type'      => 'select',
        'class'     => array( 'form-row-wide tip' ),
        'options'   => array(
            ''    => __("Choose a tip option ...", $domain),
            'dollar' => sprintf( __("%s", $domain), strip_tags( wc_price(5.00) ) ),
            'percent' => sprintf( __("10%%", $domain), strip_tags( wc_price(10) ) ),
            'other' => sprintf( __("Other Amount", $domain), strip_tags( wc_price(other) ) ),
        ),
        'required'  => true,
    ), $chosen );

    echo '</td></tr>';
}

// jQuery - Ajax script
add_action( 'wp_footer', 'checkout_shipping_tip_script' );
function checkout_shipping_tip_script() {
    // Only checkout page
    if ( is_checkout() && ! is_wc_endpoint_url() ) :

    WC()->session->__unset('chosen_tip');
    ?>
    <script type="text/javascript">
    jQuery( function($){
        $('form.checkout').on('change', 'select#chosen_tip', function(){
            var p = $(this).val();
            console.log(p);
            $.ajax({
                type: 'POST',
                url: wc_checkout_params.ajax_url,
                data: {
                    'action': 'woo_get_ajax_data',
                    'chosen_tip': p,
                },
                success: function (result) {
                    $('body').trigger('update_checkout');
                    console.log('response: '+result); // just for testing | TO BE REMOVED
                },
                error: function(error){
                    console.log(error); // just for testing | TO BE REMOVED
                }
            });
        });
    });
    </script>
    <?php
    endif;
}

// Php Ajax (Receiving request and saving to WC session)
add_action( 'wp_ajax_woo_get_ajax_data', 'woo_get_ajax_data' );
add_action( 'wp_ajax_nopriv_woo_get_ajax_data', 'woo_get_ajax_data' );
function woo_get_ajax_data() {
    if ( isset($_POST['chosen_tip']) ){
        $chosen_tip = sanitize_key( $_POST['chosen_tip'] );
        WC()->session->set('chosen_tip', $chosen_tip );
        echo json_encode( $chosen_tip );
    }
    die(); // Alway at the end (to avoid server error 500)
}

// Add a custom dynamic packaging fee
add_action( 'woocommerce_cart_calculate_fees', 'add_tip_fee', 20, 1 );
function add_tip_fee( $cart ) {
    if ( is_admin() && ! defined( 'DOING_AJAX' ) )
        return;

    $domain      = "woocommerce";
    $tip_fee = WC()->session->get( 'chosen_tip' ); // Dynamic tip fee
    $tip_percent = 10;

    if ( $tip_fee === 'dollar' ) {
        $label = __("Selected tip amount", $domain);
        $cost  = 5.00;
    } elseif ( $tip_fee === 'percent' ) {
        $label = __("Selected tip amount", $domain);
        $cost  = ($cart->get_subtotal() * $tip_percent / 100);
    }

    if ( isset($cost) )
        $cart->add_fee( $label, $cost );
}