Remove "(Optional)" Text from Checkout Fields in Woocommerce 3.4+

Remove (optional) text from checkout fields in Woocommerce 3.4+

Update 2

To remove "(optional)" text from checkout fields labels introduced with Woocommerce release 3.4, just as it was before, you will need to add the following code:

// PHP: Remove "(optional)" from our non required fields
add_filter( 'woocommerce_form_field' , 'remove_checkout_optional_fields_label', 10, 4 );
function remove_checkout_optional_fields_label( $field, $key, $args, $value ) {
// Only on checkout page
if( is_checkout() && ! is_wc_endpoint_url() ) {
$optional = ' <span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
$field = str_replace( $optional, '', $field );
}
return $field;
}

// JQuery: Needed for checkout fields to Remove "(optional)" from our non required fields
add_filter( 'wp_footer' , 'remove_checkout_optional_fields_label_script' );
function remove_checkout_optional_fields_label_script() {
// Only on checkout page
if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

$optional = ' <span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
?>
<script>
jQuery(function($){
// On "update" checkout form event
$(document.body).on('update_checkout', function(){
$('#billing_country_field label > .optional').remove();
$('#billing_address_1_field label > .optional').remove();
$('#billing_postcode_field label > .optional').remove();
$('#billing_state_field label > .optional').remove();
$('#shipping_country_field label > .optional').remove();
$('#shipping_address_1_field label > .optional').remove();
$('#shipping_postcode_field label > .optional').remove();
$('#shipping_state_field label > .optional').remove();
});
});
</script>
<?php
}

Code goes in function.php file of your active child theme (or active theme). Tested and works in Woocommerce version 3.4+.

You could merge the included jQuery code with your existing jQuery code…

Remove (optional) text from fields on My account edit address in Woocommerce 3.4+

To remove "(optional)" label text from fields in my account edit address, use the following code:

// Remove "(optional)" from  non required fields (in My account edit address)
add_filter( 'woocommerce_form_field' , 'remove_checkout_optional_fields_label', 10, 4 );
function remove_checkout_optional_fields_label( $field, $key, $args, $value ) {
if( is_wc_endpoint_url( 'edit-address' ) ){
$optional = ' <span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
$field = str_replace( $optional, '', $field );
}
return $field;
}

Code goes in function.php file of the active child theme (or active theme). Tested and works.

Related: Remove "(optional)" text from checkout fields in Woocommerce 3.4+

Make Woocommerce checkout phone field optional based on shipping country

The following code will make billing phone field required only for specific "Shipping" countries.

Since Woocommerce version 3.4+, things have changed a bit on Woocommerce form fields, so additional functions and code where required.

Also I have extended the code to handle the phone field behavior in My Account > Edit Addresses, where customer can make changes to his account data.

Here is the complete code (define your country codes in the first function):

// SETTINGS: The countries codes (2 capital letters) in the array
function defined_countries_for_phone_field(){
return array( 'UK', 'BE', 'GE', 'IT', 'ES' );
}

// Remove "(optional)" from non required "Billing phone" field
add_filter( 'woocommerce_form_field' , 'remove_checkout_optional_fields_label', 10, 4 );
function remove_checkout_optional_fields_label( $field, $key, $args, $value ) {

// Get the defined countries codes
$countries = defined_countries_for_phone_field();

// Get Customer shipping country
$shipping_country = WC()->customer->get_shipping_country();

// Only on checkout page and My account > Edit address for billing phone field
if( 'billing_phone' === $key && ( ( is_wc_endpoint_url( 'edit-address' )
&& ! in_array($shipping_country, $countries) ) || is_checkout() ) ) {
$optional = ' <span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
$field = str_replace( $optional, '', $field );
}
return $field;
}

// Make the billing phone field optional (by default)
add_filter( 'woocommerce_billing_fields', 'filter_billing_phone_field', 10, 1 );
function filter_billing_phone_field( $fields ) {

// Get the defined countries codes
$countries = defined_countries_for_phone_field();

// Get Customer shipping country
$shipping_country = WC()->customer->get_shipping_country();

// Only on checkout page and My account > Edit address
if ( ( is_wc_endpoint_url( 'edit-address' )
&& ! in_array($shipping_country, $countries) ) || is_checkout() )
$fields['billing_phone']['required'] = false;

return $fields;
}

