Standardna strona sklepu WooCommerce pokazuje pod każdym produktem jeden przycisk „Dodaj do koszyka". Dla większości sklepów to wystarcza. Jeśli jednak sprzedają Państwo produkty, które wymagają zapoznania się przed zakupem, sam przycisk „do koszyka" nie wystarczy. Kupujący chce najpierw otworzyć kartę produktu, przeczytać opis, przejrzeć specyfikację i dopiero stamtąd dodać do koszyka.

Problem w tym, że WooCommerce nie ma wbudowanego ustawienia „dodaj przycisk Więcej szczegółów obok przycisku Dodaj do koszyka". A wtyczki do tego zadania są albo przeładowane zbędną funkcjonalnością, albo konfliktują z szablonem. Pozostaje sprawdzona ścieżka: własny kod w functions.php.

Poniżej znajduje się instrukcja krok po kroku. Otrzymają Państwo dwa przyciski na stronie sklepu: „Więcej szczegółów" (prowadzi do karty produktu) oraz „Dodaj do koszyka" (działa jak zwykle). Rozwiążemy również osobny przypadek dla produktów niedostępnych.

💡 Szybki przegląd:

• Usuwamy standardowy przycisk „Dodaj do koszyka" przez remove_action
• Dodajemy własny przycisk „Więcej szczegółów" z linkiem do karty produktu
• Przywracamy przycisk „Dodaj do koszyka" na nowej pozycji obok „Więcej szczegółów"
• Naprawiamy podwajanie przycisków dla produktów niedostępnych przez jQuery
• Kod wstawiamy do functions.php motywu potomnego, bezpiecznie i bez wtyczek

Jak WooCommerce renderuje przyciski na stronie sklepu

WooCommerce wyświetla przycisk „Dodaj do koszyka" przez hook woocommerce_after_shop_loop_item. Ten hook uruchamia się w karcie każdego produktu wewnątrz pętli WP_Query na stronie sklepu. Za dodanie przycisku odpowiada funkcja woocommerce_template_loop_add_to_cart z priorytetem 10.

Hook jest podpięty do akcji. Aby zmienić zestaw przycisków, pracujemy właśnie z nim: usuwamy standardową funkcję obsługi, dodajemy własne. Żadnych edycji szablonów WooCommerce nie potrzeba, motyw pozostaje gotowy do aktualizacji.

Krok 1: usuwamy standardowy przycisk „Dodaj do koszyka"

Pierwszy krok to zdjęcie funkcji woocommerce_template_loop_add_to_cart z hooka. Kod umieszczamy w functions.php motywu potomnego lub przez wtyczkę 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' );

Opakowujemy remove_action w funkcję i wieszamy ją na hooku init. Bezpośrednie wywołanie remove_action w functions.php nie jest możliwe: w momencie ładowania motywu WooCommerce może jeszcze nie zainicjować swoich hooków. init gwarantuje, że wszystkie akcje są już zarejestrowane.

Po wstawieniu kodu strona sklepu straci przycisk „Dodaj do koszyka". Proszę się nie obawiać, w następnym kroku przywrócimy go, już w parze z „Więcej szczegółów".

Krok 2: dodajemy własny przycisk „Więcej szczegółów"

Przycisk „Więcej szczegółów" to link do karty produktu, ostylowany jak standardowy przycisk WooCommerce. Używamy $product->get_permalink() do pobrania URL oraz do_shortcode do opakowania:

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
}

Funkcja jest wieszana na tym samym hooku woocommerce_after_shop_loop_item z domyślnym priorytetem 10. Pobiera obiekt $product przez global, bierze URL karty produktu i wyświetla link z klasą button, WooCommerce automatycznie przejmuje style przycisków z aktywnego motywu.

Proszę zwrócić uwagę na esc_url(), eskejpowanie URL jest obowiązkowe dla bezpieczeństwa. Klasę addtocartbutton można zastąpić własną, jeśli chcą Państwo niestandardowe style.

Krok 3: przywracamy przycisk „Dodaj do koszyka" obok

Przycisk „Dodaj do koszyka" jest potrzebny na stronie sklepu, bez niego kupujący nie włoży produktu bezpośrednio do koszyka. Ale teraz ma on iść PO przycisku „Więcej szczegółów". W tym celu rejestrujemy natywną funkcję obsługi z priorytetem 20 (po naszym przycisku z priorytetem 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
}

Opakowujemy add_action w hook after_setup_theme z tego samego powodu co usunięcie: w momencie functions.php WooCommerce może nie być załadowane. Priorytet 20 umieszcza „Dodaj do koszyka" ściśle po „Więcej szczegółów" (priorytet 10).

Rezultat: pod każdym produktem na stronie sklepu znajdują się dwa przyciski. Najpierw „Więcej szczegółów", potem „Dodaj do koszyka".

Na wideo alternatywne podejście z dodawaniem własnych przycisków do pojedynczych produktów i na całą stronę sklepu. Zasada pracy z hookami jest taka sama, jak omówiliśmy powyżej.

Co pójdzie nie tak z produktami niedostępnymi

Powyższy kod działa świetnie dla produktów, które są w magazynie. Ale dla pozycji „niedostępny" pojawia się konflikt: WooCommerce automatycznie zastępuje przycisk „Dodaj do koszyka" przyciskiem „Więcej szczegółów" w przypadku takich produktów. Wychodzą DWA przyciski „Więcej szczegółów" pod rząd: nasz własny oraz zamiennik od WooCommerce.

Problem nie leży w logice kodu, tak jest zaprojektowane w jądrze WooCommerce. Standardowa funkcja woocommerce_template_loop_add_to_cart dla produktów out-of-stock renderuje link „Więcej szczegółów" zamiast przycisku „do koszyka". Nasz własny przycisk „Więcej szczegółów" nigdzie nie znika, otrzymujemy duplikat.

