Conditionally customizing WooCommerce checkout fields

Question

I am trying to modify WooCommerce check out fields. There are two points I want to reach.

1. Conditional fields

   I want to make conditional fields for differe

Answer 1

First you can merge some functions when the same hook is involved… Then for your jQuery script is better to set it like in the following code (there is also many little mistakes in your jQuery script):

// Customizing default checkout shipping fields
add_filter( 'woocommerce_shipping_fields', 'customizing_shipping_fields' );
function customizing_shipping_fields($fields){

    # 1. Remove shipping fields
    unset($fields['shipping_country']);
    unset($fields['shipping_state']);

    # 2. Customize shipping fields
    $label_fields = array(
        'first_name' => __('取件者 *'),  'last_name'  =>   __('手機號碼 *'),
        'company'    => __('店名 *'),    'city'        => __('服務編號 *'),
        'address_1'  => __('收件地址 *'), 'address_2' => __('預計來訪時間 *'),
    );
    foreach( $label_fields as $key => $value ){
        $fields['shipping_'.$key]['label'] = $value;
        $fields['shipping_'.$key]['id'] = 'shipping_'.$key;
    }

    # 3. Customize shipping fields required
    $required_fields = array( 'first_name', 'last_name', 'company', 'city', 
        'address_1', 'address_2', 'postcode');
    foreach( $required_fields as $key => $value )
        $fields['shipping_'.$key]['required'] = false;

    return $fields;
}

// Add a Custom radio field for shipping options
add_action( 'woocommerce_before_checkout_shipping_form', 'custom_shipping_radio_button', 10, 1 );
function custom_shipping_radio_button( $checkout ) {
    # 1. CSS styling
    ?>
    
     'radio',
        'class' => array( 'form-row-wide' ),
        'label' => __('收件方式'),
        'options' => array(
            'shipping_1' => __('全家店到店'),
            'shipping_2' => __('指定地址'),
            'shipping_3' => __('自行取貨'),
        ),
    ), $checkout->get_value( 'shipping_type' ) );

    # 3. jQuery Script
    ?>
    
    

Code goes in function.php file of your active child theme (or active theme).

Tested and works.

---

Now if you want to hide fields with labels, your jQuery script will be:

Tested and works too…

But you should need to set the fields to be not required as you will face some problems when submitting data… This will oblige you to make some other changes in order to get something functional. But this will be a new question…