Change payment gateway when textarea is filled

Question

In Woocommerce I have created a custom text area field in the checkout page

so if I write anything on the textarea the payment gateway will change to "Cheque" and if there is nothing then it will be only "paypal"

I have no idea how to do this as I have very little knowledge in WooCommerce

woocommerce_form_field( 'custom_product', array(

   'type' => 'textarea',
   'label'      => __('Custom products', 'woocommerce'),
   'required'   => false,
   'class'      => array('form-row-wide'),
   'clear'     => true,
       ), $checkout->get_value( 'custom_product' ));

Any help would be very much appreciated.

Thanks

Answer 1

Yes you can do that with some simple jQuery script depending on which payment gateway you want to enable.

May be you need first to add an additional CSS class to your texarea, to better target it with the query script (I have completed a little bit your code for testing purpose only).

So your complete code function will be:

add_action( 'woocommerce_after_order_notes', 'custom_checkout_textarea_field', 10, 1 );
function custom_checkout_textarea_field( $checkout ){

    echo '<div id="custom-texarea-field">
        <h2>' . __('My Field Title', 'woocommerce') . '</h2>';

    woocommerce_form_field( 'custom_product', array(

       'type' => 'textarea',
       'label'      => __('Custom products', 'woocommerce'),
       'required'   => false,
       'class'      => array('custom-product-ta form-row-wide'), ## @ <== HERE
       'clear'     => true,
    ), $checkout->get_value( 'custom_product' ));

    echo '</div>';

} 

Then now you can add also the code below hooked in woocommerce_checkout_before_customer_details checkout action hook, that will embed some query script into your checkout page.

The jQuery script is going to enabled, in this example, the radio button for Cheque payment method, when your text area will be filled with something.

So this is the additional code for that purpose:

add_action('woocommerce_checkout_before_customer_details','custom_jquery_for_texarea');
function custom_jquery_for_texarea(){
   ?>
   <script>
   jQuery(document).ready(function($) {
       $('.custom-product-ta textarea').on('input', function(){
            $('.wc_payment_method payment_method_cheque > input[name=payment_method]').prop('checked', true); 
       });
   });
   </script>
   <?php 
}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

This code is tested and works…

---

Related answer to jQuery code: JQuery: detect change in input field

WooCommerce documentation: Customizing checkout fields using actions and filters

Answer 2

If you can see the checkboxes to select payment methods on the checkout page then you can use jQuery to simulate a click once the text area is filled:

jQuery('textarea').on('input', function(){
  jQuery('#payment_method_cheque').click(); // check if the radio input has this id #payment_method_cheque and change if not
});