Przejdź do treści
PUSTY-KOSZYK-ELEMENTORA-WOOCOMMERCE

Elementor nie ładuje koszyka Woocommerce – Rozwiązanie

Spis treści

Wiele sklepów internetowych korzystających z WooCommerce i Elementora napotkało problem z odświeżaniem koszyka, zwłaszcza po dodaniu produktów do koszyka przez AJAX. Ten problem może objawiać się tym, że po dodaniu produktu do koszyka, zawartość koszyka (np. liczba produktów, podsumowanie) nie jest odświeżana poprawnie, szczególnie wtedy, gdy użytkownicy są zalogowani. Problem ten może wynikać z mechanizmów cache’owania, które blokują dynamiczne odświeżenie koszyka w zależności od stanu sesji użytkownika.

Problem z Odświeżaniem Koszyka w Elementorze i WooCommerce – Nadal nierozwiązany od lat

Mimo że Elementor i WooCommerce są jednymi z najpopularniejszych narzędzi do tworzenia sklepów internetowych, problem z odświeżaniem koszyka po dodaniu produktów przez AJAX wciąż pozostaje nierozwiązany. Chociaż z biegiem lat pojawiły się nowe wersje zarówno Elementora, jak i WooCommerce, problem ten nie został w pełni załatany, a użytkownicy nadal napotykają trudności z prawidłowym działaniem koszyka, zwłaszcza gdy są zalogowani.

Problem pustego koszyka Elementora mini-cart:

Kiedy użytkownicy są zalogowani, fragmenty koszyka (np. liczba produktów w koszyku) mogą nie być odświeżane dynamicznie po dodaniu nowych produktów. Jednakże, w trybie incognito, wszystko działa poprawnie. Często jest to wynikiem:

  • Cache’owania stron koszyka lub checkout, które mogą powodować, że WooCommerce nie odświeża koszyka po każdej akcji AJAX.
  • Brak załadowania odpowiednich skryptów, które są wymagane do dynamicznego odświeżenia koszyka.

Rozwiązanie problemy z pustym koszykiem Elementora:

Aby rozwiązać ten problem, potrzebujemy załadować odpowiedni skrypt WooCommerce do odświeżania koszyka oraz upewnić się, że koszyk i checkout nie są cache’owane dla zalogowanych użytkowników. Poniżej przedstawiamy pełne rozwiązanie w postaci kodu PHP oraz JavaScript, które możesz dodać do swojego motywu lub za pomocą wtyczki Code Snippets.

// Załaduj skrypt do odświeżania fragmentów koszyka (wc-cart-fragments)
add_action( 'wp_enqueue_scripts', 'enqueue_wc_cart_fragments_script' );
function enqueue_wc_cart_fragments_script() {
    // Załaduj skrypt wc-cart-fragments na każdej stronie, jeśli chcesz, aby koszyk działał wszędzie
    if ( is_cart() || is_checkout() || is_product() || is_shop() ) {
        wp_enqueue_script( 'wc-cart-fragments' );
    }
}

// Funkcja AJAX do odświeżania fragmentów koszyka (w przypadku dodawania do koszyka przez AJAX)
add_action( 'wp_ajax_update_cart_fragments', 'update_cart_fragments' );
add_action( 'wp_ajax_nopriv_update_cart_fragments', 'update_cart_fragments' );

function update_cart_fragments() {
    // Używamy metody WooCommerce do odświeżania fragmentów koszyka
    WC_AJAX::get_refreshed_fragments();
    wp_die(); // Koniec działania po wywołaniu AJAX
}

// Zapewniamy wsparcie dla odświeżania koszyka po dodaniu elementów do koszyka za pomocą AJAX w Elementorze
add_action( 'wp_footer', 'add_cart_fragments_script', 999 );
function add_cart_fragments_script() {
    ?>
    <script type="text/javascript">
    jQuery(function($){
        // Skrypt do aktualizacji koszyka po dodaniu elementu
        $('body').on('added_to_cart', function(){
            // Wywołaj AJAX, aby odświeżyć fragmenty koszyka
            $.ajax({
                url: wc_cart_fragments_params.wc_ajax_url.toString().replace( '%%endpoint%%', 'get_refreshed_fragments' ),
                type: 'GET',
                success: function( response ) {
                    var fragments = response.fragments;
                    if (fragments) {
                        // Iterujemy po fragmentach i aktualizujemy je na stronie
                        $.each(fragments, function(key, value) {
                            $(key).replaceWith(value);
                        });
                    }
                }
            });
        });
    });
    </script>
    <?php
}

