+48 506 130 673 [email protected]

Funkcja „Dodaj do koszyka” z użyciem AJAX to kluczowy element każdego sklepu WooCommerce. Dzięki niej klienci mogą dodawać produkty do koszyka bez przeładowywania strony, co znacząco poprawia komfort zakupów. Gdy ta funkcjonalność przestaje działać, może prowadzić do spadku konwersji i irytacji użytkowników.

W tym artykule przedstawiamy najczęstsze przyczyny problemów z AJAX w WooCommerce oraz sprawdzone metody ich rozwiązania.


Czym jest AJAX i jak działa w WooCommerce?

AJAX (Asynchronous JavaScript and XML) pozwala na komunikację z serwerem bez odświeżania całej strony. W WooCommerce AJAX wykorzystywany jest m.in. do:

  • dodawania produktów do koszyka z poziomu archiwów (np. strony kategorii),

  • aktualizacji koszyka w czasie rzeczywistym,

  • wyświetlania informacji bez przerywania zakupów.


Najczęstsze przyczyny problemów z AJAX „Dodaj do koszyka”

  1. Konflikty wtyczek

  2. Niekompatybilny motyw

  3. Błędy JavaScript w przeglądarce

  4. Problemy z cache (pamięcią podręczną)

  5. Nieaktualne wersje WooCommerce/WordPress

  6. Własny kod zakłócający funkcję AJAX


Krok po kroku: Jak naprawić AJAX „Dodaj do koszyka” w WooCommerce

1. Sprawdź konflikty wtyczek

Rozwiązanie:

  • Dezaktywuj wszystkie wtyczki poza WooCommerce.

  • Sprawdź, czy przycisk AJAX działa.

  • Włączaj wtyczki po jednej i testuj – aż znajdziesz tę, która powoduje problem.


2. Sprawdź kompatybilność motywu

Rozwiązanie:

  • Zmień motyw na domyślny WordPressa (np. Twenty Twenty-One).

  • Jeśli AJAX działa – problem leży w Twoim motywie.

  • Rozważ użycie motywu kompatybilnego z WooCommerce (np. Storefront, Astra).


3. Wyszukaj błędy JavaScript

Rozwiązanie:

  • Otwórz narzędzia deweloperskie (F12) → zakładka „Console”.

  • Sprawdź, czy pojawiają się błędy JavaScript.

  • Zidentyfikuj wtyczkę lub fragment kodu powodujący błąd i go usuń lub popraw.


4. Wyczyść pamięć podręczną (cache)

Rozwiązanie:

  • Wyczyść cache przeglądarki.

  • Wyczyść cache strony (z poziomu wtyczki cache np. WP Rocket).

  • Sprawdź, czy hosting nie korzysta z serwera cache (LiteSpeed, Varnish) – wyczyść go.


5. Zaktualizuj WooCommerce, WordPress i inne wtyczki

Rozwiązanie:

  • Upewnij się, że WordPress i WooCommerce są w najnowszej wersji.

  • Zaktualizuj wszystkie pozostałe wtyczki.


6. Sprawdź konfigurację serwera

Rozwiązanie:

  • PHP: Upewnij się, że działa wersja 7.4 lub wyższa.

  • Limit pamięci: Zwiększ limit w pliku wp-config.php:

define('WP_MEMORY_LIMIT', '256M');
  • Włączone rozszerzenia: cURL i OpenSSL powinny być aktywne.


Zaawansowane rozwiązania

1. Włącz tryb debugowania

Dodaj do pliku wp-config.php:

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

Sprawdź plik /wp-content/debug.log – znajdziesz tam ewentualne błędy związane z AJAX.


2. Sprawdź status WooCommerce

  • Przejdź do WooCommerce → Status

  • Sprawdź, czy są ostrzeżenia lub nieaktualne szablony

  • Zwróć uwagę na sekcję Szablony motywu


3. Przejrzyj logi WooCommerce

  • Przejdź do WooCommerce → Status → Logi

  • Wybierz log dotyczący AJAX / „add_to_cart”

  • Przeanalizuj błędy lub ostrzeżenia


4. Dodaj niestandardowy kod (opcjonalnie)

Przykład – komunikat po dodaniu produktu do koszyka przez AJAX:

add_filter('woocommerce_add_to_cart_fragments', 'custom_add_to_cart_message');
function custom_add_to_cart_message($fragments) {
ob_start(); ?>
<div class="custom-message">Produkt został dodany do koszyka!</div>
<?php
$fragments['.custom-message'] = ob_get_clean();
return $fragments;
}

5. Zoptymalizuj wydajność

  • Wtyczki cache: WP Rocket, W3 Total Cache

  • Optymalizacja obrazów: Smush, EWWW Image Optimizer

  • Czyszczenie bazy danych: WP-Optimize


Przykłady z praktyki

🧑‍💻 Sklep z elektroniką

Po zainstalowaniu nowej wtyczki przestało działać AJAX „Dodaj do koszyka”. Diagnoza konfliktu i wyłączenie problematycznej wtyczki przywróciło pełną funkcjonalność.

👗 Sklep modowy

Brak działania przycisku „Dodaj do koszyka” rozwiązano przez zmianę motywu i aktualizację wszystkich komponentów. Efekt? Zwiększenie konwersji i poprawa UX.

🌿 Sklep zdrowia i wellness

Problemy z wydajnością wpływały na AJAX. Optymalizacja serwera i pamięci PHP + konfiguracja cache przywróciły funkcjonalność i poprawiły szybkość strony.


Podsumowanie

Funkcja AJAX „Dodaj do koszyka” w WooCommerce to nie tylko wygoda, ale również kluczowy czynnik wpływający na sprzedaż i doświadczenie klienta. Gdy przestaje działać:

✅ Sprawdź konflikty wtyczek i motywu
✅ Zaktualizuj wszystko do najnowszych wersji
✅ Skorzystaj z debugowania i zoptymalizuj wydajność

Nie ignoruj problemów z AJAX – mogą kosztować Cię realne pieniądze. Jeśli mimo działań funkcja nadal nie działa, rozważ pomoc eksperta WooCommerce.