WordPress.org

Support

Support » Plugins and Hacks » Adding a new drop-down field to billing address form

Adding a new drop-down field to billing address form

  • rikardo85
    Member

    @rikardo85

    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

    http://wordpress.org/extend/plugins/woocommerce/

Viewing 15 replies - 1 through 15 (of 18 total)
  • hexagoncircle
    Member

    @hexagoncircle

    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??

    terrytsang
    Member

    @terrytsang

    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' )
            )
        );

    rikardo85
    Member

    @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

    hexagoncircle
    Member

    @hexagoncircle

    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?

    terrytsang
    Member

    @terrytsang

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

    terrytsang
    Member

    @terrytsang

    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.

    Michelle
    Member

    @mvogeltanz

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

    Thanks!

    terrytsang
    Member

    @terrytsang

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

    Lorraine
    Member

    @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;
    }

    terrytsang
    Member

    @terrytsang

    @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
    Member

    @lorrainehootie

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

    terrytsang
    Member

    @terrytsang

    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);

    AA Battery
    Member

    @aa-battery

    Hey I just watched this http://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

    ColomboLane
    Member

    @colombolane

    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.