WooCommerce ship to dropdown list of address on checkout page

Question

I am currently in the process of building a hamper website. My client is wondering if it is possible to have certain hampers than can be sent to animal rescue centres, care homes or similar. These locations would be chosen by him and would ideally be displayed in the checkout page in a dropdown, the user can then choose to send to a one of these or fill out a address themselves.

I have had a look through the extensions availible for woocommerce, and could not really see anything that fitted the bill.

Has anyone tried to achieve anything similar?

Someone could point me on the right direction, please?

Thanks

LoicTheAztec · Accepted Answer · 2017-08-16T04:15:00.650

You can add easily any custom fields in checkout form. For example you can use woocommerce_after_order_notes hook to add a custom field after the customer details and order notes:

Here is the code:

// Creating the custom fields on checkout page after order notes
add_filter( 'woocommerce_after_order_notes', 'custom_checkout_fields' );
function custom_checkout_fields( $checkout ) {

     echo '<div id="my_custom_checkout_field"><br><h2>' . __('My custom fields title', 'my_theme_slug') . '</h2>';

    // The selector
    woocommerce_form_field( 'my_field_name1', array(
        'type'        => 'select',
        'required'    => true,
        'class'       => array('my-field-class form-row-wide'),
        'label'       => __('Select your destination', 'my_theme_slug'),
        'options'     => array(
            '' => __('Chose an option', 'my_theme_slug'),
            'option1' => 'Fill in the custom address (display a field)',
            'option2' => 'my option 1 choice',
            'option3' => 'my option 2 choice',
            'option4' => 'my option 3 choice'
        )
    ), $checkout->get_value( 'my_field_name1' ));

    // The field (Using javascript to make it appear when selector corresponding value is chosen)
    woocommerce_form_field( 'my_field_name2', array(
        'type'        => 'textarea',
        'required'    => false,
        'class'       => array('my-field-class2 form-row-wide'),
        'label'       => __('Fill in the custom address', 'my_theme_slug'),
        'placeholder' => __('Enter an address (optional)', 'my_theme_slug')
    ), $checkout->get_value( 'my_field_name2' ));

echo '</div>';

}

 // Process the checkout
add_action('woocommerce_checkout_process', 'custom_checkout_field_process');
function custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['my_field_name1'] ) // the selector
        wc_add_notice( __( 'Please enter something into this new shiny field.' ), 'error' );
}

// Update the order meta with field value
add_action( 'woocommerce_checkout_update_order_meta', 'custom_checkout_field_update_order_meta' );
function custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['my_field_name1'] ) ) {
        update_post_meta( $order_id, 'my_field_name1', sanitize_text_field( $_POST['my_field_name1'] ) );
    }
    if ( ! empty( $_POST['my_field_name2'] ) ) {
        update_post_meta( $order_id, 'my_field_name2', sanitize_text_field( $_POST['my_field_name2'] ) );
    }
}

Naturally this goes on function.php file of your active child theme (or theme) or in any plugin file.

This is a fully functional working partial example

WHAT IS LEFT (What you will need and what you can have)

YOU WILL NEED
TO Make a custom jQuery/javascript script:
- First to hide the text area field (when page is loaded).
- To show that text area field when the correct value is chosen in the selector (manual entry of the address case).

OTHER OPTIONS:
- Display/edit that values in admin edit orders pages
- Add this custom Fields to Emails …

Official reference: WooThemes - Customizing checkout fields using actions and filters

Reordering ref: Reordering checkout fields in WooCommerce 3

WooCommerce ship to dropdown list of address on checkout page

1 Answers1