Custom dashboard WooCommerce Podsztanga.pl – Case Study

Podsztanga.pl, sklep internetowy z branży szkoleń sportowych (Trójbój siłowy) zdecydował się wdrożyć m.in. audyt UX oraz szereg optymalizacji i napraw względem ówcześnie działającego stacku Wordpressowego. Głównym celem była poprawa wydajności, optymalizacja doświadczenia użytkownika (UX) oraz usunięcie błędów technicznych, które negatywnie wpływały na konwersję. Projekt obejmował migrację platformy, wdrożenie dedykowanych rozwiązań programistycznych oraz usprawnienia wizualne oparte na profesjonalnym audycie wykonanym przez agencję WebMetric.

1. Migracja i wdrożenie nowego motywu

Wyzwanie: Stary motyw WoodMart był ciężki i predefiniowany, co skutkowało słabym wynikiem wydajności na urządzeniach mobilnych (42/100) i desktopowych. Wskaźniki takie jak LCP (Largest Contentful Paint) na urządzeniach mobilnych osiągały 9 sekund, a FCP (First Contentful Paint) 7.2 sekundy, co wymagało pilnej interwencji.

Rozwiązanie: Zdecydowano się na usunięcie motywu WoodMart i wdrożenie dedykowanego rozwiązania opartego na lekkim motywie Elementor Hello Theme. Takie podejście pozwoliło na znaczące poprawienie szybkości działania strony oraz zapewniło elastyczność w tworzeniu niestandardowych elementów.

Kluczowe wdrożenia custom code: W ramach prac stworzono od podstaw niestandardowy kokpit klienta WooCommerce, który zawierał wszystkie niezbędne sekcje w jednym miejscu: Kokpit, Zamówienia, Moje Szkolenia, Pliki do pobrania, Kupony, Adresy, Szczegóły konta, Lista życzeń i Wyloguj się.

2. Migracja danych

Wyzwanie: Głównym wyzwaniem była migracja danych ze starej bazy danych. Konieczne było przeprowadzenie dokładnego procesu przeniesienia danych, aby zapewnić ich spójność i uniknąć strat.

Rozwiązanie: Przeprowadzono pełną migrację klientów, zamówień, szkoleń i wpisów blogowych. W celu zapewnienia kompletności danych, brakujące elementy, takie jak szkolenia i klienci, zostały wgrane ręcznie. Dodatkowo, usprawniono proces pozyskiwania subskrybentów, zmieniając integrację z WordPressa na webhooki z systemem MailerLite.

3. Poprawki UX / UI

Na podstawie audytu UX z marca 2025 roku, wdrożono szereg usprawnień, które znacząco poprawiły doświadczenie użytkownika.

• Menu nawigacyjne: Z menu usunięto zbędną zakładkę „Home", ponieważ użytkownicy intuicyjnie wracali na stronę główną, klikając w logo. Uproszczono również rozwijaną listę "Wiedza", która pierwotnie zawierała tylko jeden element, zamieniając ją na pojedynczą zakładkę.

• Wyszukiwarka: Domyślna wyszukiwarka ograniczała się wyłącznie do produktów. Zastąpiono ją globalnym rozwiązaniem, które umożliwia wyszukiwanie w całym serwisie.

• Mini-koszyk: Zaimplementowano ajaxowy, wysuwany mini-koszyk, który usprawnił ścieżkę zakupową i ułatwił klientom finalizację transakcji.

• Hierarchizacja przycisków: W koszyku wprowadzono hierarchizację przycisków. Przycisk „ZAMÓWIENIE" został wyraźnie wyróżniony, aby skrócić ścieżkę do finalizacji zakupu.

• Język: Ujednolicono język serwisu, tłumacząc wszystkie anglojęzyczne elementy, takie jak "Click to enlarge", na język polski.

4. Poprawki i optymalizacja SEO

Wyzwanie: Struktura sklepu zawierała błędy, które negatywnie wpływały na pozycjonowanie, takie jak błąd 404 generowany przez filtr kursów.

Rozwiązanie: Problem 404 został rozwiązany. Stworzono również niestandardowy shortcode PHP do sidebaru sklepu, który wyświetlał kategorie produktów, co usprawniło nawigację i wewnętrzne linkowanie na stronie. Naprawiono także brak nagłówka H1 na podstronie FAQ.

5. Formularze i newsletter

Wyzwanie: Formularz zapisu do newslettera był zbyt rozbudowany, co mogło zniechęcać potencjalnych subskrybentów.

Rozwiązanie: Usunięto pole „Nazwisko", pozostawiając tylko imię i adres e-mail, co uprościło proces zapisu. Cały system został zintegrowany z MailerLite za pomocą webhooków.

6. Błędy krytyczne i techniczne

Wyzwanie: W trakcie prac naprawiono krytyczny błąd w WordPressie, który pojawił się po usunięciu nieaktywnego konta administratora.

