WooCommerce: как добавить автоподсказки в поиск товаров

Проблема: почему стандартный поиск WooCommerce неудобен

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

Диагностика: как проверить, что поиск нуждается в улучшении

• Проверьте, предлагает ли поиск автодополнение при вводе товара в стандартном виджете поиска.
• Оцените, учитываются ли вариации товаров в результатах поиска.
• Посмотрите, насколько быстро появляются результаты на разных устройствах (мобильные, десктоп).

Если автоподсказок нет и поиск не учитывает вариации, пора внедрять улучшения.

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

1. Создаем AJAX-обработчик в functions.php

add_action('wp_ajax_woocommerce_product_search', 'wc_product_search_callback');
add_action('wp_ajax_nopriv_woocommerce_product_search', 'wc_product_search_callback');

function wc_product_search_callback() {
    if ( empty($_GET['term']) ) {
        wp_send_json([]);
    }

    $term = sanitize_text_field($_GET['term']);

    $args = [
        'post_type' => ['product', 'product_variation'],
        'posts_per_page' => 10,
        's' => $term,
        'post_status' => 'publish',
    ];

    $query = new WP_Query($args);

    $results = [];
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $title = get_the_title();
            $results[] = [
                'id' => get_the_ID(),
                'label' => $title,
                'value' => $title,
                'permalink' => get_permalink(),
            ];
        }
    }
    wp_reset_postdata();

    wp_send_json($results);
}

2. Подключаем скрипт автодополнения в теме

function wc_enqueue_autocomplete_script() {
    if (is_shop() || is_product_category() || is_product_tag()) {
        wp_enqueue_script('jquery-ui-autocomplete');
        wp_enqueue_script('wc-autocomplete', get_template_directory_uri() . '/js/wc-autocomplete.js', ['jquery', 'jquery-ui-autocomplete'], '1.0', true);
        wp_localize_script('wc-autocomplete', 'wc_autocomplete_params', [
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('wc-autocomplete-nonce'),
        ]);
    }
}
add_action('wp_enqueue_scripts', 'wc_enqueue_autocomplete_script');

3. Создаем JavaScript для автодополнения (файл wc-autocomplete.js)

jQuery(document).ready(function($) {
    $('#woocommerce-product-search-field').autocomplete({
        source: function(request, response) {
            $.ajax({
                url: wc_autocomplete_params.ajax_url,
                dataType: 'json',
                data: {
                    action: 'woocommerce_product_search',
                    term: request.term
                },
                success: function(data) {
                    response($.map(data, function(item) {
                        return {
                            label: item.label,
                            value: item.value,
                            link: item.permalink
                        };
                    }));
                }
            });
        },
        select: function(event, ui) {
            window.location.href = ui.item.link;
        },
        minLength: 2
    });
});

4. Добавляем HTML для поля поиска с id woocommerce-product-search-field

<form role="search" method="get" class="woocommerce-product-search" action="<?php echo esc_url( home_url( '/' ) ); ?>">
    <label class="screen-reader-text" for="woocommerce-product-search-field">Поиск товаров:</label>
    <input type="search" id="woocommerce-product-search-field" class="search-field" placeholder="Поиск товаров…" value="<?php echo get_search_query(); ?>" name="s" />
    <button type="submit">Поиск</button>
    <input type="hidden" name="post_type" value="product" />
</form>

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

• Откройте страницу магазина или категорий.
• Начните вводить название товара в поле поиска.
• Проверьте, что появляется список подсказок с названиями товаров и вариаций.
• Выберите подсказку — должна произойти переадресация на страницу товара.
• Убедитесь, что поиск работает быстро и без ошибок в консоли браузера.

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

• Нет автоподсказок при вводе: Проверьте, подключен ли jQuery UI Autocomplete, правильно ли указан id поля поиска.
• Пустой или некорректный JSON: Проверьте функцию AJAX на сервере, убедитесь, что wp_send_json() вызывается.
• Не учитываются вариации товаров: В запросе WP_Query должен быть указан post_type => ['product', 'product_variation'].
• Переход по подсказке не работает: В js убедитесь, что в select передается правильная ссылка и происходит window.location.href.

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

• Используйте sanitize_text_field() для очистки входящих параметров в AJAX.
• Ограничьте количество результатов (например, 10) для снижения нагрузки на БД.
• Кешируйте AJAX-ответы при возможности через transient API при высоких нагрузках.
• Используйте nonce (в примере не реализован полностью) для защиты AJAX-запросов от CSRF.
• Подключайте скрипты автодополнения только на страницах магазина, чтобы не нагружать весь сайт.

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