Elementor i WooCommerce razem tworzą jedną z najbardziej elastycznych kombinacji do budowania niestandardowych sklepów internetowych na WordPressie. Podczas gdy WooCommerce zajmuje się funkcjonalnością e-commerce (produkty, koszyk, realizacja zamówienia, płatności), Elementor daje Ci wizualną kontrolę nad tym, jak wyglądają i działają strony sklepu. W tym przewodniku przeprowadzimy Cię przez budowanie kluczowych stron WooCommerce z Elementorem, w tym stron produktów, archiwów sklepu i doświadczenia z koszykiem.
Ten samouczek zakłada, że masz zainstalowane WordPress, WooCommerce i Elementor Pro. Elementor Pro jest wymagany do używania widgetów WooCommerce—bezpłatna wersja Elementora ich nie zawiera.
Co potrzebujesz przed rozpoczęciem
| Wymaganie | Dlaczego jest potrzebne | Gdzie to zdobyć |
|---|---|---|
| WordPress 6.x+ | Podstawowa platforma CMS | wordpress.org |
| WooCommerce (darmowy) | Funkcjonalność e-commerce | Katalog wtyczek WordPress |
| Elementor Pro | Widgety WooCommerce i Theme Builder | PluginTheme.net |
| Kompatybilny motyw | Podstawa dla Twojego sklepu | Przewodnik po wyborze motywu |
| Przykładowe produkty | Treść do projektowania szablonów | WooCommerce → Narzędzia → Importuj dane przykładowe |
Zrozumienie kreatora WooCommerce w Elementorze
Elementor Pro zawiera dedykowany kreator WooCommerce w swoim systemie Theme Builder. Umożliwia to tworzenie niestandardowych szablonów dla:
- Strona produktu: Kontrola układu pojedynczych stron produktów
- Archiwum produktów: Dostosowanie strony sklepu i stron kategorii
- Strona koszyka: Zaprojektowanie niestandardowego układu koszyka
- Strona realizacji zamówienia: Dostosowanie układu formularza realizacji zamówienia
- Strona mojego konta: Przeprojektowanie pulpitu nawigacyjnego konta klienta
Każdy szablon wykorzystuje widgety specyficzne dla WooCommerce, które pobierają dynamiczne dane z Twoich produktów. Oznacza to, że projektujesz układ raz, a on automatycznie stosuje się do wszystkich produktów (lub konkretnych kategorii).
Budowanie niestandardowej strony produktu
Krok 1: Utwórz szablon
- Przejdź do Szablony → Theme Builder w swoim panelu administracyjnym WordPress
- Kliknij "Dodaj nowy" i wybierz "Pojedynczy produkt" jako typ szablonu
- Wybierz gotowy szablon strony produktu lub zacznij od pustej strony
- Edytor Elementor otworzy się z widgetami WooCommerce dostępnymi w panelu
Krok 2: Dodaj widgety WooCommerce
Kluczowe widgety WooCommerce dla stron produktów:
| Widget | Co wyświetla | Opcje dostosowywania |
|---|---|---|
| Obrazy produktu | Galeria z miniaturami i lightboxem | Układ galerii, pozycja miniatur, przełącznik powiększenia |
| Tytuł produktu | Nazwa produktu (H1) | Typografia, kolor, wyrównanie |
| Cena produktu | Cena regularna i promocyjna | Typografia, kolor etykiety promocyjnej, układ |
| Ocena produktu | Ocena w gwiazdkach z recenzji | Kolor gwiazdek, rozmiar, wyrównanie |
| Dodaj do koszyka | Wybór ilości + przycisk dodania do koszyka | Styl przycisku, kolory, układ ilości |
| Krótki opis produktu | Krótki podsumowanie produktu | Typografia, odstępy |
| Meta produktu | SKU, kategorie, tagi | Układ, typografia, separator |
| Zakładki danych produktu | Zakładki opisu, recenzji, dodatkowych informacji | Styl zakładki, obramowanie, odstępy |
| Produkty powiązane | Produkty z tej samej kategorii | Kolumny, liczba, kolejność |
| Upsells | Ręcznie powiązane upsell pro |
Krok 3: Najlepsze praktyki dotyczące układu
Strona produktu o wysokiej konwersji podąża za przetestowanym wzorem układu:
- Powyżej linii zgięcia: Obrazy produktów (po lewej, 50-60% szerokości) + tytuł, cena, ocena, krótki opis i przycisk dodania do koszyka (po prawej, 40-50% szerokości)
- Poniżej linii zgięcia: Zakładki danych produktu (pełny opis, specyfikacje, opinie)
- Dolna sekcja: Powiązane produkty i upselle w siatce (3-4 kolumny)
- Elementy zaufania: Informacje o wysyłce, polityka zwrotów, znaki bezpieczeństwa w pobliżu przycisku dodania do koszyka
Utrzymuj przycisk dodania do koszyka widoczny bez przewijania zarówno na komputerze, jak i na urządzeniach mobilnych. Użyj kontrastowych kolorów dla przycisku, aby przyciągnąć uwagę.
Dostosowywanie strony sklepu (Archiwum produktów)
Krok 1: Utwórz szablon archiwum
- Przejdź do Szablony → Kreator motywów → Archiwum produktów
- Dodaj nowy szablon i wybierz "Archiwum produktów" jako typ
- Przypisz warunki wyświetlania (wszystkie archiwa, konkretne kategorie lub strony tagów)
Krok 2: Skonfiguruj siatkę produktów
Widget Archiwum produktów wyświetla listę produktów z tymi opcjami:
- Kolumny: 2-6 kolumn (3-4 dobrze działają w większości sklepów)
- Produkty na stronie: 12-24 to standard dla doświadczenia użytkownika
- Paginacja: Strony numerowane, przycisk "ładuj więcej" lub nieskończone przewijanie
- Sortowanie: Pozwól klientom sortować według ceny, popularności lub oceny
- Znacznik wyprzedaży: Dostosuj pozycję, kolor i tekst znacznika wyprzedaży
Dla sklepów z wieloma produktami dodaj filtrację kategorii powyżej siatki. Możesz użyć widgetu Menu Elementor lub wtyczki do filtracji produktów, takiej jak JetWooBuilder, aby uzyskać zaawansowane opcje filtracji.
Projektowanie strony koszyka
Elementor Pro pozwala na dostosowanie układu strony koszyka. Dobra strona koszyka powinna:
- Wyświetlać obrazy produktów, nazwy, ceny i ilości w przejrzystej tabeli
- Wyraźnie pokazywać łączną kwotę
- Zawierać przycisk "Kontynuuj zakupy", który wraca do strony sklepu
- Wyświetlać kalkulator wysyłki, aby klienci mogli oszacować koszty dostawy
- Pokazywać produkty krzyżowe poniżej tabeli koszyka
Widget koszyka Elementor zastępuje domyślny układ koszyka WooCommerce wizualnym edytorem, w którym możesz stylizować każdy element—krawędzie tabeli, kolory przycisków, typografię i odstępy.
Dostosowywanie strony realizacji zamówienia
Strona realizacji zamówienia ma bezpośredni wpływ na wskaźnik konwersji. Widget realizacji zamówienia Elementor Pro zapewnia kontrolę nad:
- Układ formularza: Formularz rozliczeniowy/wysyłkowy w jednej lub dwóch kolumnach
- Pozycja podsumowania zamówienia: Obok formularza lub powyżej/poniżej
- Styl przycisku: Kolor, rozmiar i tekst przycisku złożenia zamówienia
- Sekcja płatności: Układ przycisków radiowych lub zakładek dla metod płatności
- Znaki zaufania: Dodaj ikony bezpieczeństwa i tekst gwarancji w pobliżu formularza płatności
Aby uzyskać porady dotyczące optymalizacji konwersji na stronie realizacji zamówienia, zobacz nasz przewodnik po optymalizacji realizacji zamówienia WooCommerce.
Rozważania dotyczące wydajności
Elementor dodaje CSS i JavaScript do twoich stron. Dla sklepu WooCommerce wydajność jest bezpośrednio związana z konwersjami. Pamiętaj o tych wskazówkach:
- Użyj kontenerów Flexbox zamiast sekcji/kolumn, aby zredukować liczbę elementów DOM
- Optymalizuj obrazy produktów: Użyj formatu WebP, odpowiednich wymiarów i leniwego ładowania. Zobacz nasz przewodnik po optymalizacji obrazów
- Ogranicz liczbę widgetów: Każdy widget dodaje kod; używaj tylko tego, czego potrzebujesz
- Włącz funkcje wydajności Elementor: Ulepszone ładowanie zasobów, ulepszone ładowanie CSS
- Użyj wtyczki do buforowania: WP Rocket dobrze współpracuje z konfiguracjami Elementor WooCommerce
Podstawowe dodatki do Elementor WooCommerce
Te dodatki do Elementor rozszerzają możliwości budowania WooCommerce:
| Dodatek | Kluczowe funkcje WooCommerce |
|---|---|
| JetWooBuilder | Zaawansowane siatki produktów, niestandardowe szablony archiwów, układy pojedynczych produktów z logiką warunkową |
| Essential Addons Pro | Siatka produktów, karuzela produktów, proces zamówienia WooCommerce |
| Happy Elementor Addons | Siatka kategorii produktów, mini koszyk, karuzela produktów |
Najczęściej zadawane pytania
Czy potrzebuję Elementor Pro do WooCommerce, czy darmowa wersja wystarczy?
Elementor Pro jest wymagany do widgetów specyficznych dla WooCommerce (Obrazy produktów, Dodaj do koszyka, Karty danych produktów, Koszyk, Proces zamówienia itp.). Darmowa wersja Elementor nie zawiera tych widgetów. Możesz używać darmowej wersji do projektowania zwykłych stron, ale niestandardowe szablony WooCommerce wymagają Elementor Pro.
Czy mogę użyć Elementor do strony zamówienia?
Tak. Elementor Pro zawiera widget do zamówienia, który zastępuje domyślny układ zamówienia WooCommerce. Możesz dostosować pola formularza, podsumowanie zamówienia, sekcję płatności i ogólny układ. Należy jednak uważać na ciężkie dostosowania, które mogą zakłócić integracje bramek płatności—zawsze testuj pełny proces zakupu po wprowadzeniu zmian.
Jak mogę stworzyć różne układy stron produktów dla różnych kategorii?
W Kreatorze motywów Elementor możesz przypisać warunki wyświetlania do każdego szablonu. Stwórz jeden szablon strony produktu dla odzieży (z selektorami rozmiaru/koloru), inny dla produktów cyfrowych (bez informacji o wysyłce) itd. Każdy szablon stosuje się tylko do produktów w określonych kategoriach.
Czy Elementor spowalnia WooCommerce?
Elementor dodaje dodatkowy kod CSS i JavaScript do każdej strony. Na stronach produktów z wieloma widgetami może to zwiększyć czas ładowania o 0,5-1,5 sekundy w porównaniu do domyślnych szablonów WooCommerce. Użycie wbudowanych funkcji wydajności Elementor, optymalizacja obrazów oraz korzystanie z wtyczki do buforowania pomagają złagodzić ten wpływ. Dla sklepów krytycznych pod względem wydajności, rozważ lżejszy motyw, taki jak GeneratePress.
Czy mogę używać szablonów Elementor WooCommerce z dowolnym motywem?
Większość szablonów Elementor WooCommerce działa z dowolnym motywem, który obsługuje WooCommerce. Jednak niektóre motywy mogą mieć własne style stron produktów, które kolidują z szablonami Elementor. Motywy takie jak Astra, GeneratePress i OceanWP zostały zaprojektowane, aby działać bezproblemowo z Elementor i zapewniają najczystsze tło dla niestandardowych szablonów.
Zdobądź Elementor Pro do budowy sklepu WooCommerce
Uzyskaj dostęp do wszystkich widgetów WooCommerce, Kreatora motywów i ponad 100 szablonów Pro. Twórz niestandardowe strony produktów, archiwa sklepu i układy zamówień wizualnie.
Przeglądaj Elementor Pro →
