WooCommerce: как настроить автоподстановку адреса доставки по почтовому индексу

Проблема: необходимость ускорить ввод адреса доставки в WooCommerce

При оформлении заказа в WooCommerce пользователи часто сталкиваются с неудобствами при вводе полного адреса доставки вручную. Особенно это актуально для магазинов с большой географией доставки, где ошибочный ввод адреса приводит к задержкам и возвратам. Автоматическая подстановка улицы и города по введённому почтовому индексу значительно снижает количество ошибок и ускоряет процесс оформления.

Как диагностировать отсутствие автозаполнения адреса по индексу

• Откройте страницу оформления заказа (checkout) и введите почтовый индекс.
• Обратите внимание, меняется ли поле «город» или «улица» автоматически.
• Если нет — автозаполнение не реализовано, либо работает некорректно.
• Проверьте консоль браузера на наличие ошибок JavaScript, связанных с ajax-запросами.

Пошаговое решение: добавляем автоподстановку адреса по почтовому индексу

1. Подключение JavaScript для отслеживания ввода индекса

Добавим скрипт, который при изменении поля с почтовым индексом отправляет ajax-запрос к серверу для получения данных адреса.

function wpto_enqueue_scripts() {
    if (is_checkout()) {
        wp_enqueue_script('wpto-zip-autofill', get_template_directory_uri() . '/js/zip-autofill.js', ['jquery'], null, true);
        wp_localize_script('wpto-zip-autofill', 'wpto_ajax', [
            'ajax_url' => admin_url('admin-ajax.php')
        ]);
    }
}
add_action('wp_enqueue_scripts', 'wpto_enqueue_scripts');

2. JavaScript: отправка ajax-запроса и заполнение полей

jQuery(document).ready(function($) {
    $('#billing_postcode').on('change', function() {
        var postcode = $(this).val();
        if (postcode.length >= 5) { // пример длины индекса
            $.ajax({
                url: wpto_ajax.ajax_url,
                method: 'POST',
                data: {
                    action: 'wpto_get_address_by_postcode',
                    postcode: postcode
                },
                success: function(response) {
                    if (response.success) {
                        if(response.data.city) {
                            $('#billing_city').val(response.data.city).change();
                        }
                        if(response.data.street) {
                            $('#billing_address_1').val(response.data.street).change();
                        }
                    }
                }
            });
        }
    });
});

3. PHP: обработка ajax-запроса и получение данных по индексу

Для примера используем бесплатное API от Zippopotam.us (поддерживает некоторые страны). При необходимости можно заменить на платный или собственный источник.

add_action('wp_ajax_wpto_get_address_by_postcode', 'wpto_get_address_by_postcode_callback');
add_action('wp_ajax_nopriv_wpto_get_address_by_postcode', 'wpto_get_address_by_postcode_callback');

function wpto_get_address_by_postcode_callback() {
    $postcode = sanitize_text_field($_POST['postcode']);
    if (!$postcode) {
        wp_send_json_error();
    }

    $country = 'us'; // укажите нужную страну, например 'ru' для России
    $response = wp_remote_get("http://api.zippopotam.us/{$country}/{$postcode}");

    if (is_wp_error($response)) {
        wp_send_json_error();
    }

    $body = wp_remote_retrieve_body($response);
    $data = json_decode($body, true);

    if (empty($data['places'][0])) {
        wp_send_json_error();
    }

    $place = $data['places'][0];
    $result = [
        'city' => $place['place name'] ?? '',
        'street' => '', // улица не предоставляется API, можно интегрировать другой сервис
    ];

    wp_send_json_success($result);
}

Проверка результата после внедрения

• Откройте страницу оформления заказа.
• Введите действующий почтовый индекс.
• Убедитесь, что поле «город» заполнилось автоматически.
• Если поле «улица» требуется — реализуйте дополнительный API или оставьте для ручного ввода.
• Проверьте консоль браузера на отсутствие ошибок JavaScript.

Частые ошибки и как их исправить

• Отсутствие ответа от API: проверьте доступность внешнего сервиса, корректность URL и ключей.
• Поля не заполняются: убедитесь, что селекторы полей совпадают с теми, что в теме.
• Ajax-запрос не срабатывает: проверьте подключение скриптов и локализацию ajax_url.
• Неправильный формат почтового индекса: добавьте валидацию на стороне JS и PHP.

Практические советы по безопасности и производительности

• Используйте sanitize_text_field для всех входящих данных.
• Кэшируйте результаты запросов к API, чтобы снизить нагрузку и ускорить ответ.
• Обрабатывайте ошибки и исключения, чтобы не ломать оформление заказа.
• Если требуется поддержка нескольких стран — добавьте выбор страны и передавайте её в API.
• Для российских почтовых индексов рассмотрите интеграцию с сервисами типа Dadata или Почта России (платные API).

Сравнение вариантов реализации автоподстановки по почтовому индексу