Rozwiązanie: Udało się znaleźć tymczasowe obejście w pliku wtyczki, co pozwoliło na przywrócenie pełnej funkcjonalności strony. Zastosowano również JavaScript do zmniejszania nagłówka strony podczas przewijania.

7. Custom dashboard klienta WooCommerce — szczegóły implementacji

Standardowy dashboard WooCommerce („Moje konto") jest zbiorem 8-12 osobnych podstron z mało spójnym UX. Dla sklepu z usługami szkoleniowymi, gdzie klient regularnie wraca po pliki PDF, certyfikaty i materiały do pobrania, to za mało.

Custom dashboard, który zbudowaliśmy dla Podsztanga.pl, działa jako pojedyncza podstrona z taby/sekcjami:

• Kokpit — przegląd statystyk konta (liczba ukończonych szkoleń, dostępne pliki, status zamówień).
• Zamówienia — pełna historia z możliwością ponownej zapłaty za niedokończone zamówienia.
• Moje Szkolenia — lista zakupionych szkoleń z dostępem do materiałów wideo i PDF.
• Pliki do pobrania — wszystkie zakupione materiały w jednym miejscu, z licznikiem pobrań (limit per zakup).
• Kupony — dostępne i wykorzystane.
• Adresy — dostawa i rozliczenia.
• Szczegóły konta — zmiana hasła, dane osobowe.
• Lista życzeń — produkty zapisane do zakupu w przyszłości.

Wszystkie taby renderowane są bez przeładowania strony (AJAX z fetchami do REST API WooCommerce). Efekt: klient czuje, że pracuje z aplikacją SaaS, a nie ze sklepem WooCommerce — co buduje lojalność i podnosi LTV.

8. Mini-koszyk AJAX — szczegóły UX

Klasyczny WooCommerce po dodaniu produktu do koszyka przekierowuje na /koszyk/ — co zrywa flow zakupowy i wymusza dwa dodatkowe kliknięcia (powrót do kategorii, ponowne wejście w produkt). Slide-in cart, który wdrożyliśmy, rozwiązuje to przez:

• Pop-up z boku strony z animowanym wjazdem — bez przeładowania, bez utraty kontekstu.
• Lista produktów w koszyku z miniaturami, możliwością zmiany ilości i usunięcia produktu.
• Suma częściowa + komunikat „brakuje X zł do darmowej dostawy" jako motywacja do cross-sellu.
• Dwa CTA — „Kontynuuj zakupy" (zamknij pop-up) i „ZAMÓWIENIE" (przejdź do checkoutu z hierarchizacją wizualną na korzyść drugiego).
• Powiadomienie toast przy dodaniu produktu z animacją „check" — wizualne potwierdzenie, że akcja się powiodła.

9. Integracja MailerLite przez webhooki

Stara integracja działała na bazie wtyczki WordPress synchronizującej dane co X godzin. Konsekwencja: nowo zarejestrowany klient pojawiał się w MailerLite z opóźnieniem 6-12 h, automatyczny welcome flow startował za późno. Wymieniliśmy to na webhooki:

1. Klient się rejestruje → WooCommerce hook user_register wywołuje webhook do MailerLite REST API.
2. Klient dodaje produkt → hook woocommerce_add_to_cart wysyła event do MailerLite (segment „aktywny zakupowo").
3. Klient finalizuje zakup → hook woocommerce_thankyou wysyła event z tagami produktów (segmentacja per szkolenie).
4. MailerLite automation startuje od razu — welcome flow w 5 minut, nie 6 godzin.

Średni open rate welcome flow wzrósł wyraźnie (klient pamięta moment rejestracji), a CTR linków do PDF i materiałów szkoleniowych podniósł zaangażowanie konta z pierwszych dni.

Podsumowanie

Kompleksowa modernizacja Podsztanga.pl zakończyła się sukcesem techniczno-biznesowym. Dzięki wdrożeniu dedykowanych rozwiązań (custom dashboard, slide-in cart, webhooki MailerLite), optymalizacji wydajności (Hello Theme zamiast WoodMart, kompresja assetów) i licznym poprawkom UX/UI (hierarchizacja CTA, ujednolicenie języka, wyszukiwarka globalna), sklep stał się szybszy, bardziej intuicyjny i lepiej dostosowany do realnych potrzeb użytkowników kupujących szkolenia trójboju siłowego. Usunięcie błędów technicznych i usprawnienia w architekturze strony stworzyły solidne fundamenty pod dalszy rozwój platformy.

Stack technologiczny finalny: WordPress + WooCommerce + Hello Theme + custom child theme + Redis Object Cache + MailerLite REST API + integracja paynow PSP. Bez przesadnej liczby wtyczek, z naciskiem na custom code w funkcjonalnościach krytycznych dla biznesu.

Kontekst branżowy — sklep ze szkoleniami trójboju siłowego

Trójbój siłowy to nisza sportowa z bardzo specyficznym profilem klienta — zawodnicy szukający porad od konkretnych ekspertów (zawodników wyższych kategorii, znanych trenerów), gotowi inwestować kilkaset złotych w szkolenie wideo lub kompletny program treningowy. To zupełnie inny typ klienta niż klient sklepu masowego — wymaga zaufania do nazwiska autora, dowodu społecznego (poprzednie szkolenia + opinie), zrozumienia tematu (klient już wie, o co chodzi w przysiadach z drążkiem, nie potrzebuje wprowadzenia).

Wpływ na decyzje projektowe:

• Karta produktu „szkolenie" jako pełen landing — biografia autora, plan szkolenia, video preview, opinie kupujących, FAQ. Klient kupuje na wartości autora, nie na cenie.
• Hierarchizacja w katalogu — szkolenia podzielone wg poziomu (początkujący / średnio zaawansowany / wyczynowy) i wg dyscypliny (przysiad, martwy ciąg, wyciskanie). Dwa wymiary filtrowania.
• Sekcja „Materiały bonusowe" dla zalogowanych klientów z dostępem do PDF, ćwiczeń, programów. Buduje to retencję i powtarzalność zakupów.

Co działało, czego nie zrobiliśmy w fazie 1

Najmocniejszy ROI w fazie modernizacji: migracja motywu WoodMart → Hello Theme + custom. Wynik wydajności mobile podskoczył z poziomu 42/100 (czerwona strefa Lighthouse) do akceptowalnego. To bezpośrednio wpływa na konwersję — szkolenia kupują się głównie z telefonu, w przerwie między seriami treningowymi.

Drugi mocny: slide-in cart + uproszczenie checkoutu. Klient zwykle kupuje 1-2 szkolenia w sesji + ewentualnie program treningowy. Bez slide-in cart każde dodanie do koszyka oznaczało zerwanie flow i konieczność powrotu do katalogu.

Czego nie zrobiliśmy w fazie 1: natywnej aplikacji mobilnej. Klient w pewnym momencie pytał o iOS/Android app dla łatwiejszego odtwarzania szkoleń wideo na siłowni. Z analizy wynikało, że PWA (Progressive Web App) z trybem offline dla zakupionych szkoleń da 80% wartości aplikacji przy 20% kosztu. To w roadmapie fazy 3.

SEO dla sklepu z niszą sportową

Trójbój siłowy ma w Polsce kilkutysięczną społeczność zawodników wyczynowych + wielokrotnie większą amatorów. Frazy wyszukiwawcze rozdzielają się na kilka kategorii:

• Frazy informacyjne — „technika przysiadu", „programowanie martwego ciągu", „zasady trójboju w PZTS". Niskie CPC, wysoki potencjał content marketingowy.
• Frazy autora — wyszukiwanie konkretnego trenera lub zawodnika („szkolenie [nazwisko]"). Wysoka intencja zakupowa, mało konkurencji.
• Frazy zakupowe — „szkolenie trójbój siłowy online", „kurs przysiadu". Średnia konkurencja, średnie CPC.

Strategia treści, którą stosujemy: pillar pod każdą z trzech kluczowych dyscyplin (przysiad, martwy ciąg, wyciskanie) + spokes pod konkretne aspekty (technika, programowanie, sprzęt, regeneracja). Linkowanie wewnętrzne z bloga do kart szkoleń poszczególnych autorów.

Audyt z agencji WebMetric — jak to wykorzystaliśmy

Audyt UX z marca 2025 wykonany przez agencję WebMetric dostarczył 30-stronicowy raport z konkretnymi obserwacjami. Naszą rolą było przekładanie tych obserwacji na implementację — bo audyt to dopiero pierwszy krok. Konkretne kategorie obserwacji i nasze działania:

• Nawigacja — audyt sugerował uproszczenie menu. Wdrożenie: usunięcie zakładki „Home" i konsolidacja rozwijanej listy „Wiedza" do pojedynczego elementu.
• Wyszukiwarka — audyt zwracał uwagę na ograniczenie tylko do produktów. Wdrożenie: globalna wyszukiwarka po wszystkich typach treści (produkty + posty blogowe + szkolenia).
• Hierarchizacja CTA — audyt wskazał na słabą widoczność przycisku „ZAMÓWIENIE". Wdrożenie: wyróżnienie wizualne (większy rozmiar, kontrastowy kolor, ikona).
• Spójność językowa — audyt wykrył anglojęzyczne elementy w polskim sklepie. Wdrożenie: tłumaczenie wszystkich napisów typu „Click to enlarge" na język polski.

To dobry przykład produktywnej współpracy z zewnętrzną agencją UX — oni dostarczają obiektywną perspektywę i listę problemów, my dostarczamy implementację techniczną. Klient dostaje obie wartości w jednym projekcie.