Checkout State Select Field Customization

Hello,

I’m trying to customize the checkout State select field.

1) Change field label to “Areas”
2) Change placeholder
3) Make field mandatory
4) Move it right after the country select

I know how to do all those things in the child theme functions.php. Other field’s customization is working fine.

But the problem that in the case with this field my code is not working. Or I would say it is working until JS applied. I think it happens because the script you are using to make this State field nicer, but it makes it not customizable…

What should I do in this situation?

Following is the code for child theme:

// Hook in
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!
function custom_override_checkout_fields( $fields ) {

    $fields['billing']['billing_state']['label'] = 'Area';
    $fields['billing']['billing_state']['required'] = true;
    $fields['billing']['billing_state']['priority'] = 20;

    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_postcode'] );
    unset( $fields['billing']['billing_city'] );

    unset( $fields['order']['order_comments'] );

    return $fields;
}

Hello,

Could you please check how it works with some default WordPress theme like twentysixteen to understand is it our theme issue or not? Actually, we don’t use any scripts there and they are just standard WooCommerce fields.

Regards

You are right, I see no it behaves the same way with default themes. First, it appears as a usual select in the place where I move it with code and with the “Areas” title, and then JS catches and it moves to default place and uses default title!

I just used a different filter ‘woocommerce_default_address_fields’ and it worked. Thank you.

Great, we are glad that you sorted it out.

[Author]

Posts