Jeśli kiedykolwiek próbowałeś zmienić wygląd szablonu zamówienia WooCommerce, to pewnie wiesz, że w praktyce nie jest to takie „klik i gotowe”. Chodzi przecież o jeden z kluczowych elementów całego sklepu internetowego – moment, w którym klient już zdecydował się kupić. Tu każdy detal ma znaczenie: układ, dane, kolejność sekcji, nawet kolory. A jeśli standardowe rozwiązanie nie pasuje do Twojej marki, warto zrobić to po swojemu – z głową.
W skrócie: aby edytować szablon zamówienia WooCommerce, musisz odnaleźć odpowiedni plik szablonu (najczęściej order-details.php), przenieść go do folderu w swoim motywie potomnym, wprowadzić zmiany w kodzie PHP, HTML lub CSS, a następnie sprawdzić ich działanie w praktyce. To proces, który wymaga odrobiny technicznej wprawy, ale jest do opanowania – zwłaszcza jeśli znasz już strukturę motywu WordPressa. Jeśli zależy Ci, by robić to zawodowo lub chcesz, żebyśmy Ci w tym pomogli w ramach projektowania czy opieki nad stroną – zerknij na nasze projekty stron internetowych.
Po kolei zobaczmy, jak nad tym zapanować. Oto pięć kluczowych kroków, które zaraz przejdziemy razem:
- Krok 1: Zrozum strukturę plików i lokalizację szablonu zamówienia WooCommerce
- Krok 2: Utwórz motyw potomny, aby edytować szablon bez ryzyka utraty zmian
- Krok 3: Nadpisz plik order-details.php i dostosuj dane zamówienia
- Krok 4: Dodaj własne pola, styl i logikę do szablonu zamówienia
- Krok 5: Przetestuj i utrzymuj swoje zmiany – z głową
A jeśli chcesz dopracować wygląd swojej strony krok po kroku – zapraszam dalej, będzie konkretnie.
Krok 1: Zrozum strukturę plików i lokalizację szablonu zamówienia WooCommerce
Zanim cokolwiek zmienisz, musisz wiedzieć, z czym masz do czynienia. W WooCommerce każdy element strony – koszyk, zamówienie, mail potwierdzenia – ma własny plik szablonu. W przypadku sekcji zamówienia, kluczowym jest plik order-details.php, który znajduje się w folderze: wp-content/plugins/woocommerce/templates/order/. To z niego generuje się całe podsumowanie zamówienia, dane produktu, koszty dostawy i dane klienta.
Nie edytuj tego pliku bezpośrednio – to klasyczny błąd początkujących. Przy aktualizacji wtyczki Twoje zmiany znikną. Dlatego zawsze pracujemy na kopii w motywie potomnym. To bezpieczne środowisko, w którym wszystko działa tak samo, ale możesz dowolnie personalizować szablon zamówienia bez obaw.
Najlepiej, jeśli stworzysz strukturę folderu w motywie: yourtheme/woocommerce/order/order-details.php. WooCommerce automatycznie wykryje i załaduje ten plik zamiast oryginału. Dzięki temu uzyskasz pełną kontrolę nad układem, HTML i danymi.
A jeśli chcesz, by Twoje zmiany były też szybkie w działaniu, warto przy okazji przejrzeć poradnik o optymalizacji WooCommerce.
| Element | Opis |
|---|---|
| order-details.php | Główny szablon szczegółów zamówienia |
| thankyou.php | Strona potwierdzenia zamówienia |
| email-order-details.php | Szablon wysyłany w e-mailach |
| woocommerce/order/ | Folder z plikami zamówienia |
| functions.php | Plik, w którym można zarejestrować zmiany hooków |
Krok 2: Utwórz motyw potomny i zabezpiecz swoje zmiany
Bez motywu potomnego Twoje modyfikacje przepadną po każdej aktualizacji motywu. To dlatego właśnie zawsze tworzę „dziecko” motywu. Wystarczy kilka minut: utwórz folder, np. twentytwentyfour-child, a w nim plik style.css z nagłówkiem określającym rodzica i funkcję z functions.php, która załaduje style z głównego motywu. To klasyczna procedura w WordPressie, ale w kontekście edycji WooCommerce – absolutnie obowiązkowa.
Kiedy Twój motyw potomny WordPressa jest aktywny, możesz śmiało tworzyć w nim folder woocommerce i kopiować tam pliki, które chcesz nadpisywać. WooCommerce automatycznie wybierze właśnie Twoje wersje. To najlepszy sposób na bezpieczną edycję szablonu zamówienia oraz testowanie nowych rozwiązań.
Jak sprawdzić, czy motyw potomny działa?
Wejdź w Wygląd → Motywy w panelu admina WordPressa. Aktywny motyw powinien mieć dopisek „Child”. Jeśli wszystko jest ok, możesz ruszać dalej.
Nadpisywanie plików WooCommerce
Kopiuj tylko te pliki, które naprawdę chcesz zmieniać. Każdy z nich możesz edytować osobno. Dzięki temu Twoja witryna pozostaje stabilna i wydajna.
Bezpieczeństwo i wersjonowanie
Warto trzymać swój kod w repozytorium GIT, jeśli często zmieniasz pliki WooCommerce. W razie błędu szybko cofniecie zmiany bez stresu.
Przydatne wtyczki wspomagające
Jeśli nie czujesz się na siłach edytować plików ręcznie, testuj zmiany lokalnie. „Code Snippets” pomoże Ci w prosty sposób uruchomić funkcje WordPressa bez dotykania kodu.
Jeszcze jedna rada: zawsze testuj spójność wersji WooCommerce i motywu, a o szczegółowe wytyczne dotyczące wydajności możesz zajrzeć do optimizacji CWV dla WooCommerce.
Krok 3: Nadpisz plik order-details.php i dostosuj dane zamówienia
To ten moment, na który czeka większość: faktyczna edycja. W swoim motywie potomnym, w folderze woocommerce/order/, znajdziesz plik order-details.php. To właśnie tu możesz modyfikować strukturę HTML, kolejność sekcji czy sposób wyświetlania szczegółów zamówienia. Plik jest oparty na języku PHP i korzysta z wbudowanych funkcji WooCommerce, więc każda jego część odpowiada za inny fragment widoku.
Jeśli chcesz np. ukryć identyfikator zamówienia, dodać pole z notatką lub pokazać łączny koszt z podatkiem, znajdziesz te fragmenty w tym właśnie pliku. Najczęściej używane dane to: $order->get_items(), $order->get_customer_note() czy $order->get_total(). Każda z nich pozwala pobrać konkretne dane klienta lub metadane zamówienia.
Nie bój się eksperymentować z układem – możesz przenieść kolumny, dodać własne klasy CSS albo nawet wstawić warunek z tagiem warunkowym WooCommerce. Jeśli dobrze rozumiesz strukturę motywu, ogranicza Cię tylko wyobraźnia. A jeśli po modyfikacjach chcesz poprawić konwersję widoków, sprawdź jak zwiększyć konwersję w WooCommerce.
| Element kodu | Opis |
|---|---|
| $order->get_items() | Pobiera listę produktów z zamówienia |
| $order->get_total() | Łączna kwota zamówienia |
| $order->get_billing_email() | Adres e-mail klienta |
| $order->get_shipping_method() | Metoda dostawy |
| $order->get_status() | Status realizacji zamówienia |
Krok 4: Dodaj własne pola, styl i logikę do szablonu zamówienia
Tutaj robi się ciekawie – edycja nie musi kończyć się na kosmetyce. Możesz rozszerzyć strukturę zamówienia WooCommerce o własne pola, np. „Numer projektu”, „Adres oddziału” albo informację o gwarancji. Wystarczy skorzystać z hooków typu woocommerce_checkout_update_order_meta i woocommerce_admin_order_data_after_billing_address. Dzięki nim dodasz i wyświetlisz niestandardowe informacje zarówno po stronie klienta, jak i w panelu administratora.
Dostosowanie CSS i HTML
Gdy układ już działa, zadbaj o jego szatę graficzną. Możesz przenieść style CSS do własnego pliku style.css w motywie potomnym lub dodać je w edytorze motywu WordPress. Unikaj !important – lepiej dopasuj selektory.
Filtry i hooki dla dynamicznych danych
Dzięki hookom jak woocommerce_order_details_after_order_table możesz wstrzykiwać dodatkowe dane bez edycji głównego pliku. Idealne do dynamicznych sekcji jak status płatności.
Dodanie logiki PHP
Możesz warunkowo wyświetlać dane: np. jeśli zamówienie ma status „processing”, pokaż numer przesyłki; jeśli „completed” – potwierdzenie PDF. WooCommerce działa tu elastycznie.
Stylizacja elementów zamówienia
Skorzystaj z narzędzi jak Chrome DevTools, by podglądać klasy CSS i zoptymalizować wygląd szczegółów zamówienia dla każdej przeglądarki.
Warto też śledzić dane zamówień za pomocą linków UTM lub nawet integracji analitycznych – a jeśli chcesz lepiej analizować zachowania porzuconych koszyków, przyda Ci się kompletny poradnik o porzuconych koszykach.
Krok 5: Przetestuj i utrzymuj swoje zmiany – z głową
Nawet najlepiej zaplanowana edycja szablonu nie ma sensu, jeśli nie działa. Testuj zawsze po każdej zmianie. Użyj trybu incognito, sprawdź różne rodzaje zamówień, różne statusy (pending, processing, completed).
Warto też zajrzeć w konsolę przeglądarki – błędy JS mogą psuć wrażenia użytkownika, nawet jeśli strona „działa”.
Stwórz sobie prosty system wersjonowania zmian: numeruj edycje, rób zrzuty ekranu przed/po. To proste, ale ratuje życie, gdy klient mówi „wcześniej było lepiej”. Regularnie aktualizuj motyw potomny – a jeśli zależy Ci na utrzymaniu całości, warto skorzystać z usług jak odzyskiwanie porzuconych koszyków WooCommerce, które często wiąże się z analizą szablonów i UX.
Po zakończeniu testów możesz wdrożyć zmiany na produkcji. I pamiętaj – lepiej trzy razy przetestować niż raz naprawiać po klientach. WooCommerce to potężne narzędzie, ale wymaga regularnej kontroli i drobnych usprawnień, zwłaszcza w obszarze zamówień.
Twoje zamówienia mogą wyglądać i działać lepiej
Edycja szablonu zamówienia WooCommerce to nie tylko kosmetyka – to sposób na dopasowanie doświadczenia zakupowego do Twojej marki i klientów. Kiedy szata graficzna, struktura i dane współgrają – wtedy zamówienie staje się częścią Twojego stylu sprzedaży. Właśnie o to chodzi.
Jeśli chcesz, żeby Twój sklep był nie tylko ładny, ale i skuteczny — napisz do nas. Zajmiemy się dopracowaniem Twojej strony, konfiguracją WooCommerce i automatyzacją obsługi klientów. Bo dobrze zaprojektowana strona to nie trend, to przewaga biznesowa.
Zajrzyj na strony internetowe w Warszawie i zobacz, jak możemy Ci w tym pomóc.
FAQ – najczęściej zadawane pytania o edycję szablonów WooCommerce
Czy mogę edytować szablon WooCommerce bez dostępu do FTP?
Tak, ale tylko w ograniczonym zakresie. Możesz to zrobić z poziomu edytora motywów w panelu WP, jednak przy dużych zmianach FTP lub menedżer plików w hostingu to bezpieczniejsza opcja.
Jak sprawdzić, która wersja pliku szablonu jest używana?
WooCommerce ma wbudowane narzędzie diagnostyczne. W zakładce „Status systemu” zobaczysz listę plików szablonów i ich wersje.
Czy aktualizacja motywu usunie moje zmiany?
Tak – jeśli edytujesz pliki w głównym motywie. Dlatego zawsze pracuj na motywie potomnym, który pozostaje nietknięty przez aktualizacje.
Jak dodać własne pole do zamówienia bez kodowania?
Istnieją wtyczki, np. Checkout Field Editor. Pozwalają dodawać pola do formularza zamówienia i sekcji zamówienia bez pisania kodu.
Czy mogę mieć różne szablony zamówień dla różnych produktów?
Nie wprost, ale można to obejść za pomocą warunków PHP w szablonie: np. jeśli produkt należy do kategorii X, ładuj alternatywny fragment HTML.
Jak przywrócić oryginalny szablon jeśli coś się zepsuje?
Wystarczy usunąć z motywu potomnego plik, który modyfikowałeś. WooCommerce sam zacznie używać domyślnej wersji z pluginu.
Czy warto korzystać z gotowych snippetów z Internetu?
Tylko jeśli rozumiesz, co robią. Kod z forum może działać, ale też uszkodzić zamówienie. Zawsze testuj lokalnie przed wdrożeniem.
