Conditionally hide a Checkout field in WooCommerce based on chosen shipping

Question

in WooCommerce, I am trying to hide the company name field whenever "delivery to home" is selected. I've tried a bunch of different things.

This is my last attempt:

add_filter('woocommerce_checkout_fields', 'xa_remove_billing_checkout_fields');

function xa_remove_billing_checkout_fields($fields) {
    $shipping_method ='pakkelabels_shipping_gls1'; // Set the desired shipping method to hide the checkout field(s).
    global $woocommerce;
    $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
    $chosen_shipping = $chosen_methods[0];

    if ($chosen_shipping == $shipping_method) {
        unset($fields['billing']['billing_company']); // Add/change filed name to be hide
}
    return $fields;
}

But all it does is move the Shipping company from the first field to the last.

How can I conditionally hide a specific checkout field based on chosen shipping method?

Answer 1

As it's a live event, you need to use javascript/jQuery to make it work. The Billing company has to be not required like in default WooCommerce checkout page.

The following code will hide the "Billing company" field, when "Home delivery" shipping is chosen:

// Conditional Show hide checkout fields based on chosen shipping methods
add_action( 'wp_footer', 'conditionally_hidding_billing_company' );
function conditionally_hidding_billing_company(){
    // Only on checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

    // HERE your shipping methods rate ID "Home delivery"
    $home_delivery = 'pakkelabels_shipping_gls1';
    ?>
    <script>
        jQuery(function($){
            // Choosen shipping method selectors slug
            var shipMethod = 'input[name^="shipping_method"]',
                shipMethodChecked = shipMethod+':checked';

            // Function that shows or hide imput select fields
            function showHide( actionToDo='show', selector='' ){
                if( actionToDo == '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 shipping method is "Home delivery"
            if( $(shipMethodChecked).val() == '<?php echo $home_delivery; ?>' )
                showHide('hide','#billing_company_field' );

            // Live event (When shipping method is changed)
            $( 'form.checkout' ).on( 'change', shipMethod, function() {
                if( $(shipMethodChecked).val() == '<?php echo $home_delivery; ?>' )
                    showHide('hide','#billing_company_field');
                else
                    showHide('show','#billing_company_field');
            });
        });
    </script>
    <?php
}

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

Tested and works.