Woocommerce checkout page changes not working

Question

I have tried several ways now to change the form field of billing and shipping. I am trying to do the following:

in billing section

• change address 2 placeholder content
• change address 2 label
• address 1 change class to 50%
• address 2 change class to 50%
• city change class to 50%
• state change class to 50%
• postcode change class to 50%
• phone change class to 50%
• address 2 remove reader class

in shipping address section

• address 2 change placeholder address 2 change label
• address 1 change class 50%
• address 2 change class 50%
• state change class to 50%
• postcode change class to 50%
• address 2 remove text reader class

They need a different layout so I can't use the "default" hook (which works). Here is my code so far.

//customize woocommerce checkout fields
add_filter( 'woocommerce_checkout_fields' , 'jm_checkout_billing_fields', 20, 1 );
function jm_checkout_billing_fields( $billing_fields ){


       // Change placeholder
       $billing_fields['billing']['billing_address_2']['placeholder'] = __('Apt #, Floor, etc', $domain);

       // Change label
       $billing_fields['billing']['billing_address_2']['label'] = __('Apt #, Floor, etc', $domain);
       
       // Change class
       $billing_fields['billing']['billing_address_1']['class']   = array('form-row-first'); //  50%
       $billing_fields['billing']['billing_address_2']['class']   = array('form-row-last');  //  50%
       $billing_fields['billing']['billing_city']['class']   = array('form-row-first'); //  50%
       $billing_fields['billing']['billing_state']['class']   = array('form-row-last');  //  50%
       $billing_fields['billing']['billing_postcode']['class']   = array('form-row-first'); //  50%
       $billing_fields['billing']['billing_phone']['class']   = array('form-row-last');  //  50%
       $billing_fields['billing']['billing_address_2']['label_class'] = array(); // No label class

   return $billing_fields;
}

add_filter('woocommerce_address_fields', 'jm_address_fields', 20, 1);
function jm_address_fields( $address_fields ){
   
   if(  is_checkout()){ // On checkout page only
       // Change placeholder
       $address_fields['address_2']['placeholder'] = __( 'Apt #, Floor, etc', $domain );

       //change label
       $address_fields['address_2']['label'] = __( 'Apt #, Floor, etc', $domain );



       // Change class
       $address_fields['address_1']['class'] = array('form-row-first'); //  50%
       $address_fields['address_2']['class']  = array('form-row-last');  //  50%
       $address_fields['state']['class']  = array('form-row-first');  //  50%
       $address_fields['postcode']['class']  = array('form-row-last');  //  50%
       $address_fields['address_2']['label_class'] = array(); // No label class


   }
   return $address_fields;
}

If I use 'woocommerce_default_address_fields' for everything, it works, but again, I need billing address to be a different layout than my address fields.

I can have these be "defaults" but it needs to be different starting with "city"

• change address 2 placeholder content
• change address 2 label
• address 1 change class to 50%
• address 2 change class to 50%
• address 2 remove text reader class

I followed the answer here and have been making changes to try and get it to work separately: https://stackoverflow.com/a/48801880/14664702

Answer 1

In specific cases, you need to use the "woocommerce_default_address_fields" filter. Please go through the official documentation. It will solve your issue.

Example:

add_filter( 'woocommerce_default_address_fields', 'fs_rename_woo_checkout_fields' );
  
function fs_rename_woo_checkout_fields( $address_fields ) {
    $address_fields['address_1']['placeholder'] = 'House number, street name and block number';
    $address_fields['address_1']['label'] = 'Address';
    return $address_fields;
}

Answer 2

The way you can change address field is by using woocommerce_default_address_fields filter. Use the following code to make the changes.

add_filter( 'woocommerce_default_address_fields' , 'bks_override_default_address_fields' );

