Jquery Show / Hide based on checkbox status

Question

I am trying to customize the local pickup shipping option in woocommerce. Basically, if a Local Pickup option is selected from the woocommerce settings, it will show up on checkout for every product. I'd like to customize it in a way that it will only show up for selected product.

So I added a new checkbox custom field meta on the product edit page. Checkbox should be checked if the local pickup is available on the product or unchecked if local pickup not available.

My code in functions.php looks like this:

<?php
// Display Fields
add_action( 'woocommerce_product_options_shipping', 'woo_add_custom_general_fields' );

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );

function woo_add_custom_general_fields() {

  global $woocommerce, $post;

  echo '<div class="options_group">';

  // Checkbox Local Pickup / Collection Available
  woocommerce_wp_checkbox( 
  array( 
      'id'            => '_shipping_collection', 
      'wrapper_class' => 'show_if_simple', 
      'label'         => __('Local Pickup / Collection Available', 'woocommerce' ), 
      'description'   => __( 'This product is available for collection', 'woocommerce' ) 
      )
  );

  echo '</div>';    
}

function woo_add_custom_general_fields_save( $post_id ){
    // Checkbox Local Pickup / Collection Available - Save Data
    $collection_checkbox = isset( $_POST['_shipping_collection'] ) ? 'yes' : 'no';
    update_post_meta( $post_id, '_shipping_collection', $collection_checkbox );
}
?>

Everything working great so far, checkbox is displaying and saving .

Now as I mentioned earlier, the local pickup option is available on every single product. I would like to customize it the way that it will only show on products where this checkbox ( _shipping_collection ) is checked

The Local Pickup element that displays on the checkout is generated here: https://github.com/woothemes/woocommerce/blob/master/templates/cart/cart-shipping.php

using the following code:

<ul id="shipping_method">
                    <?php foreach ( $available_methods as $method ) : ?>
                        <li>
                            <input type="radio" name="shipping_method[<?php echo $index; ?>]" data-index="<?php echo $index; ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" value="<?php echo esc_attr( $method->id ); ?>" <?php checked( $method->id, $chosen_method ); ?> class="shipping_method" />
                            <label for="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>" id="shipping_method_<?php echo $index; ?>_<?php echo sanitize_title( $method->id ); ?>"><?php echo wp_kses_post( wc_cart_totals_shipping_method_label( $method ) ); ?></label>
                        </li>
                    <?php endforeach; ?>
                </ul>

I added the ID selector in the label, so I would be able to identify the label by its ID when hiding it.

On the front end checkout, the code will generate the following ID:

#shipping_method_0_local_pickup

So if I now try to hide it with CSS using:

#shipping_method_0_local_pickup {
display: none;
}

It works great!, the field is hidden from the checkout.

So I have now figured that I should be using a Jquery for the checkbox functionality and after some searching around I digged up an example script and so after changing the selectors in it to fit my selectors, I ended up with this:

$('#_shipping_collection').click(function() {
    if($(this).is(":checked")) {
        $('#shipping_method_0_local_pickup').show();
    } else {
        $('#shipping_method_0_local_pickup').hide();
    }
    })

I figured that I this script should probably be placed in this file here: https://github.com/woothemes/woocommerce/blob/master/assets/js/frontend/add-payment-method.js

But unfortunately that doesn't seem to work.

Would you have any suggestions ?

Answer 1

1. Is jQuery loaded?
2. Do you add the event handler after the page has loaded -
3. Is the ID unique?

Like this - Simpler code,

$(function() { 
  $('#_shipping_collection').on("click",function() {
    $('#shipping_method_0_local_pickup').toggle(this.checked);
  }); 
});

Example

$(function() {
  $('#_shipping_collection').on("click", function() {
    $('#shipping_method_0_local_pickup').toggle(this.checked);
  });
});

#shipping_method_0_local_pickup { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="radio" name="_shipping_collection" id="_shipping_collection">
<label for="_shipping_collection" id="_shipping_collection"></label>

<div id="shipping_method_0_local_pickup">
  I should see this text if only if the checkbox is checked
</div>