By default, WooCommerce assumes every physical product purchase requires a shipping address. While this is the standard for e-commerce, certain scenarios—such as local pickup or virtual products—don’t require a full set of billing or shipping fields. Reducing these unnecessary fields can significantly improve your checkout experience by simplifying the user journey.
1. Frontend: Dynamic Field Toggling with JavaScript
To provide a seamless experience, we should hide these fields as soon as the user selects a specific shipping method (e.g., “Local Pickup”). The following jQuery script monitors the shipping method selection and toggles the visibility of the address fields accordingly. We also hook into updated_checkout to ensure the state is preserved if the checkout fragments are refreshed.
jQuery(document).ready(function($) {
/**
* Show or hide address fields based on the selected shipping method
*/
var wclp_toggle_address_fields = function() {
var selected_method = $('input[name^="shipping_method"][type="radio"]:checked').val(),
address_fields = $('#billing_company_field, #billing_country_field, #billing_address_1_field, #billing_address_2_field, #billing_city_field, #billing_state_field, #billing_postcode_field');
// Replace 'local_pickup:1' with your specific shipping method ID
if (selected_method === 'local_pickup:1') {
address_fields.hide();
} else {
address_fields.show();
}
};
/**
* Trigger toggle on shipping method change
*/
$(document).on('change', 'input[name^="shipping_method"][type="radio"]', function() {
wclp_toggle_address_fields();
});
/**
* Ensure state is correct after checkout is updated (e.g., via AJAX)
*/
$(document.body).on('updated_checkout', function() {
wclp_toggle_address_fields();
});
// Initial check on page load
wclp_toggle_address_fields();
});2. Backend: Removing Field Requirements
Simply hiding fields with CSS or JavaScript isn’t enough. WooCommerce still performs server-side validation on required fields. If you hide a required field and a user submits the order, they will receive a validation error for a field they can no longer see. To prevent this, we use the woocommerce_checkout_fields filter to unset the requirements when our target shipping method is chosen.
add_filter('woocommerce_checkout_fields', function ($fields)
{
$chosen_methods = WC()->session->get('chosen_shipping_methods');
$chosen_shipping = $chosen_methods[0];
// Replace 'local_pickup:1' with your specific shipping method ID
if ($chosen_shipping == 'local_pickup:1') {
unset($fields['billing']['billing_address_1']);
unset($fields['billing']['billing_state']);
unset($fields['billing']['billing_city']);
unset($fields['billing']['billing_postcode']);
}
return $fields;
}, 990);By combining these two methods, you create a robust system that dynamically adapts the checkout form to the user’s choices. This technique isn’t limited to shipping methods; you can also apply similar logic based on the cart’s contents, such as removing address fields when only virtual products are present, further streamlining the path to purchase.
