Чому кнопка «В кошик» зникає з товарів WooCommerce

Ви налаштували магазин, додали десяток товарів, але заходите на сторінку, а замість кнопки «В кошик» порожнеча. Клієнт не може купити. Паніка. Але проблему вирішити простіше, ніж здається на перший погляд.

Причин зникнення кнопки рівно п’ять: від незаповненої картки товару до серверного mod_security. Дві з них закриваються за два кліки. Ще дві, парою рядків коду. І лише одна потребує дзвінка хостингу. Нижче, покроковий розбір із кодом, скриншотами та конкретними діями.

💡 Швидкий огляд:

• Спочатку перевірте картку товару, ціна та наявність обов’язкові
• Вимкніть усі плагіни разом і ввімкніть лише WooCommerce, якщо кнопка з’явилася, винен конфлікт
• Зайдіть у налаштовувач теми, можливо, кнопку просто приховано перемикачем
• Виправте шаблон теми через редактор коду, заміна трьох рядків у single.php
• Відкрийте консоль браузера: помилка JavaScript → телефонуйте хостингу, проблема в mod_security

1. Перевірте картку товару, ціну та наявність

WooCommerce показує кнопку «В кошик» лише тоді, коли товар можна купити. Не можна купити, немає кнопки. Логіка проста.

Відкрийте Товари → Усі товари → вибрати проблемний → Редагувати. У блоці «Дані товару» перевірте три поля:

• Ціна, звичайна ціна обов’язкова, навіть якщо товар зі знижкою. Поле «Ціна» не повинно бути порожнім.
• Наявність, статус «В наявності» або «Доступний для передзамовлення». Значення «Немає в наявності» приховує кнопку.
• Варіативні товари, кожна варіація повинна мати свою ціну та статус наявності.

Поширена помилка: створили варіативний товар, додали атрибути, колір, розмір, але не прописали ціну для конкретних варіацій. WooCommerce у цьому випадку не розуміє, за якою ціною продавати, і просто не показує кнопку.

Заповнили → Оновити → відкрити сторінку товару на сайті. У більшості простих випадків проблему вирішено вже на цьому кроці.

2. Знайдіть конфлікт плагінів

WordPress збирає код з активної теми та всіх активних плагінів. Якщо два плагіни використовують однакові назви функцій, перехоплюють одні й ті самі хуки або просто несумісні, WooCommerce може втратити кнопку.

Порядок діагностики:

• Перейдіть у Плагіни → Встановлені. Виділіть усі (галочка зверху), у випадному меню «Дії» виберіть «Деактивувати» → Застосувати.
• Увімкніть лише WooCommerce. Відкрийте сторінку проблемного товару.
• Кнопка з’явилася, конфлікт підтверджено. Вмикайте плагіни по одному, після кожного перевіряйте сторінку товару. Плагін, після активації якого кнопка знову зникла,, винуватець.
• Замініть проблемний плагін аналогом або зв’яжіться з його розробником.

Окремий підвид цієї проблеми, конфлікт із фільтром woocommerce_show_variation_price. Деякі теми та плагіни повертають false для цього хука, WooCommerce приховує ціну варіації та втрачає кнопку. Якщо після вимкнення всіх плагінів кнопка на місці, а видимого «винуватця» немає, перевірте functions.php активної теми на рядки з woocommerce_show_variation_price.

Примусово ввімкнути відображення можна фільтром:

1
add_filter('woocommerce_show_variation_price', function() {
2
    return true;
3
});

Вставте цей код у functions.php активної (дочірньої) теми або через плагін Code Snippets. Після збереження перевірте товар.

3. Налаштовувач теми, невидимий перемикач

Деякі теми додають власний перемикач видимості кнопки. Логіка розробників: «дамо користувачеві гнучкість». На практиці перемикач за замовчуванням у положенні «приховати», і власник магазину про це не знає.

Зайдіть у Зовнішній вигляд → Налаштувати. Шукайте секцію:

• WooCommerce → Product Page (або Контент → WooCommerce, залежить від теми);
• Параметр «Add to Cart Button» / «Кнопка додавання в кошик» → Visible (або «Показувати»).

Збережіть налаштування та перевірте товар. Працює для тем, які використовують customizer-секції WooCommerce поверх стандартного шаблону, популярно в тем із ThemeForest: Avada, Flatsome, WoodMart.

4. Виправте шаблон теми в редакторі

Якщо попередні кроки не дали результату, проблема глибша: тема використовує нестандартний шаблон сторінки товару та не викликає WooCommerce-функцію виведення кнопки.

Що відбувається. WordPress завантажує сторінку товару через файл теми single.php (або index.php як fallback). Всередині стоїть виклик get_template_part(), який підключає блок контенту. Тема повинна передати керування WooCommerce, викликати wc_get_template_part('content', 'single-product'), але деякі теми цього не роблять. Підсумок: верстка теми є, кнопки немає.

