Как использовать WooCommerce хуки для мобильных устройств: практическое руководство

Диагностика задачи: зачем нужны хуки WooCommerce для мобильных

Мобильные пользователи составляют основную часть трафика интернет-магазинов на WooCommerce. Часто требуется адаптировать функционал именно под мобильные устройства: изменить поведение кнопок, скрыть ненужные элементы, изменить вывод информации. Стандартных настроек темы недостаточно — здесь на помощь приходят хуки WooCommerce, которые позволяют вмешиваться в процесс рендеринга, сохраняя при этом совместимость с обновлениями.

Основные хуки WooCommerce, полезные для мобильного функционала

WooCommerce использует множество хуков actions и filters, с помощью которых можно модифицировать отображение и логику. Для мобильных подойдут следующие:

• woocommerce_before_single_product — позволяет добавить кастомный блок перед товаром;
• woocommerce_after_single_product_summary — для вставки контента после описания товара;
• woocommerce_add_to_cart_fragments — обновление корзины без перезагрузки, критично для мобильных;
• woocommerce_cart_item_name — изменение названия товара в корзине;
• woocommerce_checkout_fields — модификация полей оформления заказа, например, упрощение для мобильных;
• template_redirect — для редиректов и условных проверок на мобильных страницах.

Пошаговое решение: пример изменения кнопки «Добавить в корзину» на мобильных

Задача: на мобильных устройствах заменить стандартную кнопку «Добавить в корзину» на упрощённую версию с текстом «Купить» и другим цветом.

1. Определяем мобильное устройство

Используем PHP-функцию wp_is_mobile(), встроенную в WordPress, для определения мобильных посетителей.

2. Удаляем стандартную кнопку и добавляем новую

function replace_add_to_cart_button_for_mobile() {
    if ( wp_is_mobile() ) {
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
        add_action( 'woocommerce_single_product_summary', 'custom_mobile_add_to_cart_button', 30 );
    }
}
add_action( 'wp', 'replace_add_to_cart_button_for_mobile' );

function custom_mobile_add_to_cart_button() {
    global $product;
    echo '<button class="button alt mobile-buy-button" data-product-id="' . esc_attr( $product->get_id() ) . '">Купить</button>';
}

3. Добавляем JavaScript для обработки клика по кнопке

function enqueue_mobile_buy_button_script() {
    if ( wp_is_mobile() ) {
        wp_enqueue_script( 'mobile-buy-button', get_stylesheet_directory_uri() . '/js/mobile-buy-button.js', array( 'jquery' ), null, true );
        wp_localize_script( 'mobile-buy-button', 'mobileBuyParams', array(
            'ajax_url' => admin_url( 'admin-ajax.php' ),
            'nonce' => wp_create_nonce( 'mobile_buy_nonce' )
        ));
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_mobile_buy_button_script' );

Создайте файл mobile-buy-button.js в папке темы с содержимым:

jQuery(document).ready(function($) {
    $('.mobile-buy-button').on('click', function(e) {
        e.preventDefault();
        var product_id = $(this).data('product-id');
        $.ajax({
            url: mobileBuyParams.ajax_url,
            type: 'POST',
            data: {
                action: 'mobile_add_to_cart',
                product_id: product_id,
                nonce: mobileBuyParams.nonce
            },
            success: function(response) {
                if (response.success) {
                    alert('Товар добавлен в корзину');
                    // Тут можно обновить корзину на странице, если нужно
                } else {
                    alert('Ошибка добавления товара');
                }
            }
        });
    });
});

4. Обрабатываем AJAX-запрос на сервере

function mobile_add_to_cart_ajax() {
    check_ajax_referer( 'mobile_buy_nonce', 'nonce' );
    $product_id = intval( $_POST['product_id'] ?? 0 );
    if ( $product_id && WC()->cart->add_to_cart( $product_id ) ) {
        wp_send_json_success();
    } else {
        wp_send_json_error();
    }
}
add_action( 'wp_ajax_mobile_add_to_cart', 'mobile_add_to_cart_ajax' );
add_action( 'wp_ajax_nopriv_mobile_add_to_cart', 'mobile_add_to_cart_ajax' );

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

• Откройте страницу товара с мобильного устройства или с помощью эмулятора мобильных в браузере;
• Убедитесь, что вместо стандартной кнопки «Добавить в корзину» отображается кнопка «Купить» с кастомным стилем;
• Нажмите на кнопку и проверьте, что появляется уведомление об успешном добавлении;
• Проверьте корзину, чтобы убедиться, что товар действительно добавился;
• Проверьте консоль браузера на предмет ошибок JavaScript;
• Проверьте работу на десктопе — там кнопка должна остаться стандартной.

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

• Кнопка не меняется на мобильных: Проверьте, что хук add_action('wp', 'replace_add_to_cart_button_for_mobile') вызывается после инициализации WooCommerce. Иногда лучше использовать template_redirect.
• AJAX-запрос возвращает ошибку: Проверьте nonce, убедитесь, что AJAX-обработчик зарегистрирован для незарегистрированных пользователей (wp_ajax_nopriv_...).
• Скрипт не подключается: Убедитесь, что путь в wp_enqueue_script указан правильно и файл реально существует.
• Кнопка не стилизуется: Добавьте CSS правило в файл стилей темы, например:

  .mobile-buy-button { background-color: #0073aa; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; }

• Товар не добавляется в корзину: Убедитесь, что товар опубликован и доступен для покупки, а также что корзина WooCommerce корректно инициализирована.

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

• Обязательно используйте check_ajax_referer для проверки nonce в AJAX-обработчиках, чтобы предотвратить CSRF-атаки.
• Минимизируйте количество AJAX-запросов — например, обновляйте корзину только при необходимости.
• Используйте условную функцию wp_is_mobile() только на сервере для минимизации загрузки лишнего кода на десктопах.
• Кэширование: если вы используете плагин кэширования, убедитесь, что AJAX-запросы не кэшируются, иначе кнопка может вести себя неправильно.
• Добавьте CSS и JS файлы только на нужных страницах (например, только на странице товара), чтобы снизить нагрузку.

Сравнение способов изменения кнопки на мобильных