Добавьте 3 поля выбора оформления в качестве поля составной даты в Woocommerce 3

Question

Я хочу добавить три пользовательских поля даты, используя select. Таким образом, первым будет день, вторым будет месяц, а третьим будет год. Однако я не уверен, как добавить код без ручного ввода всех лет, чтобы три поля считались одним.

У меня есть код, который я использовал для добавления настраиваемого поля «пол» любым способом к чему-то похожему для полей выбора dob, описанных выше.

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 теперь имеет тип поля "date" с очень специфическим поведением, которое имеет внутри своего поля 3 типа выбираемых числовых полей (дни, месяц и год), которые вы можете выбрать индивидуально, с помощью возможность выбора даты (см. скриншоты ниже):

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

Код помещается в файл function.php вашей активной дочерней темы (или активной темы). Проверено и работает.

Вы получите что-то вроде:

Перемещение в поле даты:

Выбор дней и использование для увеличения или уменьшения дней:

Выбор месяцев и увеличение значения (или ввод значения):

Выбор года и увеличение значения (или ввод значения):

Появится окно выбора даты и выберите дату:

---

Другие аналогичные крючки, которые можно использовать:

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

Или

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

}

Или до (или после) примечания к заказу:

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

---

Документы по теме: Настройка полей проверки Woocommerce с использованием действий и фильтров