时间戳

首页 > 解决方案 > 在 Woocommerce 3 中添加 3 个结帐选择字段作为复合日期字段

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

问题描述

我正在寻找使用 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' ));
}

标签： phpwordpresswoocommercefieldcheckout

解决方案

Woocommerce 现在有一个“日期”字段类型，具有非常具体的行为，在其字段内有 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 结帐字段

推荐阅读