Adding a new drop-down field to billing address form

  • Hello,

    I would like to add a drop-down field to the billing address on the checkout page.

    I have found this code:

    // 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_phone'] = array(
    'label'     => __('Phone', 'woocommerce'),
    'placeholder'   => _x('Phone', 'placeholder', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
     );

     return $fields;
}

    Which displays a basic text field.
    How can I display a field with drop down options? e.g. Title: Mr, Mrs etc

    Thanks

    https://www.ads-software.com/extend/plugins/woocommerce/

Viewing 15 replies - 1 through 15 (of 18 total)

  • I came across this, which seems to be the solution:

    $fields['billing']['billing_options'] = array(
    'label'       => __('Options', 'woocommerce'),
    'placeholder' => _x('', 'placeholder', 'woocommerce'),
    'required'    => false,
    'clear'       => false,
    'type'        => 'select',
    'options'     => array(
        'option_a' => __('option a', 'woocommerce' ),
        'option_b' => __('option b', 'woocommerce' )
        )
    );

    Now I’m wondering how you can add the chosen css styles to these new options to match the other drop downs… anyone??

    You can add class parameter to the array:

    $fields['billing']['billing_options'] = array(
    'label'       => __('Options', 'woocommerce'),
    'placeholder' => _x('', 'placeholder', 'woocommerce'),
    'required'    => false,
    'clear'       => false,
    'type'        => 'select',
    'class'       => array('own-css-name'),
    'options'     => array(
        'option_a' => __('option a', 'woocommerce' ),
        'option_b' => __('option b', 'woocommerce' )
        )
    );

    Thread Starter rikardo85

    (@rikardo85)

    Thank you these work!

    Can I also ask, how do I place the drop down field at the top of the form?

    E.G the drop down field I have is title e.g. Mr, Mrs, Miss etc.
    I want this to appear before the first and surname.

    Thanks

    Thanks terrytsang, but unfortunately adding the chzn_select selector in there still didn’t seem to work. Maybe I’m targeting the wrong selector?

    rikardo85, I’m not totally sure how to move the form elements around. That’s a great question! I’m also wondering how to get these new custom fields to appear under the user’s account so they can change them whenever they would like. Anybody know if there’s a way to get these fields to filter into the user’s account?

    Hi rikardo85, you can add the new drop down field at the top of the billing section by using my custom checkout extension.

    Hi hexagoncircle, please update my plugin version by downloading the latest zip file at the email download link. Thanks for the support!

    Somebody HELP! Am having the same issue here, i have successfully added the custom fields to the checkout page but is not showing in the mail or under users in my admin panel. I need this ASAP. Would appreciate if somebody can help.

    Can you tell me to which file I would need to add the above code?

    Thanks!

    You can add above code to your theme functions.php file.

    Lorraine

    (@lorrainehootie)

    Hi,
    I’m looking to do something similar with the postcode field. I want a drop-down instead of a text field – I’ve tried editing the code above to suit – but can’t get it working – help please?

    code:

    // 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_postcode'] = array(
    'label'     => __('Postcode', 'woocommerce'),
    'placeholder'   => _x('Postcode', 'placeholder', 'woocommerce'),
    'required'    => false,
    'clear'       => false,
    'type'        => 'select',
    'class'       => false,
    'options'     => array(
        'option_a' => __('option a', 'woocommerce' ),
        'option_b' => __('option b', 'woocommerce' )
        )
    );

     return $fields;
}

    @lorraine, have you added above code to your active theme functions.php file? If yes, it should be working as expected.

    Try add this to your theme functions.php:

    // 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_postcode'] = array(
			'label'     => __('Postcode', 'woocommerce'),
			'placeholder'   => _x('Postcode', 'placeholder', 'woocommerce'),
			'required'    => false,
			'clear'       => false,
			'type'        => 'select',
			'class'       => array('form-row-wide'),
			'options'     => array(
					'option_a' => __('option a', 'woocommerce' ),
					'option_b' => __('option b', 'woocommerce' )
			)
	);

	return $fields;
}
    Lorraine

    (@lorrainehootie)

    yes tried adding that to functions.php and it crashes my site.. ??

    Have you found out what caused the crash for your functions.php? If you can paste the error message here, maybe someone can help out.

    You can put this code at the top of your functions.php to output the error:
    ini_set('error_reporting', E_ALL);

    Hey I just watched this https://www.youtube.com/watch?v=E_bIGpFDEJs and the guy talks about creating a child theme so that updates don’t wipe all my customization. Is this super necessary? Does anyone have a rough idea how often free themes like Mystile are updated? Thanks

    Hi there,

    I have a custom select options field on the checkout page…is there anyway to attach the class=”state_select” to this? At the moment when the the code is processed the custom select options check out field has a class=”select”.

    Your help is much appreciated.

    Thank you.

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Adding a new drop-down field to billing address form’ is closed to new replies.