// Dodanie do sesji, by WooCommerce nie cache'ował fragmentów koszyka dla użytkowników zalogowanych
add_filter( 'woocommerce_is_cart_fragments_supported', '__return_true' );

// Dodatkowe: wykluczenie koszyka z cache'owania (jeśli używasz wtyczki cache'ującej)
add_action( 'init', 'exclude_cart_from_cache', 1 );
function exclude_cart_from_cache() {
    if ( is_cart() || is_checkout() ) {
        // Ustawienie nagłówków, które wykluczą stronę koszyka z cache'owania
        header( 'Cache-Control: no-cache, no-store, must-revalidate' );
        header( 'Pragma: no-cache' );
        header( 'Expires: 0' );
    }
}

Wyjaśnienie kodu:

  1. Załadowanie skryptu wc-cart-fragments:
    • Ten skrypt WooCommerce jest odpowiedzialny za odświeżanie fragmentów koszyka, takich jak liczba produktów i podsumowanie koszyka. W tym przypadku ładowany jest on na stronach takich jak koszyk, checkout, produkty oraz strona sklepu.
  2. Funkcja AJAX update_cart_fragments:
    • Po dodaniu produktu do koszyka przez AJAX, ta funkcja uruchamia metodę WooCommerce WC_AJAX::get_refreshed_fragments(), która odświeża zawartość koszyka. Funkcja ta działa zarówno dla użytkowników zalogowanych, jak i niezalogowanych.
  3. Skrypt JavaScript do odświeżania koszyka:
    • Skrypt ten nasłuchuje zdarzenie added_to_cart i po jego wywołaniu wykonuje żądanie AJAX do serwera, aby zaktualizować fragmenty koszyka bez przeładowywania strony.
  4. Wykluczenie cache’owania koszyka:
    • Strona koszyka oraz checkout są wykluczone z cache’owania, aby zapewnić, że zawartość koszyka zawsze będzie aktualna, szczególnie dla użytkowników zalogowanych. Dzięki temu WooCommerce nie będzie próbował wyświetlać zcache’owanej wersji koszyka, a wszystkie zmiany będą natychmiastowo widoczne.

Dlaczego to działa?

WooCommerce używa fragmentów koszyka (cart fragments), które są odświeżane po każdej akcji AJAX, aby dynamicznie zaktualizować koszyk na stronie. Działa to szczególnie w przypadku Elementor, gdzie produkty są dodawane do koszyka bez przeładowania strony. Dzięki powyższemu kodowi, problem z odświeżaniem koszyka, zwłaszcza w przypadku użytkowników zalogowanych, zostaje rozwiązany.

Dodatkowo, cache’owanie może powodować, że WooCommerce wyświetla zaktualizowaną zawartość koszyka tylko dla użytkowników w trybie incognito, a nie dla tych, którzy są zalogowani. Wykluczenie koszyka z cache’owania rozwiązuje ten problem, zapewniając, że zawartość koszyka będzie zawsze aktualna.

Pamiętaj że ten kod może nie dotyczyć Twojego problemu, przyczyna w Twojej instalacji WordPress może wynikać z zupełnie innego powodu, może to być konflikt wtyczki lub kodu PHP lub JavaScript.

Tagi:

1 komentarz do “Elementor nie ładuje koszyka Woocommerce – Rozwiązanie”

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Oferta wykonania sklepu internetowego

Serdecznie zapraszamy do zapoznania się z zakresem oferty stworzenia sklepu internetowego.

