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

Диагностика задачи: зачем использовать хук before_add_to_cart на мобильных устройствах

При разработке WooCommerce-сайтов часто возникает необходимость запускать дополнительные проверки или модификации перед добавлением товара в корзину. Особенно это актуально для мобильных пользователей, у которых могут быть ограничения, например, по региону, устройству или по типу товара. Хук woocommerce_before_add_to_cart_button позволяет добавить кастомный функционал именно перед кнопкой «Добавить в корзину» на странице товара.

В отличие от woocommerce_add_to_cart, этот хук срабатывает до отправки формы, что позволяет менять интерфейс или выводить предупреждения для мобильных пользователей.

Как проверить, что именно этот хук нам подходит

• Нужно вставлять или изменять контент на странице товара непосредственно перед кнопкой «Добавить в корзину»;
• Требуется выполнить проверку устройства клиента (например, по User-Agent);
• Необходимо динамически менять доступность кнопки или показывать сообщения именно для мобильных пользователей.

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

Рассмотрим, как с помощью woocommerce_before_add_to_cart_button добавить условие, которое проверяет, зашел ли пользователь с мобильного, и если да, то выводит предупреждение и отключает кнопку.

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

function is_mobile_device() {
    return wp_is_mobile();
}

WordPress имеет встроенную функцию wp_is_mobile(), которая возвращает true для смартфонов и планшетов.

Шаг 2. Добавляем кастомный HTML и скрипт с помощью хука

add_action('woocommerce_before_add_to_cart_button', 'custom_block_add_to_cart_for_mobile');
function custom_block_add_to_cart_for_mobile() {
    if (is_mobile_device()) {
        echo '<div id="mobile-warning" style="color: red; margin-bottom: 10px; font-weight: bold;">Покупка с мобильных устройств временно ограничена.</div>';
        // Выключаем кнопку с помощью JavaScript
        ?>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var btn = document.querySelector('button.single_add_to_cart_button');
            if (btn) {
                btn.disabled = true;
                btn.style.opacity = '0.5';
                btn.title = 'Покупка с мобильного устройства временно недоступна';
            }
        });
        </script>
        <?php
    }
}

Этот код выводит предупреждение и визуально блокирует кнопку «Добавить в корзину» на мобильных устройствах.

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

Для проверки сделайте следующее:

1. Откройте страницу товара с мобильного браузера или в эмуляторе мобильного устройства в Chrome DevTools;
2. Проверьте наличие красного предупреждения над кнопкой;
3. Попробуйте нажать кнопку – она должна быть неактивна и иметь соответствующий tooltip;
4. С десктопа поведение не должно меняться.

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

• Кнопка не блокируется – возможно, селектор кнопки изменился. Проверьте в браузере, что у кнопки класс single_add_to_cart_button. Если тема переопределяет шаблон, скорректируйте селектор.
• JS не выполняется – убедитесь, что скрипт вставлен в правильном месте и DOM загружен (используйте DOMContentLoaded); также проверьте ошибки в консоли браузера.
• Проверка мобильного устройства не срабатывает – функция wp_is_mobile() может не определять некоторые планшеты как мобильные. Для более точной проверки можно использовать библиотеку Mobile Detect на PHP.

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

• Кэширование: если у вас активны плагины кэширования, отключите кэш для страниц товаров с динамическим содержимым, чтобы предупреждение работало корректно на мобильных;
• Кроссбраузерность: проверяйте работу скриптов на всех целевых мобильных браузерах;
• Безопасность: не допускайте вывода пользовательских данных без фильтрации, чтобы избежать XSS;
• Оптимизация: если нужно более сложное управление состоянием кнопки, рассмотрите добавление AJAX-запросов и обработку на сервере.

Сравнение подходов для блокировки кнопки на мобильных устройствах