Krok 4: usuwamy zbędny przycisk przez jQuery

Najprostszym sposobem na usunięcie duplikującego się przycisku jest jQuery. Skrypt znajduje link z tekstem „Więcej szczegółów", który leży wewnątrz standardowego kontenera span WooCommerce, i usuwa go:

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
});

Skrypt robi dwie rzeczy. Po pierwsze, podczas ładowania strony usuwa wszystkie linki z klasą product_type_simple, które zawierają tekst „Więcej szczegółów". Po drugie, wiesza funkcję obsługi na przycisk resetowania filtrów WooCommerce (woof_reset_search_form), po filtracji AJAX DOM jest aktualizowany i duplikaty pojawiają się ponownie.

Kod jQuery proszę umieścić w osobnym pliku .js i podłączyć przez wp_enqueue_script w functions.php lub wstawić w pole „Custom JavaScript" Państwa motywu czy wtyczki typu Simple Custom CSS and JS.

Alternatywne podejście: filtr zamiast usuwania

Jeśli nie chcą Państwo jQuery, istnieje bardziej elegancki sposób, filtr woocommerce_product_is_in_stock. Sprawdza on dostępność produktu przed wyświetleniem własnego przycisku:

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
}

Metoda $product->is_in_stock() zwraca false dla produktów niedostępnych, nasz przycisk po prostu się nie wyświetla. WooCommerce samo pokazuje swoje „Więcej szczegółów" dla takich produktów. Dla produktów dostępnych oba przyciski działają zgodnie z założeniem. To podejście jest czystsze: zero JS, mniej konfliktów z filtrami.

Który wariant wybrać, zależy od Państwa sklepu. jQuery jest bardziej uniwersalne (działa z dowolnymi wtyczkami filtrującymi), filtr PHP jest lżejszy i szybszy.

⁉️🤔 Często zadawane pytania

Kod nie działa, przyciski się nie pojawiają. O co chodzi?

Przede wszystkim proszę sprawdzić, czy kod został wstawiony do functions.php MOTYWU POTOMNEGO, a nie rodzica (motyw rodzica zostanie nadpisany podczas aktualizacji). Po drugie: proszę upewnić się, że WooCommerce jest aktywne i zaktualizowane do najnowszej wersji. Po trzecie: proszę sprawdzić, czy Państwa motyw nie nadpisuje hooka woocommerce_after_shop_loop_item, niektóre motywy całkowicie zastępują szablon karty produktu i hooki WooCommerce w nim nie działają.

Czy można zmienić tekst przycisku „Więcej szczegółów" na własny?

Tak. W funkcji replace_add_to_cart() proszę zastąpić ciąg 'Подробнее' w atrybutach tagu <a> dowolną potrzebną Państwu nazwą, na przykład „Zobacz", „Wybierz", „Opis". Tekst jest statyczny, nie wpływa na funkcjonalność.

Dlaczego selektor jQuery używa product_type_simple?

Ponieważ WooCommerce przypisuje różne klasy przyciskom w zależności od typu produktu: product_type_simple dla prostych, product_type_variable dla wariantowych. Jeśli w sklepie są niedostępne produkty wariantowe, proszę dodać drugi selektor dla product_type_variable lub użyć bardziej ogólnego a.button.ajax_add_to_cart.

Czy bezpiecznie jest wstawiać kod PHP do functions.php?

Bezpiecznie przy dwóch warunkach. Po pierwsze: proszę zrobić kopię zapasową pliku functions.php przed edycją (lub używać motywu potomnego, wtedy oryginał nie ucierpi). Po drugie: proszę wstawiać kod przez FTP/SFTP lub panel administracyjny „Wygląd → Edytor motywów", a nie przez wtyczki-snippety z autodołączaniem, w przypadku błędu składniowego WordPress przejdzie w biały ekran, a przywrócenie pliku jest prostsze przez FTP.

Przyciski nie wyglądają jak natywne przyciski motywu. Jak je ostylować?

Klasa button w tagu <a> daje podstawowe style WooCommerce. Jeśli przycisk i tak się różni, Państwa motyw prawdopodobnie nadpisuje selektory przycisków specyficznie (na przykład .products .button zamiast po prostu .button). Proszę skopiować klasy CSS natywnego przycisku „Dodaj do koszyka" z inspektora przeglądarki i wpisać je w atrybucie class własnego linku.

Co stosować w 2026 roku: kod czy wtyczkę?

Wybór między własnym kodem a wtyczką zależy od trzech czynników. Jeśli edytują Państwo jeden przycisk na stronie sklepu i nie chcą mnożyć wtyczek, kod z tego artykułu jest wystarczający. Waży zero w panelu administracyjnym, nie dodaje zapytań do bazy i nie psuje się podczas aktualizacji WooCommerce (hooki woocommerce_after_shop_loop_item oraz woocommerce_template_loop_add_to_cart są stabilne od wersji 3.0).

Jeśli jednak potrzebują Państwo zmieniać zachowanie przycisków na różnych stronach lub dla różnych kategorii produktów, warto spojrzeć w stronę wtyczek: YITH WooCommerce Customize My Account Page daje wizualny edytor przycisków, a WooCommerce Product Add-Ons pozwala dodać niestandardowe pola przed zakupem.

Proszę zacząć od kodu. Jest darmowy, przejrzysty i w pełni kontrolowany przez Państwa. A jeśli będzie potrzebne więcej, proszę przejść do wtyczek, już rozumiejąc, które dokładnie funkcje są potrzebne.