Add 3 checkout select fields as a composite date field in Woocommerce 3

Question

I'm looking to add three custom date fields using select. So the first one would be the day, second would be month and the third would be the year. However, I'm not sure how to add a code without manually entering all years pluss to have three fields count as one.

I have a code I used to add a custom field 'gender' any way to something similar for a dob select fields described above.

add_action('woocommerce_before_checkout_billing_form', 'wps_add_select_checkout_field');

function wps_add_select_checkout_field( $checkout ) {

woocommerce_form_field( 'apgen', array(
    'type'          => 'select',
    'class'         => array( 'ap-drop' ),
    'label'         => __( 'Gender' ),
    'options'       => array(
        'blank'     => __( 'Select Gender', 'ap' ),
        'male'  => __( 'Male', 'ap' ),
        'Female'    => __( 'Female', 'ap' ),
        'non-binary'    => __( 'Non-binary', 'ap' )
    )
),
$checkout->get_value( 'apgen' ));
}

Answer 1

Woocommerce has now a "date" field type with a very specific behavior, that has inside its field, 3 selectable number field type (days, month and year) that you can select individually, with a showable date picker (see screenshots below):

add_filter('woocommerce_checkout_fields', 'wps_add_checkout_field');
function wps_add_checkout_field( $fields ) {


    // Select field (Gender)
    $fields['billing']['billing_gender'] = array(
        'type'     => 'select',
        'class'    => array( 'form-row-wide' ),
        'label'    => __( 'Gender' ),
        'required' => true,
        'priority' => 3,
        'options'  => array(
            ''           => __( 'Select Gender', 'ap' ),
            'male'       => __( 'Male', 'ap' ),
            'Female'     => __( 'Female', 'ap' ),
            'non-binary' => __( 'Non-binary', 'ap' )
        ),
    );

    // Date field (with 3 number fields with a datepicker)
    $fields['billing']['billing_date'] = array(
        'type'     => 'date',
        'class'    => array( 'form-row-wide' ),
        'label'    => __( 'Date' ),
        'required' => true,
        'priority' => 3,
    );

    return $fields;
}

Code goes in function.php file of your active child theme (or active theme). Tested and work.

You will get something like:

Rolling in the date field:

Selecting days and using to increase or decrease days:

Selecting months and increasing value (or typing a value):

Selecting years and increasing value (or typing a value):

Making appear the date picker and select a date:

---

Other similar hooks that can be used:

add_filter('woocommerce_billing_fields', 'wps_add_date_type_checkout_field');

function wps_add_date_type_checkout_field( $fields ) {
// Date field (with 3 number fields with a datepicker)
    $fields['billing_date'] = array(
        'type'          => 'date',
        'class'         => array( 'form-row-wide' ),
        'label'         => __( 'Date' ),
        'priority'      => 5,
    );
    return $fields;
}

Or

add_action('woocommerce_before_checkout_billing_form', 'wps_add_date_type_checkout_field');

function wps_add_date_type_checkout_field( $checkout ) {

    woocommerce_form_field( 'billing_date', array(
        'type'          => 'date',
        'class'         => array( 'form-row-wide' ),
        'label'         => __( 'Gender' ),
    ), $checkout->get_value( 'billing_date' ));

}

Or before (or after) order notes:

add_action('woocommerce_before_order_notes', 'wps_add_date_type_checkout_field');
// add_action('woocommerce_after_order_notes', 'wps_add_date_type_checkout_field');

function wps_add_date_type_checkout_field( $checkout ) {
    echo '<div id="my_custom_checkout_field">';

    woocommerce_form_field( 'billing_date', array(
        'type'          => 'date',
        'class'        => array('my-field-class form-row-wide'),
        'label'        => __('Date'),
    ), $checkout->get_value( 'billing_date' ));

    echo '</div>';
}

---

Related docs: Customizing Woocommerce checkout fields using actions and filters