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

Почему кнопка «Добавить в корзину» не отображается при кастомизации шаблонов WooCommerce?

Часто разработчики, создавая или модифицируя шаблоны WooCommerce, сталкиваются с проблемой: на странице товара не появляется кнопка «Добавить в корзину». Это происходит из-за неправильного использования системных хуков, отсутствия необходимых функций или конфликтов в шаблонах. Особенно часто проблема возникает при работе с вариациями товара или при создании полностью кастомных шаблонов без подключения стандартных частей WooCommerce.

Диагностика проблемы

• Проверьте, загружается ли стандартный шаблон кнопки «Add to cart» в вашем кастомном шаблоне.
• Убедитесь, что в файле шаблона вызывается функция woocommerce_template_single_add_to_cart() или аналогичная.
• Проверьте, не отключена ли кнопка через фильтры или хуки (например, remove_action).
• Для вариативных товаров убедитесь, что подключены скрипты, необходимые для работы выбора вариаций (wc-add-to-cart-variation).
• Посмотрите консоль браузера на наличие JS-ошибок, которые могут блокировать отображение кнопки.

Пошаговое решение проблемы

1. Проверка подключения функции кнопки в шаблоне

В файле шаблона single-product.php или вашем кастомном шаблоне должен быть вызов:

<?php woocommerce_template_single_add_to_cart(); ?>

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

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

Если товар вариативный, необходимо убедиться, что скрипт вариаций подключен. В functions.php вашей темы добавьте:

function enqueue_variation_script() {
    if (is_product()) {
        wp_enqueue_script('wc-add-to-cart-variation');
    }
}
add_action('wp_enqueue_scripts', 'enqueue_variation_script');

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

3. Проверка и восстановление хуков WooCommerce

Иногда в кастомных темах или плагинах могут быть удалены важные хуки. Проверьте, что в вашем шаблоне присутствуют стандартные хуки WooCommerce, например:

do_action('woocommerce_single_product_summary');

Если этот хук отсутствует, кнопка не будет выводиться. Вставьте этот хук в нужное место шаблона, чтобы вернуть стандартную последовательность вывода.

4. Пример кастомного вывода кнопки «Добавить в корзину»

Если вы хотите полностью контролировать вывод, используйте следующий пример:

global $product;
if ( $product->is_purchasable() && $product->is_in_stock() ) {
    woocommerce_template_single_add_to_cart();
} else {
    echo '<p>Товар недоступен для покупки</p>';
}

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

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

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

• Отсутствует вызов woocommerce_template_single_add_to_cart() — решается добавлением этой функции в шаблон.
• Не подключен скрипт вариаций для вариативных товаров — добавьте wp_enqueue_script('wc-add-to-cart-variation').
• Удалены хуки WooCommerce — проверьте и восстановите хуки woocommerce_single_product_summary и другие.
• JS-ошибки из-за конфликтующих плагинов или тем — отключите сторонние плагины по очереди, чтобы выявить виновника.
• Кэширование страницы без обновления кнопки — очистите кэш WordPress и браузера.

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

• Не изменяйте стандартные шаблоны WooCommerce напрямую в папке плагина — используйте переопределение в вашей теме.
• Для кастомных функций по выводу кнопки используйте правильные проверки наличия товара и его статуса ($product->is_in_stock(), $product->is_purchasable()).
• Оптимизируйте загрузку скриптов — не подключайте лишние скрипты на страницах, где они не нужны.
• Используйте инструменты разработки браузера для отладки JavaScript и сетевых запросов.
• При работе с кешированием учитывайте динамические элементы WooCommerce — кнопка «Добавить в корзину» должна обновляться корректно для каждого пользователя.

Сравнение способов вывода кнопки «Добавить в корзину» в кастомных шаблонах WooCommerce