// Our hooked in function - $address_fields is passed via the filter!
function bks_override_default_address_fields( $address_fields ) {
    $address_fields['address_1']['placeholder'] = 'Apt #, Floor, etc';
    $address_fields['address_2']['label'] = 'Apt #, Floor, etc';
    $address_fields['address_1']['class']   = array('form-row-first', 'address-field');
    $address_fields['address_2']['class']   = array('form-row-last', 'address-field');
    $address_fields['city']['class']   = array('form-row-first'); //  50%
    $address_fields['state']['class']   = array('form-row-last');  //  50%
    $address_fields['postcode']['class']   = array('form-row-first'); //  50%
    $address_fields['address_2']['label_class'] = array(); // No label class

    return $address_fields;
}

These are just few changes that I quickly picked up from your code. I haven't gone through your complete list of changes as I think you will be able to change those from the above code.

I am adding the default fields here. These are the actual default fields. These were picked up from here. https://github.com/woocommerce/woocommerce/blob/trunk/includes/class-wc-countries.php#L683-L755

$fields = array(
    'first_name' => array(
        'label'        => __( 'First name', 'woocommerce' ),
        'required'     => true,
        'class'        => array( 'form-row-first' ),
        'autocomplete' => 'given-name',
        'priority'     => 10,
    ),
    'last_name'  => array(
        'label'        => __( 'Last name', 'woocommerce' ),
        'required'     => true,
        'class'        => array( 'form-row-last' ),
        'autocomplete' => 'family-name',
        'priority'     => 20,
    ),
    'company'    => array(
        'label'        => __( 'Company name', 'woocommerce' ),
        'class'        => array( 'form-row-wide' ),
        'autocomplete' => 'organization',
        'priority'     => 30,
        'required'     => 'required' === get_option( 'woocommerce_checkout_company_field', 'optional' ),
    ),
    'country'    => array(
        'type'         => 'country',
        'label'        => __( 'Country / Region', 'woocommerce' ),
        'required'     => true,
        'class'        => array( 'form-row-wide', 'address-field', 'update_totals_on_change' ),
        'autocomplete' => 'country',
        'priority'     => 40,
    ),
    'address_1'  => array(
        'label'        => __( 'Street address', 'woocommerce' ),
        /* translators: use local order of street name and house number. */
        'placeholder'  => esc_attr__( 'House number and street name', 'woocommerce' ),
        'required'     => true,
        'class'        => array( 'form-row-wide', 'address-field' ),
        'autocomplete' => 'address-line1',
        'priority'     => 50,
    ),
    'address_2'  => array(
        'label'        => $address_2_label,
        'label_class'  => array( 'screen-reader-text' ),
        'placeholder'  => esc_attr( $address_2_placeholder ),
        'class'        => array( 'form-row-wide', 'address-field' ),
        'autocomplete' => 'address-line2',
        'priority'     => 60,
        'required'     => 'required' === get_option( 'woocommerce_checkout_address_2_field', 'optional' ),
    ),
    'city'       => array(
        'label'        => __( 'Town / City', 'woocommerce' ),
        'required'     => true,
        'class'        => array( 'form-row-wide', 'address-field' ),
        'autocomplete' => 'address-level2',
        'priority'     => 70,
    ),
    'state'      => array(
        'type'         => 'state',
        'label'        => __( 'State / County', 'woocommerce' ),
        'required'     => true,
        'class'        => array( 'form-row-wide', 'address-field' ),
        'validate'     => array( 'state' ),
        'autocomplete' => 'address-level1',
        'priority'     => 80,
    ),
    'postcode'   => array(
        'label'        => __( 'Postcode / ZIP', 'woocommerce' ),
        'required'     => true,
        'class'        => array( 'form-row-wide', 'address-field' ),
        'validate'     => array( 'postcode' ),
        'autocomplete' => 'postal-code',
        'priority'     => 90,
    ),
);

You can change any value from above array to get what you desire.

Output

Tested and WORKS.

PS : Above array doesn't have phone field. You can use your orignal code for this particular field. $billing_fields['billing']['billing_phone']['class'] = array('form-row-last');. It should work just fine.