3

Hi I added custom field in billing form using this code below.

add_filter('woocommerce_billing_fields', 'custom_woocommerce_billing_fields');

function custom_woocommerce_billing_fields($fields)
{

    $fields['billing_options'] = array(
        'label' => __('If you pay by Invoice. Please add Your Invoice Number Here ', 'woocommerce'), // Add custom field label
        'placeholder' => _x('Invoice Number', 'placeholder', 'woocommerce'), // Add custom field placeholder
        'required' => false, // if field is required or not
        'clear' => false, // add clear or not
        'type' => 'text', // add field type
        'class' => array('my-css')    // add class name
    );

    return $fields;
}

I have two payment options 1. Cash on delivery 2.Realex Payments HPP – Credit Card.

Is it possible to show custom field only then 1. Cash on delivery selected as payment option.?

Thank you

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
soliddigital
  • 176
  • 3
  • 16

1 Answers1

5

The following code will hide billing_options custom optional checkout field when the selected payment method is Cash on delivery ("cod"):

// Conditional Show hide checkout fields based on chosen payment methods
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
    // Only on checkout page
     if ( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script>
        jQuery(function($){
            var a = 'input[name="payment_method"]',
                b = a + ':checked',
                c = '#billing_options_field'; // The checkout field <p> container selector

            // Function that shows or hide checkout fields
            function showHide( selector = '', action = 'show' ){
                if( action == 'show' )
                    $(selector).show( 200, function(){
                        $(this).addClass("validate-required");
                    });
                else
                    $(selector).hide( 200, function(){
                        $(this).removeClass("validate-required");
                    });
                $(selector).removeClass("woocommerce-validated");
                $(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
            }

            // Initialising: Hide if choosen payment method is "cod"
            if( $(b).val() !== 'cod' )
                showHide( c, 'hide' );
            else
                showHide( c );

            // Live event (When payment method is changed): Show or Hide based on "cod"
            $( 'form.checkout' ).on( 'change', a, function() {
                if( $(b).val() !== 'cod' )
                    showHide( c, 'hide' );
                else
                    showHide( c );
            });
        });
    </script>
    <?php
    endif;
}

Code goes in functions.php file of your active child theme (or in a plugin). Tested and works.

Newly similar answer:
Enable/disable WooCommerce a required checkout field based on selected payment method

LoicTheAztec
  • 229,944
  • 23
  • 356
  • 399
  • This works. I just wanted to add some tips for the laymen. 1) In his code, "cod" is used as an example. Find yours by going to WooCommerce > Settings > Payments Tab > and hover over the one you want. Look at the very end of the URL path in the bottom left corner. 2) Note this is added in TWO places of the code. 3) This selector is the payment method that shows your field when that payment gateway IS selected. – user3035649 Mar 22 '22 at 16:18
  • One more thing, 4) Don't forget to replace "#billing_options_field" with the ID of the section/divider that you want to show/hide, and you must include the # too; which indicates that it's an ID and not a CLASS or other type. – user3035649 Mar 22 '22 at 16:18
  • This code is working perfectly for me. But since the field I'm hiding is a required field, when the customer places an order using another payment method, I get an error saying the hidden field is required and the customer can't place the order. Is there a way to completely disable the field when using another payment method? – leandroprz Mar 20 '23 at 20:34