WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
Adding a new drop-down field to billing address form (19 posts)

  1. rikardo85
    Member
    Posted 1 year ago #

    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/

  2. hexagoncircle
    Member
    Posted 1 year ago #

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

  3. terrytsang
    Member
    Posted 1 year ago #

    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' )
            )
        );
  4. rikardo85
    Member
    Posted 1 year ago #

    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

  5. hexagoncircle
    Member
    Posted 1 year ago #

    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?

  6. terrytsang
    Member
    Posted 1 year ago #

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

  7. terrytsang
    Member
    Posted 1 year ago #

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

  8. Olajimmy
    Member
    Posted 1 year ago #

    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.

  9. Michelle
    Member
    Posted 1 year ago #

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

    Thanks!

  10. terrytsang
    Member
    Posted 1 year ago #

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

  11. lorraine@hoot.ie
    Member
    Posted 1 year ago #

    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;
    }
  12. terrytsang
    Member
    Posted 1 year ago #

    @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;
    }
  13. lorraine@hoot.ie
    Member
    Posted 1 year ago #

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

  14. terrytsang
    Member
    Posted 1 year ago #

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

  15. AA Battery
    Member
    Posted 1 year ago #

    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

  16. ColomboLane
    Member
    Posted 1 year ago #

    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.

  17. blydew
    Member
    Posted 12 months ago #

    Hey everyone,

    I need to create a custom field (how many months?) which needs to change the cart total upon changing the select option. So basically, the total would be multiplied by the number they select in my select list of the custom field. I would like this to be done via ajax. Any ideas?

  18. infobuster
    Member
    Posted 9 months ago #

    Hi there i know this is an old post but hoping someone can help here as i've created a drop down box in the checkout all seems to work ok however i want it to be a required field i know i can use the
    required = true line but as it already has an option selected as it just uses the first option on the list i have tried using a blank field but no joy

    here is my code so far as i'm sure other would want to use this

    echo '<div id="my_custom_checkout_field"><h3>'.__('How you found us').'</h3>';
    
        woocommerce_form_field ( 'my_field_name', array(
    
    	    'type'          => 'select',
    		'class'         => array('my-field-class form-row-wide'),
            'label'         => __('Choose an option'),
            'placeholder'   => _x('Phone', 'placeholder', 'woocommerce'),
    
    		'options'     => array(
    	 	'option_a' => __( '','' ),
            'option_b' => __('Google', 'Google' ),
            'option_c' => __('Medical referral', 'Medical_referral' ),
    		 'option_d' => __('Snorelab mobile app', 'Snorelab_mobile_app' ),
            'option_e' => __('Bing', 'Bing' ),
    		'option_f' => __('Yahoo', 'Yahoo' ),
            'option_g' => __('Leaflet', 'Leaflet' ),
    		 'option_h' => __('Newsletter', 'Newsletter' ),
            'option_i' => __('Other', 'Other' ),
            ),
    		'required'    => true,
    
            ), $checkout->get_value( 'my_field_name' ));
  19. esmi
    Forum Moderator
    Posted 9 months ago #

    @infobuster: As per the Forum Welcome, please post your own topic.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic