Skip to content

Wszystko o WordPressie, tworzeniu stron — i nie tylko

🔧 Jak naprawić brak przycisku "Dodaj do koszyka" w WooCommerce

🔧 Jak naprawić brak przycisku "Dodaj do koszyka" w WooCommerce

Dlaczego przycisk „Dodaj do koszyka" znika z produktów WooCommerce

Skonfigurował(a) Pan/Pani sklep, dodał(a) kilkanaście produktów, ale wchodzi Pan/Pani na stronę, a zamiast przycisku „Dodaj do koszyka" widnieje pustka. Klient nie może kupić. Panika. Problem jest jednak prostszy do rozwiązania, niż się na pierwszy rzut oka wydaje.

Przyczyn znikania przycisku jest dokładnie pięć: od nieuzupełnionej karty produktu po serwerowy mod_security. Dwie z nich rozwiązuje się dwoma kliknięciami. Kolejne dwie, kilkoma linijkami kodu. I tylko jedna wymaga telefonu do hostingu. Poniżej, analiza krok po kroku z kodem, zrzutami ekranu i konkretnymi działaniami.

💡 Szybki przegląd:

  • Najpierw proszę sprawdzić kartę produktu, cena i dostępność są obowiązkowe
  • Proszę wyłączyć wszystkie wtyczki razem i włączyć tylko WooCommerce, jeśli przycisk się pojawi, winny jest konflikt
  • Proszę wejść do konfiguratora motywu, być może przycisk został po prostu ukryty przełącznikiem
  • Proszę poprawić szablon motywu przez edytor kodu, zamiana trzech linii w single.php
  • Proszę otworzyć konsolę przeglądarki: błąd JavaScript → proszę zadzwonić do hostingu, problem leży w mod_security

1. Proszę sprawdzić kartę produktu, cenę i dostępność

WooCommerce pokazuje przycisk „Dodaj do koszyka" tylko wtedy, gdy produkt można kupić. Nie można kupić, nie ma przycisku. Logika jest prosta.

Proszę otworzyć Produkty → Wszystkie produkty → wybrać problemowy → Edytuj. W bloku „Dane produktu" proszę sprawdzić trzy pola:

  • Cena, cena regularna jest obowiązkowa, nawet jeśli produkt jest przeceniony. Pole „Cena" nie może być puste.
  • Dostępność, status „W magazynie" lub „Dostępny w przedsprzedaży". Wartość „Brak w magazynie" ukrywa przycisk.
  • Produkty wariantowe, każdy wariant musi mieć własną cenę i status dostępności.

Częsty błąd: utworzono produkt wariantowy, dodano atrybuty, kolor, rozmiar, ale nie wpisano ceny dla konkretnych wariantów. WooCommerce w tym przypadku nie wie, po jakiej cenie sprzedawać, i po prostu nie pokazuje przycisku.

Uzupełniono → Zaktualizuj → otworzyć stronę produktu w witrynie. W większości prostych przypadków problem jest rozwiązany już na tym etapie.

2. Proszę znaleźć konflikt wtyczek

WordPress składa kod z aktywnego motywu i wszystkich aktywnych wtyczek. Jeśli dwie wtyczki używają tych samych nazw funkcji, przechwytują te same hooki lub są po prostu niekompatybilne, WooCommerce może stracić przycisk.

Kolejność diagnostyki:

  • Proszę przejść do Wtyczki → Zainstalowane. Zaznaczyć wszystkie (checkbox na górze), z rozwijanego menu „Działania" wybrać „Dezaktywuj" → Zastosuj.
  • Proszę włączyć tylko WooCommerce. Otworzyć stronę problemowego produktu.
  • Przycisk się pojawił, konflikt potwierdzony. Proszę włączać wtyczki pojedynczo, po każdej sprawdzać stronę produktu. Wtyczka, po aktywacji której przycisk ponownie zniknął, jest winowajcą.
  • Proszę zastąpić problematyczną wtyczkę odpowiednikiem lub skontaktować się z jej twórcą.

Odrębnym podtypem tego problemu jest konflikt z filtrem woocommerce_show_variation_price. Niektóre motywy i wtyczki zwracają false dla tego hooka, WooCommerce ukrywa cenę wariantu i traci przycisk. Jeśli po wyłączeniu wszystkich wtyczek przycisk jest na miejscu, a widocznego „winowajcy" nie ma, proszę sprawdzić functions.php aktywnego motywu pod kątem linii z woocommerce_show_variation_price.

Wymusić wyświetlanie można filtrem:

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

Proszę wstawić ten kod do functions.php aktywnego (potomnego) motywu lub przez wtyczkę Code Snippets. Po zapisaniu proszę sprawdzić produkt.

Dodawanie filtra PHP przez edytor kodu WordPress

3. Konfigurator motywu, niewidoczny przełącznik

Niektóre motywy dodają własny przełącznik widoczności przycisku. Logika twórców: „dajmy użytkownikowi elastyczność". W praktyce przełącznik domyślnie jest w pozycji „ukryj", a właściciel sklepu o tym nie wie.

Proszę wejść w Wygląd → Dostosuj. Proszę poszukać sekcji:

  • WooCommerce → Product Page (lub Zawartość → WooCommerce, zależy od motywu);
  • Parametr „Add to Cart Button" / „Przycisk dodawania do koszyka" → Visible (lub „Pokaż").

Proszę zapisać ustawienia i sprawdzić produkt. Działa dla motywów, które używają sekcji customizera WooCommerce na wierzchu standardowego szablonu, popularne w motywach z ThemeForest: Avada, Flatsome, WoodMart.

4. Proszę poprawić szablon motywu w edytorze

Jeśli poprzednie kroki nie dały rezultatu, problem jest głębszy: motyw używa niestandardowego szablonu strony produktu i nie wywołuje funkcji WooCommerce do wyświetlania przycisku.

Co się dzieje. WordPress ładuje stronę produktu przez plik motywu single.php (lub index.php jako fallback). Wewnątrz znajduje się wywołanie get_template_part(), które dołącza blok treści. Motyw powinien przekazać sterowanie do WooCommerce, wywołać wc_get_template_part('content', 'single-product'), ale niektóre motywy tego nie robią. Rezultat: układ motywu jest, przycisku nie ma.

Jak poprawić:

  • Wygląd → Edytor plików motywu. Proszę potwierdzić ostrzeżenie WordPress.
  • W prawej kolumnie proszę znaleźć pliki single.php i index.php:
Lista plików motywu w edytorze kodu WordPress
  • Proszę otworzyć single.php (jeśli istnieje). Jeśli nie, index.php.
  • Proszę znaleźć linię z get_template_part. Proszę zastąpić cały blok wyświetlania treści na:
1if (is_singular('product')) {
2 wc_get_template_part('content', 'single-product');
3} else {
4 wc_get_template_part('content', get_post_format());
5}
  • Proszę zapisać plik.
Końcowy kod szablonu produktu z wywołaniem WooCommerce

Przed edycją proszę zrobić backup pliku motywu. Proszę skopiować zawartość do notatnika lub użyć motywu potomnego, bezpośrednia edycja motywu nadrzędnego zostanie nadpisana podczas następnej aktualizacji.

Po zapisaniu proszę otworzyć stronę produktu. Przycisk powinien się pojawić.

5. Problem serwerowy, mod_security tnie skrypty

Jeśli dotarł(a) Pan/Pani tutaj, a przycisku wciąż nie ma, przyczyna najprawdopodobniej leży po stronie serwera. Moduł mod_security (zapora sieciowa Apache/LiteSpeed) blokuje ładowanie plików JavaScript WooCommerce. Bez JavaScript koszyk nie działa.

Diagnostyka:

  • Proszę otworzyć stronę problemowego produktu.
  • Proszę nacisnąć F12 → zakładka Console (Konsola).
  • Proszę szukać błędu ładowania skryptu WooCommerce, zazwyczaj cart.min.js, add-to-cart.min.js lub jquery.blockUI.min.js z kodem 403 Forbidden.
  • Zobaczył(a) Pan/Pani, problem leży w mod_security.

Rozwiązanie: proszę skontaktować się z dostawcą hostingu i poprosić o dodanie wyjątku dla ścieżki URL /wp-content/plugins/woocommerce/ w regułach mod_security. Dział techniczny robi to w kilka minut.

Alternatywnie, proszę wyłączyć mod_security dla domeny przez .htaccess (jeśli hosting na to pozwala):

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

Ale lepiej uzgodnić to z hostingodawcą: na hostingach współdzielonych mod_security chroni cały serwer, a jego wyłączenie stwarza ryzyko dla bezpieczeństwa.

Tabela zbiorcza: co sprawdzać

Problem

Symptom

Czas na poprawkę

Karta produktu nieuzupełniona

Brak przycisku u konkretnego produktu

2 min

Konflikt wtyczek

Przycisk zniknął po instalacji nowej wtyczki

5-15 min

Konfigurator motywu

Brak przycisku na wszystkich produktach, motyw z ThemeForest

1 min

Kod szablonu

Brak przycisku, motyw niestandardowy lub mało znany

5 min

mod_security

Błąd JS w konsoli (403)

Telefon do hostingodawcy

Szczegółowy wideoporadnik wszystkich pięciu kroków, od karty produktu po edycję szablonu i diagnostykę serwerową.

⁉️🤔 Często zadawane pytania

Przycisk zniknął tylko w produktach wariantowych, o co chodzi?

Prawie na pewno nie są uzupełnione ceny wariantów. Proszę otworzyć produkt, zakładka „Warianty", rozwinąć każdy, pole „Cena" musi być wypełnione. Pusta cena wariantu oznacza, że WooCommerce uznaje produkt za „nie na sprzedaż" i usuwa przycisk. Dla 50 i więcej wariantów proszę użyć importu CSV: Produkty → Import.

Po aktualizacji motywu przycisk zniknął, co robić?

Aktualizacja motywu nadpisała single.php. Proszę przywrócić poprawkę z kroku 4. Aby nie powtarzać tego przy każdej aktualizacji, proszę przenieść szablon do motywu potomnego: utworzyć folder /woocommerce/ w motywie potomnym i skopiować tam poprawiony single-product.php.

Czy można przywrócić przycisk bez edycji kodu?

Tak, w połowie przypadków: proszę sprawdzić kartę produktu (krok 1) i konfigurator motywu (krok 3). Kod jest potrzebny tylko wtedy, gdy motyw niestandardowo wyświetla szablon produktu lub gdy wtyczka czy motyw wyciszają hook woocommerce_show_variation_price.

Przycisk jest, ale nie działa, klika się i nic się nie dzieje?

To błąd JavaScript. Proszę otworzyć konsolę przeglądarki (F12) i sprawdzić, które skrypty padają. Najczęściej, konflikt wersji jQuery (motyw podłącza starą jQuery na wierzch standardowej WordPress) lub zbuforowany zminifikowany JS nie zaktualizował się. Proszę wyczyścić cache wtyczki buforującej i przegenerować zminifikowane skrypty.

Czy trzeba wyłączać dodawanie AJAX do koszyka?

Tylko do diagnostyki. Proszę wejść w WooCommerce → Ustawienia → Produkty i odznaczyć „Włącz dodawanie AJAX do koszyka". Jeśli po tym przycisk się pojawił, problem leży w obsłudze AJAX konkretnego motywu. Proszę pozostawić AJAX wyłączony lub zmienić motyw.

Co robić, jeśli przycisk jednak się nie pojawił

Pięć powyższych kroków rozwiązuje zdecydowaną większość przypadków znikania przycisku „Dodaj do koszyka". Jeśli żaden nie zadziałał, problem jest głębszy i wymaga ręcznego debugowania.

Szybka checklista ostatniej szansy:

  • Proszę zmienić motyw na Storefront, oficjalny motyw WooCommerce. Przycisk się pojawił? Problem leży w Pana/Pani motywie.
  • Proszę sprawdzić WooCommerce → Status → Zaplanowane działania, czy nie ma zawieszonych zadań cron.
  • Proszę wejść w WooCommerce → Status → Logi i poszukać fatal-errors z ostatnich dni.

Nie pomogło, proszę opisać sytuację w komentarzach: wersja WooCommerce, nazwa motywu, lista aktywnych wtyczek. Znajdziemy przyczynę.