// Real time shipping country selection actions
add_action( 'woocommerce_after_order_notes', 'custom_checkout_scripts_and_fields', 10, 1 );
function custom_checkout_scripts_and_fields( $checkout ) {
$required = esc_attr__( 'required', 'woocommerce' );

// Get the defined countries codes
$countries = defined_countries_for_phone_field();

// Hidden field for the phone number validation
echo '<input type="hidden" name="billing_phone_check" id="billing_phone_check" value="0">';
$countries_str = "'".implode( "', '", $countries )."'"; // Formatting countries for jQuery
?>
<script type="text/javascript">
(function($){
var required = '<abbr class="required" title="<?php echo $required; ?>">*</abbr>',
countries = [<?php echo $countries_str; ?>],
location = $('#shipping_country option:selected').val(),
phoneCheck = 'input#billing_phone_check',
phoneField = '#billing_phone_field';

function actionRequire( actionToDo='yes', selector='' ){
if ( actionToDo == 'yes' ) {
$(selector).addClass("validate-required");
$(selector+' label').append(required);
} else {
$(selector).removeClass("validate-required");
$(selector+' label > .required').remove();
}
$(selector).removeClass("woocommerce-validated");
$(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
}

// Default value Once DOM is loaded (with a 300 ms delay)
setTimeout( function(){
actionRequire( 'no', phoneField );
if( $.inArray( location, countries ) >= 0 && $(phoneCheck).val() == '0' ){
actionRequire( 'yes',phoneField );
$(phoneCheck).val('1');
}
}, 300 );

// Live value
$( 'form.checkout' ).on( 'change', '#shipping_country', function(){
var location = $('#shipping_country option:selected').val();
if ( $.inArray( location, countries ) >= 0 && $(phoneCheck).val() == 0 ) {
actionRequire( 'yes' ,phoneField );
$(phoneCheck).val('1');
} else if ( $(phoneCheck).val() == 1 ) {
actionRequire( 'no' ,phoneField );
$(phoneCheck).val('0');
}
});
})(jQuery);
</script>
<?php
}

// Phone number validation, when the field is required
add_action('woocommerce_checkout_process', 'billing_phone_field_process');
function billing_phone_field_process() {
// Check if set, if its not set add an error.
if ( ! $_POST['billing_phone'] && $_POST['billing_phone_check'] == '1' )
wc_add_notice( __( 'Please enter a number phone.' ), 'error' );
}

Code goes in function.php file of your active child theme (or active theme). Tested and works in WooCommerce from version 3.4 and above.

Related:

  • Make checkout phone field optional for specific countries in WooCommerce
  • Remove "(optional)" text from checkout fields in Woocommerce 3.4+

Show or hide checkout postcode field based on chosen city in WooCommerce

It's a bit much more complicated and you will need to define the city in the last function.

The following code handles multiple necessary tasks to show / hide the postcode field based on a specific defined selected city:

// Make postcode field optional
add_filter( 'woocommerce_default_address_fields', 'customizing_checkout_fields' );
function customizing_checkout_fields( $fields ) {
if( is_checkout() ) {
$fields['postcode']['required'] = false;
}
return $fields;
}

// Replace "(optional)" text by required "*"
add_filter( 'woocommerce_form_field' , 'replace_checkout_optional_by_required', 10, 4 );
function replace_checkout_optional_by_required( $field, $key, $args, $value ) {
// Only on checkout page for postcode field
if( is_checkout() && ! is_wc_endpoint_url() && in_array($key, ['billing_postcode', 'shipping_postcode']) ) {
$optional = '<span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
$required = '<abbr class="required" title="required">*</abbr>';
$field = str_replace( $optional, $required, $field );
}
return $field;
}

// Hidden input fields for Postcode validation when it's visible
add_action( 'woocommerce_after_order_notes', 'checkout_hidden_field_for_validation', 10, 1 );
function checkout_hidden_field_for_validation( $checkout ) {
// Hidden field for the phone number validation
echo '<input type="hidden" name="billing_postcode_check" id="billing_postcode_check" value="">
<input type="hidden" name="shipping_postcode_check" id="shipping_postcode_check" value="">';
}

// Postcode field validation when it's visible
add_action('woocommerce_checkout_process', 'wps_select_checkout_field_process');
function wps_select_checkout_field_process() {
if( isset($_POST['billing_postcode_check']) && $_POST['billing_postcode_check'] === 'yes'
&& isset($_POST['billing_postcode']) && empty($_POST['billing_postcode']) ) {
wc_add_notice( __("The billing postcode field is a required field.", "woocommerce"), 'error' );
}

if( isset($_POST['shipping_postcode_check']) && $_POST['shipping_postcode_check'] === 'yes'
&& isset($_POST['shipping_postcode']) && empty($_POST['shipping_postcode']) ) {
wc_add_notice( __("The shipping postcode is a required field.", "woocommerce"), 'error' );
}
}

// Conditional Show hide checkout fields based on chosen payment methods
add_action( 'wp_footer', 'conditionally_show_hide_billing_custom_field' );
function conditionally_show_hide_billing_custom_field(){
// Only on checkout page
if ( is_checkout() && ! is_wc_endpoint_url() ) :

// HERE define the city that will hide postcode field
$city = 'Paris';

$required = ' <abbr class="required" title="required">*</abbr>';
?>
<script>
jQuery(function($){
var bc = '#billing_city_field input',
sc = '#shipping_city_field input',
bp = '#billing_postcode_field',
sp = '#shipping_postcode_field',
bpc = '#billing_postcode_check',
spc = '#shipping_postcode_check',
city = '<?php echo $city; ?>',
req = '<?php echo $required; ?>';

// On "update" checkout form event, replace "(optional)" by required "*"
$(document.body).on('update_checkout', function(){
$('#billing_postcode_field label > .optional').replaceWith(req);
});

// Function that shows or hide checkout fields
function showHide( selector = '', action = 'show' ){
var check = selector == bp ? $(bpc) : $(spc);
if( action == 'show' )
$(selector).show( 200, function(){
$(this).addClass("validate-required");
check.val('yes');
});
else
$(selector).hide( 200, function(){
$(this).removeClass("validate-required");
check.val('');
});
$(selector).removeClass("woocommerce-validated");
$(selector).removeClass("woocommerce-invalid woocommerce-invalid-required-field");
}

// 1. Initialising (on load): Show/hide based on customer city

// Billing field
if( $(bc).val() === city || $(bc).val() == '' )
showHide( bp, 'hide' );
else
showHide( bp );

// Shipping field
if( $(sc).val() === city || $(sc).val() == '' )
showHide( sp, 'hide' );
else
showHide( sp );

// 2. Change live event: Show/hide based on city change

$( 'form.checkout' ).on( 'change input', bc, function() { // Billing field
if( $(bc).val() === city )
showHide( bp, 'hide' );
else
showHide( bp );
});

$( 'form.checkout' ).on( 'change input', sc, function() { // Shipping field
if( $(sc).val() === city )
showHide( sp, 'hide' );
else
showHide( sp );
});
});
</script>
<?php
endif;
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.

Some related answers:

  • Show hide custom Woocommerce checkout field based on selected payment method
  • Remove "(optional)" text from checkout fields in Woocommerce 3.4+

Hidding billing and shipping postcode on load:

Replace:

            // 1. Initialising (on load): Show/hide based on customer city

// Billing field
if( $(bc).val() === city || $(bc).val() == '' )
showHide( bp, 'hide' );
else
showHide( bp );

// Shipping field
if( $(sc).val() === city || $(sc).val() == '' )
showHide( sp, 'hide' );
else
showHide( sp );

by:

            // 1. Initialising (on load): Hide postcode

showHide( bp, 'hide' ); // Billing field
showHide( sp, 'hide' ); // Shipping field

Make checkout fields optional when selecting Local Pickup in WooCommerce

Have you tried this:

add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );
function custom_override_default_address_fields($address_fields) {

$address_fields['address_1']['required'] = false;
$address_fields['address_1']['placeholder'] = '';
$address_fields['address_2']['required'] = false;
$address_fields['address_2']['placeholder'] = '';

return $address_fields;
}

Remove billing phone and email fields from my account edit address in WooCommerce

The following code function will remove billing phone and email fields from My account > edit address:

add_filter( 'woocommerce_billing_fields', 'remove_account_billing_phone_and_email_fields', 20, 1 );
function remove_account_billing_phone_and_email_fields( $billing_fields ) {
// Only on my account 'edit-address'
if( is_wc_endpoint_url( 'edit-address' ) ){
unset($billing_fields['billing_phone']);
unset($billing_fields['billing_email']);
}
return $billing_fields;
}

Code goes in function.php file of the active child theme (or active theme). Tested and works.

Checkout - Limit the Countries in Billing & Shipping based on Geolocation

OK, I could not get exactly what I was hoping to achieve but got something close

My final code:

/** Restrict Change in Checkout Country based on Geo IP (geolocation)*/
function wpse_287199_woo_checkout_country( $fields ) {
$geoData = WC_Geolocation::geolocate_ip();
$countries = WC()->countries->get_countries();
$fields['billing']['billing_country'] = array(
'type' => 'select',
'label' => __('Country', 'woocommerce'),
'options' => array(
$geoData['country'] => $countries[$geoData['country']]
),
'class' => array(
'form-row-wide',
'address-field',
'update_totals_on_change'
)
);
$fields['shipping']['shipping_country'] = array(
'type' => 'select',
'label' => __('Country', 'woocommerce'),
'options' => array(
$geoData['country'] => $countries[$geoData['country']]
),
'class' => array(
'form-row-wide',
'address-field',
'update_totals_on_change'
)
);
return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'wpse_287199_woo_checkout_country' );
/** Remove (optional) from country fields and make it non selectable*/
function remove_checkout_optional_fields_label_script() {
// Only on checkout page
if( ! ( is_checkout() && ! is_wc_endpoint_url() ) ) return;

$optional = ' <span class="optional">(' . esc_html__( 'optional', 'woocommerce' ) . ')</span>';
?>
<script>
jQuery(function($){
// On "update" checkout form event
$(document.body).on('update_checkout', function(){
$('#billing_country_field label > .optional').remove();
$('.woocommerce-checkout #billing_country_field').css('pointer-events', 'none');
$('#shipping_country_field label > .optional').remove();
$('.woocommerce-checkout #shipping_country_field').css('pointer-events', 'none');
});
});
</script>
<?php
}
add_filter( 'wp_footer' , 'remove_checkout_optional_fields_label_script' );
// End of above code

This would make the country field auto populate with Geolocation data and make it non selectable is there such a word? ;)