Standardowe funkcjonalności

  • Prosty i przejrzysty wygląd sklepu internetowego (UX) + dostosowanie, kolorystyczne pod kolory firmowe (branding),
  • Sklep internetowy dostosowany do urządzeń mobilnych,
  • System zarządzania treścią Wordpress,
  • Łatwy edytor wizualny drag&drop dla podstron i bloga,
  • Blog,
  • Newsletter we wszystkich formularzach,
  • Google Maps z lokalizacją firmy,
  • Przyciski akcji telefon lub e-mail,
  • Slider na stronie głównej,
  • Łatwa zmiana opisów stron oraz słów kluczowych,
  • Możliwosć ustawienia zdjęcia og:image dla socialmedia dla każdej podstrony,
  • Sekcja z referencjami klientów.

Funkcjonalności sklepu internetowego (front)

  • Podstrony – Strona główna, najnowsze produkty, najlepiej sprzedawane, promocje, moje konto
  • Filtr produktów – standardowe filtrowanie produktów po kategorii produktu w techonologii Ajax,
  • Koszyk Ajax – dodawanie produktów oraz sumowanie koszyka bez przeładowania strony
  • Odliczanie do darmowej dostawy – forma dymku z kwotą jaka pozostała do darmowej dostawy
  • Koszyk – prosty i przejrzysty, pozwoli szybko przejść do formularza zamówienia,
  • Formularz zamówienia – stworzony w przejrzystym układzie pozwoli bezbłędnie uzupełnić wymagane dane osobowe oraz wybrać na tej samej stronie formę płatności,
  • Wybór formy dostawy – dostawca, pobranie,
  • Wybór formy płatności – na podstawie wdrożonej bramki płatności lub przelew tradycyjny,
  • Podsumowanie zamówienia – po dodkonanej płatności klient zostanie przekierowany do szczegółów zamówienia,
  • Dodatkowe pola – Możliwość zmiany kolejności pól formularza zamówienia oraz dodanie niestandardowych pól zbierających informację,
  • Komentarze – możliwość komentowania i oceniania produktów przez klientów,

Funkcjonalności sklepu internetowego (Zaplecze)

  • Tworzenie produktów – sprowadza się do uzupełnienia jednej podstrony produktu,
  • Tworzenie kategorii produktów – pozwala utworzyć kategorie produktów, które później klient może filtrować na stronie sklepu, 
  • Atrybuty produktów – możliwość dodania np. koloru produktu lub rozmiaru produktu,
  • Warianty produktów – możliwość ustalenie ceny produktu na podstawie atrybutu np. rozmiaru,
  • Sprzedaż produktów elektornicznych – np. sprzedaż e-booka i natychmiastowy dostęp do pliku po zakupie,
  • Statystyki sprzedaży – przedział dat, suma sprzedaży, sprzedaż netto, zamówienia, sprzedane produkty, wykresy, ranking najlepiej sprzedawanych produktów, przychody,
  • Ustawienia kuponów zniżkowych – ustal zniżkę na różnych zasadach,
  • Ustawienia podatków – możliwość dodania stawki podatku do produktów lub sprzedaż bez ustawień podatków,
  • Stany magazynowe – możliwość wprowadzenia ilości sztuk jakie mamy na stanie, stany są zmieniane po zakupie lub anulowaniu zamówienia,
  • Lista klientów – lista wszystkich klientów, którzy kupili produkty w sklepie,
  • 1 waluta sklepu – oferta obejmuje dodanie jednej waluty sklepu,
  • Feed produktowy – z produktami i ich wariantami. Wymagane do kampanii reklamowej na Facebook, Instagram, Google oraz innych korzystających z pliku .xml,
  • Automatycznie wysyłane powiadomienia e-mail – klient jak również administrator sklepu jest informowany o transakcjach.

  • Wdrożenie dostawcy – pozwala wysyłać dane o zamówieniu do firmy kurierskiej oraz generować listy przewozowe,
  • Wdrożenie bramki płatności – pozwala rozliczać się z klientem online, pieniądze automatycznie trafiają do operatora bramki gdzie można wypłacić je na konto firmowe,

Dokumenty dla sklepu internetowego

  • Standardowy regulamin sklepu internetowego dla produktów fizycznych,
  • Treść dla postrony Zwroty i Wymiana,
  • Treść dla podstrony Reklamacje,
  • Polityka prywatności (podstrona, formularze, dymek akceptacji).

