Стандартна сторінка магазину WooCommerce показує під кожним товаром одну кнопку, «Додати в кошик». Для більшості магазинів цього достатньо. Але якщо ви продаєте товари, які потребують вивчення перед купівлею, самої лише кнопки «в кошик» недостатньо. Покупець хоче спершу відкрити картку товару, почитати опис, переглянути характеристики і вже звідти додати в кошик.

Проблема в тому, що WooCommerce не має вбудованого налаштування «додати кнопку Детальніше поруч із кнопкою Додати в кошик». А плагіни для цього завдання або перевантажені зайвим функціоналом, або конфліктують із темою. Залишається перевірений шлях: кастомний код у functions.php.

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

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

• Знімаємо стандартну кнопку «Додати в кошик» через remove_action
• Додаємо кастомну кнопку «Детальніше» з посиланням на картку товару
• Повертаємо кнопку «Додати в кошик» на нову позицію поруч із «Детальніше»
• Виправляємо подвоєння кнопок для товарів не в наявності через jQuery
• Код вставляється у functions.php дочірньої теми, безпечно та без плагінів

Як WooCommerce рендерить кнопки на сторінці магазину

WooCommerce виводить кнопку «Додати в кошик» через хук woocommerce_after_shop_loop_item. Цей хук спрацьовує в картці кожного товару всередині циклу WP_Query на сторінці магазину. За додавання кнопки відповідає функція woocommerce_template_loop_add_to_cart із пріоритетом 10.

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

Крок 1: прибираємо стандартну кнопку «Додати в кошик»

Перший крок, зняти функцію woocommerce_template_loop_add_to_cart з хука. Код розміщується у functions.php дочірньої теми або через плагін Code Snippets:

1
/* Убираем стандартную кнопку Добавить в корзину */
2
function remove_loop_button() {
3
    remove_action(
4
        'woocommerce_after_shop_loop_item',
5
        'woocommerce_template_loop_add_to_cart',
6
        10
7
    );
8
}
9
add_action( 'init', 'remove_loop_button' );

Огортаємо remove_action у функцію та вішаємо її на хук init. Напряму викликати remove_action у functions.php не можна: на момент завантаження теми WooCommerce може ще не ініціалізувати свої хуки. init гарантує, що всі екшени вже зареєстровані.

Після вставлення коду сторінка магазину втратить кнопку «Додати в кошик». Не лякайтеся, на наступному кроці ми повернемо її назад, уже в парі з «Детальніше».

Крок 2: додаємо кастомну кнопку «Детальніше»

Кнопка «Детальніше» — це посилання на картку товару, стилізоване під стандартну кнопку WooCommerce. Використовуємо $product->get_permalink() для отримання URL та do_shortcode для обгортки:

1
/* Добавляем кнопку Подробнее */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart'
5
);
6
function replace_add_to_cart() {
7
    global $product;
8
    $link = $product->get_permalink();
9
    echo do_shortcode(
10
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Подробнее</a>'
11
    );
12
}

Функція вішається на той самий хук woocommerce_after_shop_loop_item із дефолтним пріоритетом 10. Вона отримує об’єкт $product через global, бере URL картки товару та виводить посилання з класом button, WooCommerce автоматично підхоплює стилі кнопок з активної теми.

Зверніть увагу на esc_url(), екранування URL обов’язкове для безпеки. Клас addtocartbutton можна замінити на свій, якщо хочете кастомні стилі.

Крок 3: повертаємо кнопку «Додати в кошик» поруч

Кнопка «Додати в кошик» потрібна на сторінці магазину, без неї покупець не покладе товар у кошик напряму. Але тепер вона має йти ПІСЛЯ кнопки «Детальніше». Для цього реєструємо рідний обробник із пріоритетом 20 (після нашої кнопки з пріоритетом 10):

1
/* Возвращаем кнопку Добавить в корзину */
2
add_action( 'after_setup_theme', 'lets_add_cart_button' );
3
function lets_add_cart_button() {
4
    add_action(
5
        'woocommerce_after_shop_loop_item',
6
        'woocommerce_template_loop_add_to_cart',
7
        20
8
    );
9
}

Огортаємо add_action у хук after_setup_theme з тієї ж причини, що й видалення: на момент functions.php WooCommerce може не завантажитися. Пріоритет 20 розміщує «Додати в кошик» строго після «Детальніше» (пріоритет 10).

Результат: під кожним товаром на сторінці магазину, дві кнопки. Спочатку «Детальніше», потім «Додати в кошик».

На відео, альтернативний підхід із додаванням кастомних кнопок на окремі товари та на всю сторінку магазину. Принцип роботи з хуками той самий, що ми розібрали вище.

Що піде не так із товарами не в наявності

Код вище чудово працює для товарів, які є на складі. Але для позицій «не в наявності» виникає конфлікт: WooCommerce автоматично замінює кнопку «Додати в кошик» на «Детальніше» в таких товарів. Виходить ДВІ кнопки «Детальніше» підряд: наша кастомна та заміна від WooCommerce.

Проблема не в логіці коду, так задумано в ядрі WooCommerce. Стандартна функція woocommerce_template_loop_add_to_cart для out-of-stock товарів рендерить посилання «Детальніше» замість кнопки «в кошик». Наша кастомна кнопка «Детальніше» нікуди не зникає, отримуємо дубль.

Крок 4: прибираємо зайву кнопку через jQuery

