「WooCommerce 綠界物流 API 無法取得運送單號：限制結帳電話格式避免運送問題」

在 WooCommerce 商城中使用綠界科技物流服務（例如超商取貨）是一個常見的做法，但你可能會發現一個潛在的問題：用戶下單時，結帳畫面對電話欄位並沒有進行格式限制，而綠界科技在生成運送單號時卻對行動電話有嚴格的格式要求。

這樣的結果會導致：

• 用戶雖然能順利完成下單，但如果電話格式不正確，當商城後台請求綠界科技生成 運送單號 時會因為電話格式錯誤而失敗。
• 商城管理者需要手動聯繫用戶修改電話，或者重送請求，導致流程延誤，增加了不必要的運營成本。

為了避免這種情況，我們可以在 WooCommerce 的結帳頁面提前限制用戶的電話輸入格式，確保數據的正確性，避免運送流程中斷。

綠界科技的行動電話格式需求

綠界對於行動電話有以下明確的要求：

1. 必須是台灣行動電話，格式為 09 開頭的 10 碼數字，例如：0953123123。
2. 允許：用戶可選擇是否使用 - 作為分隔符號，例如 0953-123-123。

若用戶輸入的電話不符合這些格式，綠界將拒絕生成運送單號，導致物流流程出錯。

解決方法：前後端限制電話格式

為了解決這個問題，我設計了一個完整的解決方案，包含前端與後端的雙重驗證，既提高用戶體驗，也保證資料的正確性。

1. 修改 WooCommerce 的電話欄位

首先，我們在 WooCommerce 結帳頁面中自訂電話欄位，加入提示文字與格式限制：

// 修改 WooCommerce 結帳電話欄位
add_filter('woocommerce_checkout_fields', 'customize_checkout_phone_field');
function customize_checkout_phone_field($fields) {
    // 修改電話欄位的 placeholder 和描述
    $fields['billing']['billing_phone']['placeholder'] = '輸入格式：0953123123';
    $fields['billing']['billing_phone']['label'] = '行動電話（格式：0953123123）';
    $fields['billing']['billing_phone']['custom_attributes'] = array(
        'pattern' => '^09[0-9]{2}-?[0-9]{3}-?[0-9]{3}$', // 允許09開頭，並可選擇性包含「-」
        'title' => '請輸入正確的行動電話，例如：0953123123'
    );
    return $fields;
}

2. 後端驗證輸入的電話格式

除了前端可以提示用戶，但依然需要後端驗證以確保資料安全與一致性。以下是加入 WooCommerce 結帳時的後端驗證邏輯：

// 結帳時驗證電話欄位
add_action('woocommerce_checkout_process', 'validate_custom_phone_field');
function validate_custom_phone_field() {
    $phone = $_POST['billing_phone'];
    // 移除「-」後進行驗證
    $sanitized_phone = str_replace('-', '', $phone);
    if (!preg_match('/^09[0-9]{8}$/', $sanitized_phone)) {
        wc_add_notice(__('行動電話格式不正確，請輸入正確的行動電話，例如：0953123123'), 'error');
    }
}

3. 前端限制用戶輸入內容

為了進一步減少輸入錯誤，我們可以在結帳頁面中使用 JavaScript，限制輸入內容僅能是數字或 -，並限制最大輸入長度。

// 限制輸入內容
add_action('wp_footer', 'custom_phone_input_script');
function custom_phone_input_script() {
    if (is_checkout()) {
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function () {
            const phoneField = document.querySelector('#billing_phone');
            if (phoneField) {
                // 僅允許數字和「-」
                phoneField.addEventListener('input', function (e) {
                    this.value = this.value.replace(/[^0-9-]/g, ''); // 限制輸入
                });
                phoneField.setAttribute('maxlength', '13'); // 限制最多輸入13字符（含「-」）
            }
        });
        </script>
        <?php
    }
}

實作成果

• 允許的格式：
  • 0953123123
  • 0953-123-123
• 不允許的格式：
  • +886953123123
  • 0229911231
  • 0953abc123

若用戶輸入錯誤，系統將提示用戶修改電話格式，並拒絕完成結帳流程。這樣可以有效避免在運送過程中因電話格式錯誤導致的單號生成失敗。

結語

這個解決方案可以幫助 WooCommerce 商城提前檢查用戶的行動電話格式，確保數據符合綠界科技的要求，從而避免運送流程中不必要的錯誤與延誤。

如果你也遇到了類似的問題，試著把這段程式碼加到你的網站中吧！希望這篇文章對你有幫助～如果有其他疑問，歡迎留言交流！