Optymalizacja SEO

  • Hierarchia nagłówków H1, H2, H3 itd.,
  • Optymalizacja prędkości ładowania strony internetowej,
  • Wybór właściwych słów kluczowych,
  • Optymalizacje meta titles oraz meta descriptions,
  • Nazwanie obrazów na stronie – title, alt,
  • Wdrożenie strony internetowej do Google Search Console (indeksowanie),
  • Wdrożenie narzędzia pomiaru ruchu na stronie internetowej Google Analitics,
  • Stworznie mapy witryny,
  • Na życzenie wdrożenie kodu Facebook Pixel,

Zabezpieczenia

  • Wykonywana oraz przechowywana 14 dni kopia strony internetowej (pliki i baza danych),
  • Blokada logowania do zaplecza po 3 nieudanych próbach,
  • Możliwość logowania do zaplecza z wybranego IP,
  • Na życzenie logowanie dwuskładnikowe – Google Authenticator lub adres e-mail,
  • Zabezpieczenie przed malware i brute force,
  • Zabezpieczenie przed spamem w formularzach kontaktowych,
  • Zabezpieczenie przed zainfekowaniem innych aplikacji na serwerze (separacja),
  • Certyfikat SSL,

DOMENA

Zapewniamy doradztwo z zakresie zakupu domeny, dobra domena zapewnia również lepsze rezultaty w trakcie pozycjonowania strony internetowej. 

Zachęcamy do zakupu domeny jak również miejsca hostingowego w firmie lh.pl.

* Cena domeny .PL na pierwszy rok jest wliczona w cenę stworznie sklepu internetowego.

HOSTING

Naszym klientom polecamy hosting lh.pl ze względu na ich optymalizację pod system Wordpress, strony działają szybko i niezawodnie.

Wybrany pakiet – Mango

  • 30GB miejsca na dysku SSD/NVME,
  • Darmowe testy przez 14 dni,
  • Darmowy certyfikat SSL
  • Transfer bez limitów,
  • Dowolna liczba stron i skrzynek e-mail,,
  • SSH,

Pełna oferta hostingowa – tutaj.

POCZTA E-MAIL

W zakresie oferty jesteśmy w stanie stworzyć dowolną ilość skrzynek e-mail na życzenie klienta. Dodatkowo możemy połączyć skrzynkę e-mail Google Gmail w celu łatwej obsługi skrzynki. To rozwiązanie pozwoli Ci posiadać sprawdzoną aplikację na każdym urządzeniu Android czy iOS bez potrzeby instalacji dodatkowych aplikacji. Konto może zostać połączone również z dowolnym programem np. Mozilla Thunderbird.

Wsparcie techniczne i tutoriale

Nasze strony internetowe są objętę 24 miesięcznym wsparciem technicznym w przypadku awarii naprawiamy stronę najszybciej jak się da. Na życzenie przygotujemy tutoriale wideo bezpośrednio z rzutem na Twoją stroną internetową – odpowiadamy na każde pytanie ponieważ chcemy, abyś rozumiał jak obsługiwać w łatwy sposób swój własny sklep internetowy.

Dodatkowe opłaty?

Cena wskazana w ofercie jest ceną jednorazową za wykonanie podstawowego sklepu internetowego. Nie pobieramy dodatkowych opłat w formie abonamentu, oczwiście jeżeli będą Państwo chcieli rozwinąć stronę o nowe funkcjonalności to zostanie to stosowanie wycenione po ustalenie szczegółów.

Utrzymanie sklepu (rocznie):

Cena domeny po roku: 110.00 zł brutto

Cena hostingu po roku: 295.20 zł brutto 

*ceny ulegają zmianom! Aktualną listę znajdziesz na lh.pl.

Oferta wykonania strony internetowej

Serdecznie zapraszamy do zapoznania się z zakresem oferty stworzenia strony internetowej – firmowej wizytówki.

