Niektóre sklepy internetowe oparte na WooCommerce potrafią po kliknięciu w przycisk “Złóż zamówienie” na chwilę przystanąć i sprawić wrażenie jakby się zawiesiły. W rzeczywistości czekają na odpowiedź pośrednika płatności z potwierdzeniem, że płatność kartą kredytową lub BLIKIEM na stronie sklepu przebiegła pomyślnie (lub nie). Komunikacja między serwerami potrafi trwać czasem od kilku do nawet kilkunastu sekund. W tym czasie klient sklepu może być zdezorientowany brakiem reakcji. W stresie, może próbować odświeżyć stronę i przerwać całą operację. Aby temu zapobiec, warto dodać wizualny element sygnalizujący ładowanie się strony. Zatem jak dodać spinner w WooCommerce? Zapraszam do krótkiego artykułu.

Jak dodać spinner do WooCommerce

Jeśli obserwujesz podobne zjawisko we własnym sklepie, to prawdopodobnie jest to “wina” używanego motywu. A w zasadzie czystego WooCommerce, który z natury po prostu nakłada na sklep taką mleczną warstwę w oczekiwaniu na odpowiedź pośrednika płatności. Brak elementu sygnalizującego ładowanie się strony, zwanego spinnerm można jednak łatwo naprawić. Jeśli autor motywu nie pomyślał o spinnerze to dodaj go sam. Wyeliminujesz dezorientację klientów, którzy mogą się wystraszyć i przerwać zakupy.

Krok 1

Wybierz swój ulubiony spinner z jednej z poniższych stron lub poszukaj w Internecie. Ważne, żeby spinner był animacją zapisaną w pliku GIF. Pod drugim linkiem, możesz stworzyć spinner we własnych kolorach i rozmiarach. Musisz jedynie założyć sobie darmowe konto, aby móc go pobrać.

• https://icons8.com/preloaders/
• https://loading.io/

Krok 2

Pobierz spinner na dysk komputera.

Krok 3

Zaloguj się do zaplecza WordPress, przejdź do biblioteki mediów i wgraj swój plik.

Krok 4

Skopiuj gdzieś na bok adres do wgranego właśnie pliku, przyda Ci się za chwilę.

Krok 5

Przejdź w menu WordPress do zakładki Wygląd -> Dostosuj -> Własny CSS*.

Krok 6

Wklej poniższy styl CSS.

/* Spinner na stronie zamówienia */
.woocommerce-checkout.processing .blockUI.blockOverlay {
	background-image:url('SCIEZKA_DO_PLIKU') !important;
	background-position: center 50% !important;
	background-repeat: no-repeat !important;
	position: fixed !important;
}

Krok 7

We wklejonym kodzie, w miejscu “SCIEZKA_DO_PLIKU” podmień pełną ścieżkę do swojego spinnera, który wgrałeś wcześniej do bilblioteki mediów.

Krok 8

Kliknij niebieski przycisk “Opublikuj” i ciesz się zmianami.

PS. Jeśli w trakcie składania zamówienia nie widzisz zmian, upewnij się, że prawidłowo wstawiłeś adres do pliku poczynając od “https://” oraz wyczyść pamięć podręczną strony i pamięć podręczną przeglądarki.

Prościej się nie da

W tych żołnierskich punktach kryje się cała sztuka dodania eleganckiego elementu wizualnego, sygnalizującego, że Klient musi chwilę poczekać na finalizację zamówienia. Prościej się nie da.

*Jeśli nie chcesz dodawać styli CSS we wskazanym w kroku 5 miejscu, możesz alternatywnie zmodyfikować plik style.css motywu potomnego lub dodać własny snippet za pomocą wtyczki. Tak czy inaczej, całą operację przeprowadzisz w kwadrans 🙂