在 Woocommerce 3 中添加 3 个结帐选择字段作为复合日期字段答案

【问题标题】：Add 3 checkout select fields as a composite date field in Woocommerce 3在 Woocommerce 3 中添加 3 个结帐选择字段作为复合日期字段
【发布时间】：2018-08-27 19:08:53
【问题描述】：

我希望使用 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' ));
}

【问题讨论】：

“无需手动输入所有年份”见range()
您是否尝试过 Woocommerce 中的新 "date" 字段类型，它使用日期选择器呈现为 3 个可选数字字段类型？
嗨@LoicTheAztec，我不知道我怎么能做到这一点？
我添加了我认为可能有效的代码 - 请告诉我@LoicTheAztec
请不要更改您的问题代码，因为您问我，我已经回答了。所以我只是像以前一样回复你的问题。

标签： php wordpress woocommerce field checkout

【解决方案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>';
}

【讨论】：

感谢您的回答！但是我输入了上面的代码，只显示了一个文本字段，没有显示 3 种可选的数字字段类型。
@Max 您使用的是哪个版本的 woocommerce？
我使用的是 3.4.4 @loic
@Max 您似乎遇到了麻烦……可能是您的主题或其他问题……由于 Woocommerce 3.2 或 3.3，日期字段按照此答案中的描述工作。我做了一个简单的代码更新，改变了函数钩子，但我认为它不会为你改变任何东西。您可以在HERE on my test server 中看到这一点 ==> 添加产品并结帐，您将看到自己。我已经用不同的主题对此进行了测试，并且它的工作方式相同。
我相信这可能是因为我查看了旧版本的 safari，因为我查看了您的测试站点并且得到了与我相同的结果。