Funkcjonalności strony internetowej

  • Prosty i przejrzysty wygląd strony  internetowej (UX) + dostosowanie, kolorystyczne pod kolory firmowe (branding),
  • Strona internetowa dostosowana do urządzeń mobilnych
  • System zarządzania treścią Wordpress,
  • Łatwy edytor wizualny drag&drop,
  • Blog,
  • Newsletter,
  • Galeria zdjęć,
  • Podstrony chronione hasłem,
  • Google Maps z lokalizacją firmy,
  • Przyciski akcji telefon lub e-mail,
  • Slider na stronie głównej
  • Łatwa zmiana opisów stron oraz słów kluczowych
  • Możliwość ustawienia zdjęcia og:image dla socialmedia dla każdej podstrony
  • Strona internetowa do 7 podstron

Optymalizacja SEO

  • Hierarchia nagłówków H1, H2, H3 itd.,
  • Optymalizacja prędkości ładowania strony internetowej,
  • Wybór właściwych słów kluczowych,
  • Optymalizacje meta titles oraz meta descriptions,
  • Nazwanie obrazów na stronie – title, alt,
  • Wdrożenie strony internetowej do Google Search Console (indeksowanie),
  • Wdrożenie narzędzia pomiaru ruchu na stronie internetowej Google Analitics,
  • Stworzenie mapy witryny – plik xml,
  • Na życzenie wdrożenie kodu Facebook Pixel,

Zabezpieczenia

  • Wykonywana oraz przechowywana 14 dni kopia strony internetowej (pliki i baza danych),
  • Blokada logowania do zaplecza po 3 nieudanych próbach,
  • Możliwość logowania do zaplecza z wybranego IP,
  • Na życzenie logowanie dwuskładnikowe – Google Authenticator lub adres e-mail,
  • Zabezpieczenie przed malware i brute force,
  • Zabezpieczenie przed spamem w formularzach kontaktowych,
  • Zabezpieczenie przed zainfekowaniem innych aplikacji na serwerze (separacja),
  • Certyfikat SSL,

DOMENA

Zapewniam doradztwo z zakresie zakupu domeny, dobra domena zapewnia również lepsze rezultaty w trakcie pozycjonowania strony internetowej. 

Zachęcam do zakupu domeny jak również miejsca hostingowego w firmie hostingowej lh.pl.

* Cena domeny .PL na pierwszy rok jest wliczona w cenę stworzenie strony internetowej.

HOSTING

Moim klientom polecam hosting lh.pl ze względu na ich optymalizację pod system Wordpress, strony działają szybko i niezawodnie.

Wybrany pakiet – Kiwi

  • 10GB miejsca na dysku SSD/NVME,
  • Darmowe testy przez 14 dni ,
  • Darmowy certyfikat SSL
  • Transfer bez limitów,
  • Dowolna liczba stron i skrzynek e-mail,,
  • SSH,

Pełna oferta hostingowa – tutaj.

POCZTA E-MAIL

W zakresie oferty znajduje się stworzenie dowolnej ilości skrzynek e-mail. Dodatkowo możemy połączyć pocztę z kontem w Google Gmail w celu łatwej obsługi przez ogólnie dostępną aplikację na iOS i Android. 

Wsparcie techniczne i tutoriale

Strony internetowe objęte są 24 miesięcznym wsparciem technicznym w przypadku awarii naprawiamy stronę najszybciej jak się da. Na życzenie przygotujemy Tutoriale wideo bezpośrednio z rzutem na Twoją stroną internetową – odpowiadamy na każde pytanie ponieważ chcemy, abyś rozumiał jak edytować każdą cześć strony internetowej. 

Dodatkowe opłaty?

Cena wskazana w ofercie jest ceną jednorazową za wykonanie strony internetowej. Nie pobieramy dodatkowych opłat w formie abonamentu, oczwiście jeżeli będą Państwo chcieli rozwinąć stronę o nowe funkcjonalności to zostanie to stosowanie wycenione po ustalenie szczegółów.

Utrzymanie hostingu:

Cena domeny po roku: 110zł brutto

Cena hostingu po roku: 104.50 brutto 

*ceny ulegają zmianom! Aktualną listę znajdziesz na lh.pl.