Найпряміший спосіб прибрати дублювальну кнопку, jQuery. Скрипт знаходить посилання з текстом «Детальніше», яке лежить усередині стандартного span-контейнера WooCommerce, і видаляє його:

1
/* Убираем дублирующую кнопку Подробнее для товаров не в наличии */
2
jQuery( document ).ready( function( $ ) {
3
    $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Подробнее")' ).remove();
4
 
5
    $( 'button.button.woof_reset_search_form' ).on( 'click', function() {
6
        $( 'a.button.product_type_simple.ajax_add_to_cart:contains("Подробнее")' ).remove();
7
    });
8
});

Скрипт робить дві речі. По-перше, під час завантаження сторінки видаляє всі посилання з класом product_type_simple, які містять текст «Детальніше». По-друге, вішає обробник на кнопку скидання фільтрів WooCommerce (woof_reset_search_form), після AJAX-фільтрації DOM оновлюється і дублі з’являються знову.

jQuery-код розмістіть в окремому .js-файлі та підключіть через wp_enqueue_script у functions.php, або вставте в поле «Custom JavaScript» вашої теми чи плагіна на кшталт Simple Custom CSS and JS.

Альтернативний підхід: фільтр замість видалення

Якщо не хочете jQuery, є більш елегантний спосіб, фільтр woocommerce_product_is_in_stock. Він перевіряє наявність товару перед виводом кастомної кнопки:

1
/* Не показываем кнопку Подробнее для отсутствующих товаров */
2
add_action(
3
    'woocommerce_after_shop_loop_item',
4
    'replace_add_to_cart_conditional',
5
    10
6
);
7
function replace_add_to_cart_conditional() {
8
    global $product;
9
 
10
    if ( ! $product->is_in_stock() ) {
11
        return;
12
    }
13
 
14
    $link = $product->get_permalink();
15
    echo do_shortcode(
16
        '<a href="' . esc_url( $link ) . '" class="button addtocartbutton">Подробнее</a>'
17
    );
18
}

Метод $product->is_in_stock() повертає false для товарів не в наявності, наша кнопка просто не виводиться. WooCommerce сам показує свою «Детальніше» для таких товарів. Для товарів у наявності обидві кнопки працюють як задумано. Цей підхід чистіший: жодного JS, менше конфліктів із фільтрами.

Який варіант обрати, залежить від вашого магазину. jQuery універсальніший (працює з будь-якими плагінами фільтрації), PHP-фільтр легший і швидший.

⁉️🤔 Часті запитання

Код не працює, кнопки не з’являються. У чому річ?

Перш за все перевірте, що код вставлено у functions.php ДОЧІРНЬОЇ теми, а не батьківської (батьківська перезапишеться під час оновлення теми). Друге: переконайтеся, що WooCommerce активний та оновлений до останньої версії. Третє: перевірте, чи не перевизначає ваша тема хук woocommerce_after_shop_loop_item, деякі теми повністю замінюють шаблон картки товару, і хуки WooCommerce в ньому не спрацьовують.

Чи можна змінити текст кнопки «Детальніше» на свій?

Так. У функції replace_add_to_cart() замініть рядок 'Подробнее' в атрибутах тега <a> на будь-яку потрібну вам назву, наприклад «Дивитися», «Обрати», «Опис». Текст статичний, на функціональність не впливає.

Чому jQuery-селектор використовує product_type_simple?

Тому що WooCommerce призначає різні класи кнопкам залежно від типу товару: product_type_simple для простих, product_type_variable для варіативних. Якщо в магазині є варіативні товари не в наявності, додайте другий селектор для product_type_variable або використовуйте більш загальний a.button.ajax_add_to_cart.

Чи безпечно вставляти PHP-код у functions.php?

Безпечно за двох умов. Перше: зробіть бекап файлу functions.php перед правками (або використовуйте дочірню тему, тоді оригінал не постраждає). Друге: вставляйте код через FTP/SFTP або адмінку «Зовнішній вигляд → Редактор тем», а не через плагіни-сніпети з автозавантаженням, у разі синтаксичної помилки WordPress піде в білий екран, і відновити файл простіше по FTP.

Кнопки виглядають не як рідні кнопки теми. Як стилізувати?

Клас button у тегу <a> дає базові стилі WooCommerce. Якщо кнопка все одно відрізняється, ваша тема, ймовірно, перевизначає селектори кнопок специфічно (наприклад, .products .button замість просто .button). Скопіюйте CSS-класи рідної кнопки «Додати в кошик» з інспектора браузера та пропишіть їх в атрибуті class кастомного посилання.

Що ставити у 2026 році: код чи плагін?

Вибір між кастомним кодом і плагіном залежить від трьох факторів. Якщо ви правите одну кнопку на сторінці магазину і не хочете плодити плагіни, коду з цієї статті достатньо. Він важить нуль в адмінці, не додає запитів до бази і не ламається під час оновлення WooCommerce (хуки woocommerce_after_shop_loop_item та woocommerce_template_loop_add_to_cart стабільні з версії 3.0).

Якщо ж вам потрібно змінювати поведінку кнопок на різних сторінках або для різних категорій товарів, варто подивитися в бік плагінів: YITH WooCommerce Customize My Account Page дає візуальний редактор кнопок, а WooCommerce Product Add-Ons дозволяє додати кастомні поля перед купівлею.

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