Issue
I use code that hides the checkout fields if the Local Pickup shipping method is selected:
// Conditional Show hide checkout fields based on chosen shipping methods
add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() {
// HERE your shipping methods rate IDs
$local_pickup = 'local_pickup:3';
$pickpoint = 'wc_custom_shipping_pickpoint';
$required_text = esc_attr__( 'required', 'woocommerce' );
$required_html = '<abbr class="required" title="' . $required_text . '">*</abbr>';
?>
<script>
jQuery(function($){
var ism = 'input[name^="shipping_method"]', ismc = ism+':checked',
csa = 'input#ship-to-different-address-checkbox',
rq = '-required', vr = 'validate'+rq, w = 'woocommerce', wv = w+'-validated',
iv = '-invalid', fi = '-field', wir = w+iv+' '+w+iv+rq+fi,
b = '#billing_', s = '#shipping_', f = '_field',
a1 = 'country', a2 = 'address_1', a3 = 'address_2', a4 = 'postcode', a5 = 'state', a6 = 'city',
b1 = b+a1+f, b2 = b+a2+f, b3 = b+a3+f, b4 = b+a4+f, b5 = b+a5+f, b6 = b+a6+f,
s1 = s+a1+f, s2 = s+a2+f, s3 = s+a3+f, s4 = s+a4+f, s5 = s+a5+f, s6 = s+a6+f,
pickPoint = '<?php echo $pickpoint; ?>', localPickup = '<?php echo $local_pickup; ?>';
// Utility function to shows or hide checkout fields
function showHide( action='show', selector='' ){
if( action == 'show' )
$(selector).show(function(){
$(this).addClass(vr);
$(this).removeClass(wv);
$(this).removeClass(wir);
if( $(selector+' > label > abbr').html() == undefined )
$(selector+' label').append('<?php echo $required_html; ?>');
});
else
$(selector).hide(function(){
$(this).removeClass(vr);
$(this).removeClass(wv);
$(this).removeClass(wir);
if( $(selector+' > label > abbr').html() != undefined )
$(selector+' label > .required').remove();
});
}
// Initializing at start after checkout init (Based on the chosen shipping method)
setTimeout(function(){
if( $(ismc).val() == pickPoint ) // Chosen "Pick point" (Hiding "Delivery")
{
showHide('hide',b1 ); // Country
showHide('hide',b2 ); // Address 1
showHide('hide',b3 ); // Address 2
showHide('hide',b4 ); // Postcode
showHide('hide',b5 ); // State
showHide('hide',b6 ); // City
}
else if( $(ismc).val() == localPickup ) // Choosen "Local pickup" (Hidding "Take away")
{
showHide('hide',b1);
showHide('hide',b2);
showHide('hide',b3);
showHide('hide',b4);
showHide('hide',b5);
showHide('hide',b6);
}
else
{
showHide('hide',b1);
showHide('show',b2);
showHide('show',b3);
showHide('show',b4);
showHide('show',b5);
showHide('show',b6);
}
}, 100);
// When shipping method is changed (Live event)
$( 'form.checkout' ).on( 'change', ism, function() {
if( $(ismc).val() == pickPoint )
{
showHide('hide',b1);
showHide('hide',b2);
showHide('hide',b3);
showHide('hide',b4);
showHide('hide',b5);
showHide('hide',b6);
if( $(csa).prop('checked') ) {
showHide('hide',s1);
showHide('hide',s2);
showHide('hide',s3);
showHide('hide',s4);
showHide('hide',s5);
showHide('hide',s6);
}
}
else if( $(ismc).val() == localPickup )
{
showHide('hide',b1);
showHide('hide',b2);
showHide('hide',b3);
showHide('hide',b4);
showHide('hide',b5);
showHide('hide',b6);
if( $(csa).prop('checked') ) {
showHide('hide',s1);
showHide('hide',s2);
showHide('hide',s3);
showHide('hide',s4);
showHide('hide',s5);
showHide('hide',s6);
}
}
else
{
showHide('hide',b1);
showHide('show',b2);
showHide('show',b3);
showHide('show',b4);
showHide('show',b5);
showHide('show',b6);
if( $(csa).prop('checked') ) {
showHide('hide',s1);
showHide('show',s2);
showHide('show',s3);
showHide('show',s4);
showHide('show',s5);
showHide('hide',s6);
}
}
});
// When "shipping to different address" is changed (Live event)
$(csa).click( function() {
if( $(ismc).val() == pickPoint && $(this).prop('checked') )
{
showHide('hide',b1);
showHide('hide',b2);
showHide('hide',b3);
showHide('hide',b4);
showHide('hide',b4);
showHide('hide',b6);
showHide('hide',s1);
showHide('hide',s2);
showHide('hide',s3);
showHide('hide',s4);
showHide('hide',s5);
showHide('hide',s6);
}
else if( $(ismc).val() == localPickup && $(this).prop('checked') )
{
showHide('hide',b1);
showHide('hide',b2);
showHide('hide',b3);
showHide('hide',b4);
showHide('hide',b4);
showHide('hide',b6);
showHide('hide',s1);
showHide('hide',s2);
showHide('hide',s3);
showHide('hide',s4);
showHide('hide',s5);
showHide('hide',s6);
}
else
{
showHide('hide',b1);
showHide('show',b2);
showHide('show',b3);
showHide('show',b4);
showHide('show',b4);
showHide('show',b6);
showHide('hide',s1);
showHide('show',s2);
showHide('show',s3);
showHide('show',s4);
showHide('show',s5);
showHide('show',s6);
}
});
});
</script>
<?php
}
The problem is that I can't do this for multiple delivery methods. I need to specify local_pickup:3, local_pickup:6 and local_pickup:9. Hiding fields only works correctly with one specified delivery method.
Please help me to solve this problem. Thank you!
Solution
The above code does not make fileds not required. Only solution I've found to work around is fill up hidden fields with placeholder value.
// Conditional Show hide checkout fields based on chosen shipping methods
add_action( 'wp_footer', 'custom_checkout_field_script' );
function custom_checkout_field_script() {
// HERE your shipping methods rate IDs
$local_pickup = array('inpost_paczkomaty:15');
$required_text = esc_attr__( 'required', 'woocommerce' );
$required_html = '<abbr class="required" title="' . $required_text . '">*</abbr>';
?>
<script>
jQuery(function($){
var ism = 'input[name^="shipping_method"]',
ismc = ism+':checked',
csa = 'input#ship-to-different-address-checkbox',
rq = '-required',
vr = 'validate'+rq,
w = 'woocommerce',
wv = w+'-validated',
iv = '-invalid',
fi = '-field',
wir = w+iv+' '+w+iv+rq+fi,
b = '#billing_',
s = '#shipping_',
f = '_field',
a1 = 'country', a2 = 'address_1', a3 = 'address_2', a4 = 'postcode', a5 = 'state', a6 = 'city',
b1 = b+a1+f, b2 = b+a2+f, b3 = b+a3+f, b4 = b+a4+f, b5 = b+a5+f, b6 = b+a6+f,
s1 = s+a1+f, s2 = s+a2+f, s3 = s+a3+f, s4 = s+a4+f, s5 = s+a5+f, s6 = s+a6+f,
localPickup = '<?php echo json_encode($local_pickup); ?>';
// Utility function to shows or hide checkout fields
function showHide( action='show', selector='' ){
if( action == 'show' ){
$(selector).show(function(){
$(this).addClass(vr);
$(this).removeClass(wv);
$(this).removeClass(wir);
if( $(selector+' > label > abbr').html() == undefined )
$(selector+' label').append('<?php echo $required_html; ?>');
});
} else {
$(selector).hide(function(){
$(this).removeClass(vr);
$(this).removeClass(wv);
$(this).removeClass(wir);
$(this).find("[type='text']").val('00-000');
if( $(selector+' > label > abbr').html() != undefined ){
$(selector+' label > .required').remove();
}
});
}
}
// Initializing at start after checkout init (Based on the chosen shipping method)
setTimeout(function(){
if( localPickup.includes( $(ismc).val() ) ){ // Choosen "Local pickup" (Hidding "Take away")
showHide('hide',b1); //Country
showHide('hide',b2); //Address line 1
showHide('hide',b3); //Address line 2
showHide('hide',b4); //Postcode
showHide('hide',b5); //State
showHide('hide',b6); //City
}else{
showHide('hide',b1); //Country
showHide('show',b2); //Address line 1
showHide('hide',b3); //Address line 2
showHide('show',b4); //Postcode
showHide('hide',b5); //State
showHide('show',b6); //City
}
}, 100);
// When shipping method is changed (Live event)
$( 'form.checkout' ).on( 'change', ism, function() {
if( localPickup.includes( $(ismc).val() ) ){
showHide('hide',b1); //Country
showHide('hide',b2); //Address line 1
showHide('hide',b3); //Address line 2
showHide('hide',b4); //Postcode
showHide('hide',b5); //State
showHide('hide',b6); //City
if( $(csa).prop('checked') ) {
showHide('hide',s1);
showHide('hide',s2);
showHide('hide',s3);
showHide('hide',s4);
showHide('hide',s5);
showHide('hide',s6);
}
}else{
showHide('hide',b1); //Country
showHide('show',b2); //Address line 1
showHide('hide',b3); //Address line 2
showHide('show',b4); //Postcode
showHide('hide',b5); //State
showHide('show',b6); //City
if( $(csa).prop('checked') ) {
showHide('hide',s1);
showHide('hide',s2);
showHide('hide',s3);
showHide('hide',s4);
showHide('hide',s5);
showHide('hide',s6);
}
}
});
// When "shipping to different address" is changed (Live event)
$(csa).click( function() {
if( localPickup.includes( $(ismc).val() ) && $(this).prop('checked') ){
showHide('hide',b1);
showHide('hide',b2);
showHide('hide',b3);
showHide('hide',b4);
showHide('hide',b4);
showHide('hide',b6);
showHide('hide',s1);
showHide('hide',s2);
showHide('hide',s3);
showHide('hide',s4);
showHide('hide',s5);
showHide('hide',s6);
}else{
showHide('hide',b1);
showHide('hide',b2);
showHide('hide',b3);
showHide('hide',b4);
showHide('hide',b4);
showHide('hide',b6);
showHide('hide',s1);
showHide('show',s2);
showHide('hide',s3);
showHide('show',s4);
showHide('hide',s5);
showHide('show',s6);
}
});
});
</script>
<?php
}
Answered By - Marcin Rutkowski
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.