Диагностика задачи: зачем отключать заказы по устройству
В некоторых случаях требуется ограничить оформление заказов для определённых типов устройств (например, мобильных или планшетов) из-за проблем совместимости, ограничений доставки или специфики товара. WooCommerce не предоставляет такой функционал из коробки, поэтому необходима кастомизация.
Пошаговое решение: реализация автоматического отключения заказов по устройству
1. Определяем устройство пользователя в WooCommerce
Для определения устройства используем PHP-библиотеку Mobile_Detect, которая обычно не встроена, поэтому её нужно добавить вручную в тему или плагин.
require_once get_template_directory() . '/inc/Mobile_Detect.php';
$detect = new Mobile_Detect;Библиотеку можно скачать с официального сайта и положить в папку inc вашей темы.
2. Хук для проверки устройства при оформлении заказа
Используем хук woocommerce_checkout_process для проверки устройства и вывода ошибки, если устройство запрещено.
add_action('woocommerce_checkout_process', 'restrict_checkout_by_device');
function restrict_checkout_by_device() {
if ( ! class_exists('Mobile_Detect') ) {
return; // Библиотека не подключена
}
$detect = new Mobile_Detect;
// Запретить оформление с мобильных устройств
if ( $detect->isMobile() && ! $detect->isTablet() ) {
wc_add_notice(__('Оформление заказов с мобильных устройств временно недоступно.'), 'error');
}
}3. Опционально: отключить видимость кнопки «Оформить заказ» на запрещённых устройствах с помощью JavaScript
add_action('wp_footer', 'hide_checkout_button_on_mobile');
function hide_checkout_button_on_mobile() {
?>
<script>
if(/Mobi|Android/i.test(navigator.userAgent)) {
var button = document.querySelector('.woocommerce-checkout button[name=\'woocommerce_checkout_place_order\']');
if(button) button.style.display = 'none';
}
</script>
<?php
}Проверка результата после внедрения
- Откройте страницу оформления заказа с мобильного устройства — должна появиться ошибка и оформление блокироваться.
- С десктопа оформление должно работать без проблем.
- Опционально: кнопка оформления заказа скрыта на мобильных в соответствии с JS.
Частые ошибки и как их исправить
- Ошибка подключения Mobile_Detect: проверьте путь к файлу и наличие класса. Если путь неправильный, библиотека не загрузится.
- Отсутствие проверки isTablet(): без неё планшеты могут попадать под блокировку, если нужно разрешить планшеты — использовать
isMobile() && !isTablet(). - JavaScript не срабатывает: убедитесь, что селектор кнопки оформления соответствует вашей теме и плагинам, иногда классы отличаются.
- Кэширование: при использовании кеша на сайте изменения могут не применяться сразу, очистите кеш.
Практические советы по безопасности и производительности
- Не загружайте Mobile_Detect на всех страницах, а только на тех, где требуется проверка (например, через условие
is_checkout()). - Для надежности проверки устройства на сервере используйте Mobile_Detect, а в клиентах дополнительно JavaScript — это повышает UX.
- Избегайте скрытия элементов только через CSS, так как форма может быть отправлена программным способом.
- Если нужно гибко управлять списком запрещённых устройств, сделайте настройку в админке через опции темы или плагина.
Сравнение вариантов реализации
| Вариант | Плюсы | Минусы | Пример использования |
|---|---|---|---|
| PHP + Mobile_Detect | Надёжная серверная проверка, не зависит от JS | Требует подключения библиотеки, увеличивает нагрузку сервера | Блокировка на этапе оформления заказа |
| JavaScript | Простая реализация, влияет на UX (скрытие кнопок) | Можно обойти отключением JS, не надёжно для безопасности | Скрытие кнопки оформления на клиенте |
| Плагины с настройками | Удобно, без кода | Может быть избыточно, зависит от плагина | Использование специализированных плагинов для ограничения по устройствам |