I was previously using this answer to hide checkout fields based on chosen shipping method, it worked fine until an update (3.4.2 current version) I think not sure what has changed but it doesn't work as intended anymore.
Previously when local pickup was chosen some fields were hidden and made optional and when delivery was chosen it would show those fields again all via dynamically without reloading the page.
Now it shows and hides the fields as required however, when delivery is chosen it is showing the correct fields marked as mandatory but also has the (optional) sign next to it and it makes it optional. See picture below.
Here's my modified snipper below:
add_filter('woocommerce_default_address_fields', 'custom_default_checkout_fields', 10, 1 );
function custom_default_checkout_fields( $address_fields ) {
$custom_fields = array( 'country', 'address_1', 'address_2', 'state', 'postcode');
foreach($custom_fields as $field)
$address_fields[$field]['required'] = false;
return $address_fields;
}
add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() {
$pickpoint = 'local_pickup:2';
$free_delivery = 'free_shipping:1';
$flat_rate = 'flat_rate:3';
$required = esc_attr__( 'required', 'woocommerce' );
?>
<script>
jQuery(function($){
var shippingMethod = $('input[name^="shipping_method"]:checked'),
required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>',
shippingChecked = $('input#ship-to-different-address-checkbox');
shippingChecked.change( function(){
console.log('Shipping Checked: '+shippingChecked.prop('checked'));
});
function showHide( actionToDo='show', selector='' ){
if( actionToDo == 'show' )
$(selector).show(function(){
$(this).addClass("validate-required");
$(this).removeClass("woocommerce-validated");
$(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
if( $(selector+' > label > abbr').html() == undefined )
$(selector+' label').append(required);
});
else
$(selector).hide(function(){
$(this).removeClass("validate-required");
$(this).removeClass("woocommerce-validated");
$(this).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
if( $(selector+' > label > abbr').html() != undefined )
$(selector+' label > .required').remove();
});
}
if( shippingMethod.val() == '<?php echo $pickpoint; ?>' )
{
showHide('show','#billing_country_field' );
showHide('hide','#billing_address_1_field' );
showHide('hide','#billing_address_2_field' );
showHide('hide','#billing_postcode_field' );
showHide('hide','#billing_state_field' );
}
else if( shippingMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>')
{
showHide('show','#billing_address_1_field');
showHide('show','#billing_address_2_field');
showHide('show','#billing_postcode_field');
showHide('hide','#billing_state_field');
showHide('hide','#billing_country_field');
}
$( 'form.checkout' ).on( 'change', 'input[name^="shipping_method"]', function() {
var shipMethod = $('input[name^="shipping_method"]:checked');
if( shipMethod.val() == '<?php echo $pickpoint; ?>' )
{
showHide('show','#billing_country_field');
showHide('hide','#billing_address_1_field');
showHide('hide','#billing_address_2_field');
showHide('hide','#billing_postcode_field');
showHide('hide','#billing_state_field');
}
else if( shipMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>')
{
showHide('show','#billing_address_1_field');
showHide('show','#billing_address_2_field');
showHide('show','#billing_postcode_field');
showHide('hide','#billing_state_field');
showHide('hide','#billing_country_field');
}
else
{
showHide('show','#billing_address_1_field');
showHide('show','#billing_address_2_field');
showHide('show','#billing_postcode_field');
showHide('show','#billing_state_field');
showHide('show','#billing_country_field');
}
});
$( 'input#ship-to-different-address-checkbox' ).click( function() {
var shipMethod = $('input[name^="shipping_method"]:checked');
if( shipMethod.val() == '<?php echo $pickpoint; ?>' && shippingChecked.prop('checked') == true )
{
showHide('show','#billing_country_field');
showHide('hide','#billing_address_1_field');
showHide('hide','#billing_address_2_field');
showHide('hide','#billing_postcode_field');
showHide('hide','#billing_state_field');
showHide('show','#shipping_country_field');
showHide('hide','#shipping_address_1_field');
showHide('hide','#shipping_address_2_field');
showHide('hide','#shipping_postcode_field');
showHide('hide','#shipping_state_field');
}
else if( shipMethod.val() == '<?php echo $free_delivery; ?>' || '<?php echo $flat_rate; ?>' && shippingChecked.prop('checked') == true )
{
showHide('show','#billing_address_1_field');
showHide('show','#billing_address_2_field');
showHide('show','#billing_postcode_field');
showHide('hide','#billing_state_field');
showHide('hide','#billing_country_field');
showHide('show','#shipping_address_1_field');
showHide('show','#shipping_address_2_field');
showHide('show','#shipping_postcode_field');
showHide('hide','#shipping_state_field');
showHide('hide','#shipping_country_field');
}
else if( shippingChecked.prop('checked') == false )
{
showHide('show','#shipping_address_1_field');
showHide('show','#shipping_address_2_field');
showHide('hide','#shipping_state_field');
showHide('hide','#shipping_country_field');
}
});
});
</script>
<?php
}
Any pointers would be much appreciated!
you can easily use css in this
.woocommerce form .form-row .required{
display: none ;
}
.woocommerce form .form-row .optional{
display: none ;
}