Show or hide html element on chosen shipping method change in Woocommerce

Question

I'm trying to show/hide some elements from my checkout page, based on the chosen shipping method. The page elements I'm trying to show/hide come from another plugin, so I tried to change the display properties for them. I've looked to many thread like:

Show or hide checkout fields based on shipping method in Woocommerce 3

But it's for checkout fields, and I'm not sure how to do it for page elements.

Then based on this answer thread Here's my code so far:

add_action( 'wp_footer', 'conditionally_hidding_order_delivery_date' );
function conditionally_hidding_order_delivery_date(){
    // Only on checkout page
    if( ! is_checkout() ) return;

    // HERE your shipping methods rate ID "Home delivery"
    $home_delivery = 'distance_rate_shipping';
    ?>
    <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','#e_deliverydate_field' );
                showHide('hide','#time_slot_field' );
            }

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

But it's not working completely (the initializing function is not working.)

Any help is very much appreciated.

Additional edit:

<p class="form-row form-row-wide validate-required" id="e_deliverydate_field" data-priority="" style="display: block;"><label for="e_deliverydate" class="">Date<abbr class="required" title="required">*</abbr></label><span class="woocommerce-input-wrapper"><input class="input-text hasDatepicker" name="e_deliverydate" id="e_deliverydate" placeholder="Choose a Date" value="" style="cursor:text !important;" type="text"></span></p>

My objective is to change the display properties for p element from block to none, and vice versa.

Answer 1

The needed code is something much more simple, than the one used in my other answers, but you need to be sure that the targeted chosen shipping method is 'distance_rate_shipping' as I can't test it.

For initialization problem, see the solution exposed at the end of my answer.

The simplified needed code:

// Embedded jQuery script
add_action( 'wp_footer', 'checkout_delivery_date_script' );
function checkout_delivery_date_script() {
    // Only checkout page
    if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;
    ?>
    <script type="text/javascript">
    jQuery( function($){
        var a = 'input[name^="shipping_method"]', b = a+':checked',
            c = 'distance_rate_shipping',
            d = '#e_deliverydate_field,#time_slot_field';

        // Utility function that show or hide the delivery date
        function showHideDeliveryDate(){
            if( $(b).val() == c )
                $(d).show();
            else
                $(d).hide('fast');
            console.log('Chosen shipping method: '+$(b).val()); // <== Just for testing (to be removed)
        }

        // 1. On start
        showHideDeliveryDate();

        // 2. On live event "change" of chosen shipping method
        $('form.checkout').on('change', a, function(){
            showHideDeliveryDate();
        });
    });
    </script>
    <?php
}

Code goes in function.php file of your active child theme (or theme). It should work.

---

The initialization problem:

It's certainly because the plugin you are using that generates the delivery date output is delayed after initialization

The solution can be to add some delay on initialization execution.

So should try to replace this:

// 1. On start
showHideDeliveryDate();

By the following in my code (adjusting the execution delay to something higher or lower than 500):

// 1. On start
setTimeout(function(){
    showHideDeliveryDate();
}, 500);