Czasem patrzysz na stronę produktu w swoim sklepie i myślisz: „hmm, wygląda okej, ale… coś bym tu poprawił”. Może chcesz przesunąć opis, dodać ikonę dostępności, albo zmienić sposób wyświetlania ceny. I tu właśnie zaczyna się temat: jak edytować szablon produktu WooCommerce – konkretnie, bez kombinowania i bez ryzyka rozwalenia połowy sklepu.
Tak naprawdę edycja szablonu produktu WooCommerce to praca na warstwach – motyw WordPress, plik single-product.php, action hooks WooCommerce, CSS, a czasem nawet Elementor czy ACF. W tym poradniku przeprowadzę Cię przez cały proces – krok po kroku. Jeśli chcesz mieć sklep, który wygląda dokładnie tak, jak chcesz – i równocześnie nie kosztuje fortuny – to jesteś w dobrym miejscu.
(A jeśli potrzebujesz pomocy z całym procesem budowy sklepu lub strony, zajrzyj do naszych realizacji stron.)
- Krok 1: Zrozum strukturę i logikę plików szablonu produktu WooCommerce
- Krok 2: Utwórz motyw potomny i przygotuj środowisko do bezpiecznej edycji szablonu
- Krok 3: Dostosuj układ i zawartość strony produktu bez utraty funkcjonalności
- Krok 4: Dodaj własne pola i niestandardowe sekcje produktu (ACF, hooki i PHP)
- Krok 5: Stylizacja i testy – czyli jak dopieścić wygląd produktu i sprawdzić efekty
A jeśli chcesz wszystko przerobić po swojemu – od wyglądu po UX – czytaj dalej. Zaraz przejdziemy przez każdy etap szczegółowo.
Krok 1: Zrozum strukturę i logikę plików szablonu produktu WooCommerce
Zanim zaczniesz grzebać w kodzie, musisz wiedzieć, gdzie co leży. W WooCommerce wszystko kręci się wokół folderu `/woocommerce/templates/` oraz plików takich jak single-product.php, content-single-product.php, archive-product.php czy product-image.php. To właśnie tam znajdują się elementy, które składają się na wygląd każdej strony produktu – tytuł produktu, opis produktu, galeria produktu czy wyświetlanie ceny produktu.
WordPress działa hierarchicznie – czyli jeśli w motywie masz plik o tej samej nazwie, co w WooCommerce, system korzysta z Twojej wersji. Dzięki temu można w prosty sposób przedefiniować szablon WooCommerce. Na przykład: chcesz zmienić układ zdjęć w karcie produktu? Wystarczy skopiować plik `single-product.php` do folderu `yourtheme/woocommerce/` i wprowadzić swoje modyfikacje.
Więcej o tym, jak działa struktura i przekierowania szablonów, znajdziesz w tym szczegółowym opisie edycji WooCommerce.
Oto zestawienie kluczowych plików, które musisz znać:
| Plik | Opis |
|---|---|
| single-product.php | Główny szablon produktu |
| content-single-product.php | Treść pojedynczej strony produktu |
| archive-product.php | Strona listy produktów / kategorie |
| price.php | Wyświetlanie ceny produktu |
| meta.php | Informacje dodatkowe produktu (SKU, kategorie) |
Znając te pliki, wiesz już, z której części sklepu bierze się każdy element. To fundament. Dalej pokażę Ci, jak to bezpiecznie modyfikować – bez ryzyka utraty zmian po aktualizacji motywu.
Krok 2: Utwórz motyw potomny i przygotuj środowisko do bezpiecznej edycji szablonu
Dlaczego motyw potomny to podstawa?
Jeśli coś zmienisz w głównym motywie, przy jego aktualizacji wszystko zniknie. Dlatego musisz stworzyć tak zwany motyw potomny WordPress (child theme). Dzięki temu możesz modyfikować szablon produktu WooCommerce bez dotykania oryginalnych plików. Prosto, skutecznie i – co najważniejsze – bezpiecznie.
Jak stworzyć motyw potomny?
W katalogu `/wp-content/themes/` utwórz nowy folder, np. `twojmotyw-child`. W środku dodaj plik `style.css` z nagłówkiem wskazującym na motyw nadrzędny, oraz `functions.php`, w którym zaimportuj style głównego motywu. Gotowe – teraz wystarczy aktywować motyw w panelu i możesz działać.
Od tej chwili wszystkie modyfikacje nadpisują oryginał, ale nie są przez niego kasowane.
Bezpieczna edycja szablonów WooCommerce
Teraz skopiuj z głównego katalogu WooCommerce (np. `wp-content/plugins/woocommerce/templates/`) te pliki, które chcesz modyfikować – np. single-product.php – do katalogu `twojmotyw-child/woocommerce/`. I tyle. Teraz edytując ten plik, ingerujesz tylko w swój child theme.
Zmieniasz, co chcesz, nie naruszając oryginału.
W świecie pełnym nieprzewidywalnych aktualizacji to najlepsza praktyka. Zwłaszcza jeśli, tak jak ja, masz kilka sklepów pod opieką i nie chcesz się martwić powtarzaniem tej samej roboty po każdej aktualizacji. Dobrze omówione na stronie edycji szablonów WooCommerce.
Krok 3: Dostosuj układ i zawartość strony produktu bez utraty funkcjonalności
Teraz zaczyna się zabawa – prawdziwa edycja szablonu produktu. Gdy już masz kopię w motywie potomnym, możesz zmieniać kolejność i układ elementów strony. WooCommerce używa tzw. template hooks – czyli zaczepów akcji, które określają, w jakiej kolejności renderują się poszczególne fragmenty (galeria, tytuł, opis, przycisk dodania do koszyka itd.).
Hooki wyglądają mniej więcej tak:
`add_action(’woocommerce_before_single_product_summary’, 'my_custom_function’, 25);`
Dzięki nim możesz np. przenieść opis produktu nad galerię albo dodać własny blok z ikonami gwarancji. Hooki takie jak woocommerce_before_single_product, woocommerce_single_product_summary, woocommerce_after_single_product_summary dają Ci pełną kontrolę bez kopiowania całych plików.
Poniżej szybka ściąga z najczęściej używanych hooków:
| Hook | Opis |
|---|---|
| woocommerce_before_single_product | Renderowany przed całym blokiem produktu |
| woocommerce_single_product_summary | Główna zawartość (tytuł, opis, przycisk) |
| woocommerce_after_single_product_summary | Produkty powiązane, rekomendacje |
| woocommerce_before_add_to_cart_button | Przed przyciskiem Koszyka |
| woocommerce_product_meta_end | Na końcu danych produktu |
Chcesz, żeby wszystko trzymało się kupy i ładowało błyskawicznie? Pamiętaj o optymalizacji – o tym, jak nie zabić prędkości swojego sklepu po modyfikacjach, przeczytasz w tym wpisie o szybkości WooCommerce.
Krok 4: Dodaj własne pola i niestandardowe sekcje produktu (ACF, hooki i PHP)
Dodawanie pól własnych z ACF
Chcesz pokazać parametry techniczne, film instruktażowy albo dodatkowy opis? Wtyczka ACF – Advanced Custom Fields to złoto. Dzięki niej możesz tworzyć pola niestandardowe produktu, np. „Materiał”, „Długość gwarancji” czy „Źródło pochodzenia”. Następnie wyświetlasz je w szablonie za pomocą PHP:
`the_field(’twoje_pole’);` – i gotowe.
Zastosowanie hooków WooCommerce
WooCommerce ma setki haczyków – możesz nimi dopinać się wszędzie, gdzie chcesz. Przykład? Chcesz coś dodać tuż pod tytułem?
Użyj:
`add_action(’woocommerce_single_product_summary’, 'custom_info’, 6);`
Hooki pozwalają tworzyć naprawdę własne układy, nie psując logiki działania sklepu.
Dostosowanie CSS produktu
Nie wszystko trzeba robić w PHP. Czasem wystarczy kilka linijek stylizacji CSS produktu, żeby całość wyglądała bardziej „premium”. Zmieniasz marginesy, kolory, tło – i już. Wszystko najlepiej wrzucać do osobnego pliku `custom-product.css`, ładowanego w motywie potomnym.
Wszystko to warto testować w praktyce. Sam często sprawdzam efekty w trybie incognito, żeby mieć świeże spojrzenie. A jak chcesz dopracować swoją witrynę pod kątem metryk Core Web Vitals – koniecznie zerknij na tę analizę CWV WooCommerce.
Krok 5: Stylizacja i testy – czyli jak dopieścić wygląd produktu i sprawdzić efekty
Na koniec zostaje coś, co odróżnia amatora od profesjonalisty – testowanie i dopieszczanie. Kiedy zmienisz zawartość strony produktu, porównaj ją z oryginałem. Sprawdź czy wszystkie zmienne produktu WooCommerce działają poprawnie, czy galeria produktu wygląda dobrze na telefonie, czy nie przestał działać przycisk dodania do koszyka. Właśnie tu wychodzi, komu naprawdę zależy na detalach.
Stylowanie najlepiej robić przez Elementor albo CSS – w zależności, jak masz ustawione środowisko. Jeśli korzystasz z edytora motywu WordPress, nie zapominaj o podglądzie responsywności. Wygląd jest niczym bez użyteczności, a w sklepach to właśnie UX decyduje, czy klient kliknie „kup teraz”.
Kiedy wszystko działa, przetestuj jeszcze prędkość ładowania i dostępność. Odpal Lighthouse, sprawdź Core Web Vitals, przeleć stronę na mobilkach. I tchnij w to trochę duszy – bo nawet najlepiej zoptymalizowany produkt powinien wyglądać po ludzku. Jeśli chcesz iść krok dalej i ulepszyć proces zakupowy, zerknij na poradnik o konwersji WooCommerce.
Zadbaj, żeby Twój sklep naprawdę działał
Jak widzisz – edycja szablonu produktu w WooCommerce nie jest magią, ale wymaga logicznego podejścia. Najpierw kontrola, potem działania, kopia bezpieczeństwa, testy – i dopiero wtedy efekty. Kiedy robisz to „z głową”, Twój sklep internetowy działa szybciej, wygląda lepiej i – co najważniejsze – przynosi więcej zamówień.
A jeśli wolisz, żeby zajęli się tym profesjonaliści, którzy tworzą nowoczesne i niedrogie strony dopasowane do Twojego biznesu – odezwij się do nas w stronach internetowych Gorzów Wielkopolski. Pomożemy Ci usprawnić zarówno wygląd, jak i skuteczność sprzedaży online.
FAQ – Najczęściej zadawane pytania
Czy mogę edytować szablon produktu WooCommerce bez wiedzy o PHP?
Tak, w dużej mierze. Dzięki narzędziom takim jak Elementor lub Customizer, możesz zmieniać układ, kolory, kolejność elementów bez dotykania kodu. Choć kilka drobiazgów (np. niestandardowe pola) i tak wymaga drobnej edycji PHP.
Czy aktualizacja WooCommerce usunie moje zmiany?
Nie, jeśli pracujesz w motywie potomnym. To właśnie po to się go tworzy – żeby zmiany pozostały po każdej aktualizacji wtyczki czy szablonu.
Jak wrócić do oryginalnego szablonu WooCommerce?
Usuń zmodyfikowany plik z katalogu `twojmotyw-child/woocommerce/`, a WordPress automatycznie użyje oryginalnej wersji z wtyczki WooCommerce.
Jak dodać nową sekcję poniżej przycisku „Dodaj do koszyka”?
Wystarczy użyć hooka:
`add_action(’woocommerce_after_add_to_cart_button’, 'nazwa_twojej_funkcji’);`
W tej funkcji możesz zdefiniować dowolny kod HTML lub treść dynamiczną.
Czy ACF działa ze wszystkimi motywami WooCommerce?
Tak, ACF działa globalnie – dopóki motyw nie blokuje jego funkcji. Możesz wyświetlać pola niestandardowe zarówno w produktach, jak i głównych stronach sklepu.
Czy mogę zmienić tylko styl, bez modyfikacji plików PHP?
Oczywiście. Wystarczy własny arkusz CSS albo panel „Dostosuj” w WordPressie. To dobra opcja, gdy chcesz zmienić tylko kolory, marginesy czy czcionki.
Czy edycja szablonu wpływa na SEO?
Może – i to pozytywnie, jeśli robisz to mądrze. Dobrze ustawione nagłówki, pola opisowe i poprawiona struktura treści pomagają robotom Google lepiej zrozumieć Twój produkt i zwiększyć widoczność sklepu.
