WooCommerce: использование хука woocommerce_before_add_to_cart для кастомизации кнопки «Добавить в корзину»

Что такое хук woocommerce_before_add_to_cart и зачем он нужен

В WooCommerce есть множество хуков, которые позволяют вмешиваться в процесс отображения и функционала товаров. Один из них — woocommerce_before_add_to_cart. Этот хук срабатывает непосредственно перед выводом кнопки «Добавить в корзину» на странице товара. Используя его, можно добавить любой контент или выполнить действия, которые будут видны пользователю до самой кнопки.

Пример типичных задач с использованием этого хука:

• Вывод дополнительного текста или предупреждений
• Динамическая замена или скрытие кнопки при определённых условиях
• Добавление пользовательских полей перед кнопкой

Диагностика: почему не работает кастомизация кнопки на странице товара

Если вы пытаетесь изменить кнопку «Добавить в корзину», но ваши изменения не отображаются, проверьте следующее:

• Используете ли вы правильный хук? Для вставки перед кнопкой — именно woocommerce_before_add_to_cart_button или woocommerce_before_add_to_cart_form, а не woocommerce_before_add_to_cart, который не существует. Частая ошибка — путаница в названии.
• Не переопределяется ли шаблон темы, где кнопка выводится напрямую без вызова хуков.
• Нет ли конфликтующих плагинов, которые могут менять вывод кнопки.

Важно: хук woocommerce_before_add_to_cart_button — правильный для вставки контента перед кнопкой внутри формы, а woocommerce_before_add_to_cart_form — перед всей формой добавления в корзину.

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

Реализуем пример: если цена товара ниже 1000 рублей, выведем предупреждение «Цена товара ниже минимальной — проверьте условия покупки» перед кнопкой.

add_action('woocommerce_before_add_to_cart_button', 'wpdir_custom_price_warning');
function wpdir_custom_price_warning() {
    global $product;
    if ( $product->get_price() < 1000 ) {
        echo '<p style="color: red; font-weight: bold;">Цена товара ниже минимальной — проверьте условия покупки.</p>';
    }
}

Где добавить код:

• В файл functions.php вашей дочерней темы (рекомендуется) или в кастомный плагин.

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

1. Откройте страницу любого товара с ценой ниже 1000 рублей.

2. Перед кнопкой «Добавить в корзину» должно появиться красное предупреждение.

3. Для товаров с ценой выше 1000 рублей предупреждение отсутствует.

Если предупреждение не появилось:

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

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

• Неверный хук: попытка использовать woocommerce_before_add_to_cart — такого хука нет. Правильно использовать woocommerce_before_add_to_cart_button или woocommerce_before_add_to_cart_form.
• Добавление кода в основной файл темы: при обновлении тема перезапишет изменения — всегда используйте дочернюю тему.
• Конфликт плагинов: если код не срабатывает, отключите поочерёдно плагины, особенно те, что влияют на товарные страницы.

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

• Не добавляйте тяжелые запросы или сложную логику в хук, который вызывается на каждой странице товара — это ухудшит скорость загрузки.
• Используйте кэширование WooCommerce и сайта, чтобы снизить нагрузку.
• При выводе пользовательских данных всегда экранируйте вывод для защиты от XSS, например esc_html().

Дополнительный пример: добавление пользовательского поля перед кнопкой «Добавить в корзину»

Добавим текстовое поле, значение которого сохранится в заказе:

add_action('woocommerce_before_add_to_cart_button', 'wpdir_add_custom_text_field');
function wpdir_add_custom_text_field() {
    echo '<div class="custom-text-field"><label for="custom_note">Дополнительная заметка:</label><input type="text" id="custom_note" name="custom_note" /></div>';
}

// Сохраняем поле в сессии
add_filter('woocommerce_add_cart_item_data', 'wpdir_save_custom_text_field', 10, 2);
function wpdir_save_custom_text_field($cart_item_data, $product_id) {
    if (!empty($_POST['custom_note'])) {
        $cart_item_data['custom_note'] = sanitize_text_field($_POST['custom_note']);
    }
    return $cart_item_data;
}

// Отображаем в корзине
add_filter('woocommerce_get_item_data', 'wpdir_display_custom_text_field_cart', 10, 2);
function wpdir_display_custom_text_field_cart($item_data, $cart_item) {
    if (isset($cart_item['custom_note'])) {
        $item_data[] = array(
            'key' => 'Заметка',
            'value' => wc_clean($cart_item['custom_note'])
        );
    }
    return $item_data;
}

Так вы сможете расширить функциональность стандартной кнопки, не меняя шаблоны.