Як виправити:

• Зовнішній вигляд → Редактор файлів теми. Підтвердьте попередження WordPress.
• У правій колонці знайдіть файли single.php та index.php:

• Відкрийте single.php (якщо є). Якщо немає, index.php.
• Знайдіть рядок із get_template_part. Замініть весь блок виведення контенту на:

1
if (is_singular('product')) {
2
    wc_get_template_part('content', 'single-product');
3
} else {
4
    wc_get_template_part('content', get_post_format());
5
}

• Збережіть файл.

Перед правкою зробіть бекап файлу теми. Скопіюйте вміст у блокнот або використовуйте дочірню тему, пряма правка батьківської теми скинеться під час наступного оновлення.

Після збереження відкрийте сторінку товару. Кнопка повинна з’явитися.

5. Серверна проблема, mod_security ріже скрипти

Якщо ви дійшли сюди й кнопки все ще немає, причина, найімовірніше, на стороні сервера. Модуль mod_security (міжмережевий екран Apache/LiteSpeed) блокує завантаження JavaScript-файлів WooCommerce. Без JavaScript кошик не працює.

Діагностика:

• Відкрийте сторінку проблемного товару.
• Натисніть F12 → вкладка Console (Консоль).
• Шукайте помилку завантаження скрипту WooCommerce, зазвичай cart.min.js, add-to-cart.min.js або jquery.blockUI.min.js із кодом 403 Forbidden.
• Побачили, проблема в mod_security.

Рішення: зв’яжіться з хостинг-провайдером і попросіть додати виняток для URL-шляху /wp-content/plugins/woocommerce/ у правилах mod_security. Техпідтримка робить це за кілька хвилин.

Альтернативно, вимкніть mod_security для домену через .htaccess (якщо хостинг дозволяє):

1
<IfModule mod_security.c>
2
    SecFilterEngine Off
3
    SecFilterScanPOST Off
4
</IfModule>

Але краще узгодити з хостером: на shared-хостингах mod_security захищає весь сервер, і його вимкнення створює ризик для безпеки.

Зведена таблиця: що перевіряти

Детальний відеогайд за всіма п’ятьма кроками, від картки товару до правки шаблону та серверної діагностики.

⁉️🤔 Поширені запитання

Кнопка зникла лише у варіативних товарів, у чому річ?

Майже напевно не заповнені ціни варіацій. Відкрийте товар, вкладка «Варіації», розкрийте кожну, поле «Ціна» повинно бути заповнене. Порожня ціна варіації означає, що WooCommerce вважає товар «не для продажу» та прибирає кнопку. Для 50 і більше варіацій використовуйте імпорт CSV: Товари → Імпорт.

Після оновлення теми кнопка зникла, що робити?

Оновлення теми перезаписало single.php. Поверніть правку з кроку 4. Щоб не повторювати під час кожного оновлення, винесіть шаблон у дочірню тему: створіть папку /woocommerce/ у дочірній темі та скопіюйте туди виправлений single-product.php.

Чи можна відновити кнопку без правки коду?

Так, у половині випадків: перевірте картку товару (крок 1) і налаштовувач теми (крок 3). Код потрібен лише тоді, коли тема нестандартно виводить шаблон товару або коли плагін чи тема глушать хук woocommerce_show_variation_price.

Кнопка є, але не працює, натискаєш і нічого не відбувається?

Це JavaScript-помилка. Відкрийте консоль браузера (F12) і подивіться, які скрипти падають. Найчастіше, конфлікт jQuery-версій (тема підключає стару jQuery поверх штатної WordPress) або кешований мініфікований JS не оновився. Скиньте кеш плагіна кешування та перегенеруйте мініфіковані скрипти.

Чи потрібно вимикати AJAX-додавання в кошик?

Лише для діагностики. Зайдіть у WooCommerce → Налаштування → Товари та зніміть галку «Увімкнути AJAX-додавання в кошик». Якщо після цього кнопка з’явилася, проблема в AJAX-обробнику конкретної теми. Залиште AJAX вимкненим або замініть тему.

Що робити, якщо кнопка так і не з’явилася

П’ять кроків вище закривають переважну більшість випадків зникнення кнопки «В кошик». Якщо жоден не спрацював, проблема глибша та потребує ручного налагодження.

Швидкий чек-лист останнього шансу:

• Змініть тему на Storefront, офіційну WooCommerce-тему. Кнопка з’явилася? Проблема у вашій темі.
• Перевірте WooCommerce → Статус → Заплановані дії, чи немає завислих cron-завдань.
• Зайдіть у WooCommerce → Статус → Логи та пошукайте fatal-errors за останні дні.

Не допомогло, опишіть ситуацію в коментарях: версія WooCommerce, назва теми, список активних плагінів. Знайдемо причину.