WooCommerce注册表单自定义生日字段的添加与正确保存实践

admin 百科 12

WooCommerce注册表单自定义生日字段的添加与正确保存实践

本教程详细指导如何在woocommerce“我的账户”注册表单中添加自定义生日字段,并确保其数据能够正确保存。文章将重点介绍如何使用三个下拉菜单(日、月、年)构建生日选择器,并通过woocommerce提供的钩子实现表单显示、数据验证及用户元数据保存,特别强调了月份值和日期格式化在数据保存中的关键作用。

在WooCommerce中,用户注册表单默认只包含基本的账户信息。然而,许多电商网站为了更好地了解客户或提供个性化服务,需要收集额外的用户数据,例如生日。本文将详细阐述如何在不使用第三方插件的情况下,通过自定义代码向WooCommerce的“我的账户”注册表单添加一个由日、月、年三个下拉菜单组成的生日字段,并确保其数据能够被正确地验证和保存到用户元数据中。

1. 添加自定义生日字段到注册表单

要将自定义字段添加到WooCommerce注册表单,我们需要利用 woocommerce_register_form_start 钩子。这个钩子允许我们在表单的开始位置注入自定义HTML。为了提供良好的用户体验并确保数据格式的统一性,我们选择使用三个独立的 select 标签来分别选择年、月、日。

WooCommerce注册表单自定义生日字段的添加与正确保存实践-第2张图片-佛山资讯网

关键修正点: 在创建月份下拉菜单时,每个

以下是实现此功能的代码:

/**
 * 将自定义生日字段添加到WooCommerce“我的账户”注册表单
 */
add_action( 'woocommerce_register_form_start', 'add_custom_birthday_fields_to_registration_form' );
function add_custom_birthday_fields_to_registration_form() {
    ?>
    <p class="form-row form-row-first-name">
        <label for="billing_first_name"><?php _e( 'First name', 'woocommerce' ); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_first_name" id="billing_first_name" value="<?php if ( ! empty( $_POST['billing_first_name'] ) ) esc_attr_e( $_POST['billing_first_name'] ); ?>" />
    </p>

    <p class="form-row form-row-last-name">
        <label for="billing_last_name"><?php _e( 'Last name', 'woocommerce' ); ?><span class="required">*</span></label>
        <input type="text" class="input-text" name="billing_last_name" id="billing_last_name" value="<?php if ( ! empty( $_POST['billing_last_name'] ) ) esc_attr_e( $_POST['billing_last_name'] ); ?>" />
    </p>

    <table class="form-table">
        <tr>
            <th><label for="birth-date-day"><?php echo __( 'Birthday' ); ?></label></th>
            <td>
                <select id="birth-date-day" name="birthday[day]">
                    <option selected="selected" value=""><?php echo __( 'Day' ); ?></option><?php
                    for( $i = 1; $i <= 31; $i++ ) {
                        printf( '<option value="%1$s">%1$s</option>', $i );
                    } ?>
                </select>

                <select id="birth-date-month" name="birthday[month]">
                    <option selected="selected" value=""><?php echo __( 'Month' ); ?></option>
                    <option value="1"><?php _e( 'January' ); ?></option>
                    <option value="2"><?php _e( 'February' ); ?></option>
                    <option value="3"><?php _e( 'March' ); ?></option>
                    <option value="4"><?php _e( 'April' ); ?></option>
                    <option value="5"><?php _e( 'May' ); ?></option>
                    <option value="6"><?php _e( 'June' ); ?></option>
                    <option value="7"><?php _e( 'July' ); ?></option>
                    <option value="8"><?php _e( 'August' ); ?></option>
                    <option value="9"><?php _e( 'September' ); ?></option>
                    <option value="10"><?php _e( 'October' ); ?></option>
                    <option value="11"><?php _e( 'November' ); ?></option>
                    <option value="12"><?php _e( 'December' ); ?></option>
                </select>

                <select id="birth-date-year" name="birthday[year]">
                    <option selected="selected" value=""><?php echo __( 'Year' ); ?></option><?php
                    // 从当前年份减去14年(例如,最小年龄限制)到99年(例如,最大年龄限制)
                    for( $i = date("Y") - 14; $i >= date("Y") - 99 ; $i-- ) {
                        printf( '<option value="%1$s">%1$s</option>', $i );
                    } ?>
                </select>
            </td>
        </tr>
    </table>
    <?php
}

登录后复制

2. 验证自定义生日字段

在用户提交注册表单后,我们需要验证生日字段是否已被填写。woocommerce_register_post 钩子允许我们在用户数据保存之前执行自定义验证逻辑。如果字段为空,我们将添加一个验证错误。

标签: php html 编程语言 ai 注册表 多语言 用户注册 yy red

发布评论 0条评论)

还木有评论哦,快来抢沙发吧~