Woocommerce Question posted in
The official Woocommerce documentation can be found here.

Show or hide WooCommerce checkout fields based on pickup and delivery button

Dears,

i’m using snippet plugin to add my code to my ecommerace project , i have pickup and delivery plugin in my delivery option , what i’m trying to do is , once i select pickup option , customer address information fields will be hide which it is not logical to keep it appear and mandatory if pickup from restaurant selected.

i tried to add some other var and some of them works fine and other still appear after loading the page ( before loading and selecting the pickup they are disappear ( as an example the street ) and after loading street return and still appear

https://www.order.ramadaencorekuwait.com/checkout-2/

please let me know if there any issue with the code

add_action('wp_footer', 'custom_checkout_js_script');
function custom_checkout_js_script() {
    if( is_checkout() && ! is_wc_endpoint_url() ) :
    ?>
    <script language="javascript">
    jQuery( function($){
        var a = 'input[name="pi_delivery_type"]:checked',
            b = 'input[name="billing_address_4"]';
        var d = 'input[name="billing_address_3"]';
        var f = 'input[name="billing_avenue"]';
        var z = 'input[name="billing_address_2"]';
        var s = 'input[name="select2-billing_state-container"]';
        
        
        // Custom function that show hide specific field, based on radio input value
        function showHideField( value, field ){
            if ( value === 'pickup' ) {
                $(field).parent().parent().hide();
            } else {
                $(field).parent().parent().show();
            }
        }

        // On start after DOM is loaded
        showHideField( $(a).val(), b );
        showHideField( $(a).val(), d );
        showHideField( $(a).val(), f );
        showHideField( $(a).val(), z );
        showHideField( $(a).val(), s );
        // On radio button change live event
        $('form.woocommerce-checkout').on('change', a, function() {
            showHideField( $(this).val(), b );
            
            showHideField( $(this).val(), d );
            showHideField( $(this).val(), f );
            showHideField( $(this).val(), z );
            showHideField( $(this).val(), s );
        });
        
    });
    </script>
    <?php
    endif;
}
Tags:

2

Answers


  1. 0

    It might be simpler to assign a class to b, d, f, z and s. If you’ve already defined ‘a’, then you could do something like:

    $(a).change(function() {
   if ($(a).val() == 'pickup') {
      $(".special").hide();
   } else {
      $(".special").show();
   }
});
    Login or Signup to reply.
  2. 0

    Try the following code that disables the submit form everywhere when the delivery method is local pickup.

    You should replace (28): "local_pickup:28" with the id of your shipping method.

    add_action( 'woocommerce_after_checkout_form', 'disable_shipping_local_pickup' );
function disable_shipping_local_pickup( $available_gateways ) {
   // Part 1: Hide shipping based on the static choice @ Cart
   // Note: "#customer_details .woocommerce-shipping-fields" (formerly "#customer_details .col-2", but was too broad & was also hidding additional fields that aren't shipping related that just happened to be in the second column) strictly depends on your theme
   $chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
   $chosen_shipping = $chosen_methods[0];
   if ( 0 === strpos( $chosen_shipping, 'local_pickup:28' ) ) {
   ?>
      <script type="text/javascript">
         jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();
      </script>
   <?php
   }
   // Part 2: Hide shipping based on the dynamic choice @ Checkout
   // Note: "#customer_details .woocommerce-shipping-fields" (formerly "#customer_details .col-2", but was too broad & was also hidding additional fields that aren't shipping related that just happened to be in the second column) strictly depends on your theme
   ?>
      <script type="text/javascript">
         jQuery('form.checkout').on('change','input[name^="shipping_method"]',function() {
            var val = jQuery('input[name^="shipping_method"]:checked').val(); // If it changed, then it must be the radio options so check the one that's selected
            if (val.match("^local_pickup:28")) {
              jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();
            } else {
              jQuery('#customer_details .woocommerce-shipping-fields').fadeIn();
            }
         });
         // Also check if the zipcode switched to something where local pickup is the only option (similar to what's done in part 1 above, but happen based on what's currently being entered on the page [watch via ajaxComplete since the options that are available/selected might not be present when the zipcode change happens & it needs to load those in via AJAX])
         jQuery(document).ajaxComplete(function(){
             if(jQuery('input[name^="shipping_method"]').attr('type') === 'hidden'){ // There's only one option so check the hidden input field with the value
                var val = jQuery('input[name^="shipping_method"]').val();
            }else{ // Otherwise, it must be the radio options so check the one that's selected
                var val = jQuery('input[name^="shipping_method"]:checked').val();
            }
            if (val.match("^local_pickup:28")) {
              jQuery('#customer_details .woocommerce-shipping-fields').fadeOut();
            } else {
              jQuery('#customer_details .woocommerce-shipping-fields').fadeIn();
            }
         });
      </script>
   <?php
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search