Стандартная страница магазина 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 позволяет добавить кастомные поля перед покупкой.

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