final result

Any improvement suggestion is very welcome.

Thanks

Hide checkout fields when selecting multiple delivery methods in WooCommerce

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
}

WooCommerce shipping fileds required state

/* only hide shipping section using css/jquery is not the solution. you must need to remove fields as per your requirement */

/* please Add the following code to your child theme functions.php file */

add_filter( 'woocommerce_checkout_fields', 'change_shipping_field_optional');

function change_shipping_field_optional( $fields ) {

$chosen_methods = WC()->session->get( 'chosen_shipping_methods' );
$shipping_pickup = $chosen_methods[0];

if ($shipping_pickup == 'local_pickup:4') // here your shipping rate ID
{
/* add fields here as per your requirement */

$fields['shipping_first_name']['required'] = false;
$fields['shipping_last_name']['required'] = false;
$fields['shipping_company']['required'] = false;
$fields['shipping_country']['required'] = false;
$fields['shipping_address_1']['required'] = false;
$fields['shipping_address_2']['required'] = false;
$fields['shipping_city']['required'] = false;
$fields['shipping_state']['required'] = false;
$fields['shipping_postcode']['required'] = false;

unset($fields['shipping']['shipping_first_name']);
unset($fields['shipping']['shipping_last_name']);
unset($fields['shipping']['shipping_company']);
unset($fields['shipping']['shipping_country']);
unset($fields['shipping']['shipping_address_1']);
unset($fields['shipping']['shipping_address_2']);
unset($fields['shipping']['shipping_city']);
unset($fields['shipping']['shipping_state']);
unset($fields['shipping']['shipping_postcode']);

}
return $fields;
}


Related Topics



Leave a reply



Submit