在 WooCommerce 結帳頁面新增全名欄位，方便華人使用者輸入姓名

在電子商務網站中，提供友善且符合使用者習慣的結帳流程是提升使用者體驗的關鍵之一。對於華人使用者而言，傳統的「姓氏」和「名字」分開輸入的方式可能不太直觀，因為在日常生活中，我們習慣以全名形式呈現姓名。為了迎合這一需求，我們可以在 WooCommerce 的結帳頁面中新增「全名」欄位，並隱藏原有的「姓氏」和「名字」欄位，讓使用者可以直接輸入全名。

實現方法

以下是實現此功能的完整程式碼：

// 加入全名欄位，並隱藏原有的 billing_first_name、billing_last_name、shipping_first_name、shipping_last_name 欄位
add_filter( 'woocommerce_checkout_fields', 'custom_override_checkout_fields' );
function custom_override_checkout_fields( $fields ) {
    error_log('custom_override_checkout_fields triggered');
    
    // 若您的主題已自定義 checkout 表單，可能需要先確認是否有此陣列存在
    if ( isset( $fields['billing'] ) ) {
        // 新增「帳單資訊」全名欄位
        $fields['billing']['billing_full_name'] = array(
             'label'       => __('帳單全名', 'woocommerce'),
             'placeholder' => __('請輸入全名（姓氏在前）', 'woocommerce'),
             'required'    => true,
             'class'       => array('form-row-wide'),
             'priority'    => 25,
        );
        // 隱藏原有的帳單姓氏與名字欄位
        $fields['billing']['billing_first_name']['class'][] = 'hidden';
        $fields['billing']['billing_last_name']['class'][]  = 'hidden';
    }

    if ( isset( $fields['shipping'] ) ) {
        // 新增「收件人」全名欄位
        $fields['shipping']['shipping_full_name'] = array(
             'label'       => __('收件人全名', 'woocommerce'),
             'placeholder' => __('請輸入收件人全名（姓氏在前）', 'woocommerce'),
             'required'    => true,
             'class'       => array('form-row-wide'),
             'priority'    => 25,
        );
        // 隱藏原有的收件人姓氏與名字欄位
        $fields['shipping']['shipping_first_name']['class'][] = 'hidden';
        $fields['shipping']['shipping_last_name']['class'][]  = 'hidden';
    }

    return $fields;
}

// 當結帳表單送出時，將 billing_full_name 和 shipping_full_name 拆分
add_filter( 'woocommerce_checkout_posted_data', 'custom_split_full_name_fields' );
function custom_split_full_name_fields( $data ) {
    error_log('custom_split_full_name_fields triggered');
    
    // 處理帳單全名
    if ( ! empty( $data['billing_full_name'] ) ) {
        $full_name = trim( $data['billing_full_name'] );
        if ( mb_strlen( $full_name, 'UTF-8' ) > 0 ) {
            // 姓氏取第一個字，剩下的是名字
            $data['billing_last_name']  = mb_substr( $full_name, 0, 1, 'UTF-8' );
            $data['billing_first_name'] = mb_substr( $full_name, 1, null, 'UTF-8' );
            
            error_log('帳單拆分結果：billing_last_name = ' . $data['billing_last_name']);
            error_log('帳單拆分結果：billing_first_name = ' . $data['billing_first_name']);
        }
    }

    // 處理收件人全名
    if ( ! empty( $data['shipping_full_name'] ) ) {
        $full_name = trim( $data['shipping_full_name'] );
        if ( mb_strlen( $full_name, 'UTF-8' ) > 0 ) {
            // 姓氏取第一個字，剩下的是名字
            $data['shipping_last_name']  = mb_substr( $full_name, 0, 1, 'UTF-8' );
            $data['shipping_first_name'] = mb_substr( $full_name, 1, null, 'UTF-8' );
            
            error_log('收件拆分結果：shipping_last_name = ' . $data['shipping_last_name']);
            error_log('收件拆分結果：shipping_first_name = ' . $data['shipping_first_name']);
        }
    }

    return $data;
}

程式碼說明

新增全名欄位並隱藏原有欄位：
- 使用 woocommerce_checkout_fields 過濾器，對結帳頁面的欄位進行自定義。
- 在「帳單資訊」和「收件人資訊」中，分別新增 billing_full_name 和 shipping_full_name 欄位，並設定標籤、佔位符、必填屬性、CSS 類別和顯示優先順序。
- 將原有的 billing_first_name、billing_last_name、shipping_first_name 和 shipping_last_name 欄位添加 hidden 類別，以隱藏這些欄位。
拆分全名為姓氏和名字：
- 使用 woocommerce_checkout_posted_data 過濾器，在結帳表單提交時，對提交的資料進行處理。
- 檢查 billing_full_name 和 shipping_full_name 是否有值，若有，則將全名的第一個字視為姓氏，剩餘部分視為名字，並分別賦值給對應的欄位。
- 使用 mb_substr 函式確保對多字節字符（如中文）進行正確的字串切割。

實現方法

程式碼說明

相關文章