Add a custom dropdown field on My account > edit account in WooCommerce - wordpress

Question

I am using the following code to display an additional input field on the edit account page of WooCommerce.
/**
* Step 1. Add your field - Age Range
*/
add_action( 'woocommerce_edit_account_form', 'misha_add_age_range_field_account_form' );
function misha_add_age_range_field_account_form() {
echo "<h4> Please fill in the following details to complete your profile for review </h4>";
woocommerce_form_field(
'certified_age_range',
array(
'type' => 'text',
'required' => true, // remember, this doesn't make the field required, just adds an "*"
'label' => 'Your Age',
'description' => '',
),
get_user_meta( get_current_user_id(), 'certified_age_range', true ) // get the data
);
}
/**
* Step 2. Save field value
*/
add_action( 'woocommerce_save_account_details', 'misha_save_age_range_account_details' );
function misha_save_age_range_account_details( $user_id ) {
update_user_meta( $user_id, 'certified_age_range', sanitize_text_field( $_POST['certified_age_range'] ) );
}
/**
* Step 3. Make it required
*/
add_filter('woocommerce_save_account_details_required_fields', 'misha_make_field_required');
function misha_make_age_range_field_required( $required_fields ){
$required_fields['certified_age_range'] = 'Age';
return $required_fields;
}
add_filter( 'woocommerce_customer_meta_fields', 'misha_admin_age_range_field' );
function misha_admin_age_range_field( $admin_fields ) {
$admin_fields['billing']['fields']['certified_age_range'] = array(
'label' => 'Age',
'description' => 'Get Certified Form Field',
);
return $admin_fields;
}
The code above works perfectly, and this is how the 'Age' field appears on the page:
But now I need to make this field into a dropdown one instead of a simple text field.
This said, I tried doing the above customisation with the following code but without the desired result. Any advice?
add_filter( 'woocommerce_save_account_details_required_fields' , 'custom_override_age_field' );
function custom_override_age_field( $account_fields ) {
$option_age = array(
'' => __( 'Select your Age Range' ),
'18-24' => '18-24',
'25-34' => '25-34',
'35-44' => '35-44',
'45-54' => '45-54',
'55-64' => '55-64',
'65+' => '65+',
);
$account_fields['account_first_name']['type'] = 'select';
$account_fields['account_first_name']['options'] = $option_age;
return $account_fields;
}

Answer 1

Your code says: Step 1. Add your field - in your attempt you are using the hook from step 3.. while step 3 indicates Make it required so that's your first mistake.
The bottom line is that in the first step you have to edit the woocommerce_form_field settings. In your code the type is 'text' and you have to change this to 'select'.
So you get:
/**
* Step 1. Add your field - Age Range
*/
function action_woocommerce_edit_account_form() {
echo "<h4> Please fill in the following details to complete your profile for review </h4>";
// Select field
woocommerce_form_field( 'certified_age_range', array(
'type' => 'select',
'class' => array( 'form-row-wide' ),
'label' => __( 'Your age', 'woocommerce' ),
'required' => true, // remember, this doesn't make the field required, just adds an "*"
'options' => array(
'' => __( 'Select your age range', 'woocommerce' ),
'18-24' => '18-24',
'25-34' => '25-34',
'35-44' => '35-44',
'45-54' => '45-54',
'55-64' => '55-64',
'65+' => '65+',
)
), get_user_meta( get_current_user_id(), 'certified_age_range', true ) );
}
add_action( 'woocommerce_edit_account_form', 'action_woocommerce_edit_account_form', 10, 0 );
/**
* Step 2. Make it required
*/
function filter_woocommerce_save_account_details_required_fields( $required_fields ) {
$required_fields['certified_age_range'] = __( 'Age', 'woocommerce' );
return $required_fields;
}
add_filter( 'woocommerce_save_account_details_required_fields', 'filter_woocommerce_save_account_details_required_fields', 10, 1 );
/**
* Step 3. Save field value
*/
function action_woocommerce_save_account_details( $user_id ) {
if ( isset( $_POST['certified_age_range'] ) ) {
// Update field
update_user_meta( $user_id, 'certified_age_range', sanitize_text_field( $_POST['certified_age_range'] ) );
}
}
add_action( 'woocommerce_save_account_details', 'action_woocommerce_save_account_details', 10, 1 );
/**
* Step 4. Get address fields for the edit user pages.
*/
function filter_woocommerce_customer_meta_fields( $args ) {
$args['billing']['fields']['certified_age_range'] = array(
'label' => __( 'Age', 'woocommerce' ),
'description' => __( 'Get Certified Form Field', 'woocommerce' ),
);
return $args;
}
add_filter( 'woocommerce_customer_meta_fields', 'filter_woocommerce_customer_meta_fields', 10, 1 );