Bricks Builder i WooCommerce — sklep krok po kroku

Bricks Builder i WooCommerce to dziś jedno z najpotężniejszych połączeń w ekosystemie WordPress. Bricks daje pełną kontrolę nad wyglądem każdego elementu sklepu — karty produktu, strony koszyka, checkoutu i podziękowań — bez kompromisów wydajnościowych. W tym przewodniku budujesz kompletny sklep od instalacji WooCommerce, przez konfigurację motywu Bricks, aż po optymalizację PageSpeed i konwersji. Każdy etap jest zilustrowany konkretną konfiguracją, nie ogólnymi wskazówkami.

Dlaczego Bricks + WooCommerce, nie Elementor ani gotowy motyw?

Gotowe motywy WooCommerce jak Astra, Flatsome czy OceanWP są szybkie w starcie, ale ograniczone w customizacji głębszych elementów: karty produktu, filtrów, strony kategorii. Elementor daje wizualną kontrolę, ale generuje ciężki kod i problemy z wydajnością przy dużych katalogach. Bricks renderuje minimalistyczny HTML bez zbędnych wrapper divów — wynik to znacznie lżejszy DOM i lepsze Core Web Vitals, co bezpośrednio przekłada się na pozycje w Google Shopping i organiku.

Bricks od wersji 1.8 ma dedykowane elementy WooCommerce: produkt single, archiwum, koszyk, checkout i order confirmation — wszystkie w pełni edytowalne wizualnie. Możesz dosłownie zaprojektować każdy piksel sklepu, utrzymując kod na poziomie ręcznie pisanego szablonu. Dla klientów, którzy porzucili Elementor właśnie z powodów wydajnościowych, to argument zamykający rozmowę.

Krok 1: Instalacja i konfiguracja bazowa

Co instalujesz na starcie

• WordPress (najnowsza wersja, PHP 8.3+)
• Bricks Builder (licencja Personal lub Business)
• WooCommerce (z wtyczki w repozytorium WP)
• FiboSearch lub SearchWP — szybkie wyszukiwanie AJAX
• WooCommerce Subscriptions lub YITH plugins — opcjonalnie, zależnie od modelu biznesowego

Konfiguracja WooCommerce po instalacji

Przejdź przez kreator WooCommerce: waluta, kraj, typ produktów (fizyczne/wirtualne/pobieralne), metody płatności (Stripe, Przelewy24, PayU — dla Polski), metody dostawy. Na etapie płatności podłącz Stripe przez oficjalną wtyczkę Stripe for WooCommerce lub Przelewy24 przez ich oficjalny plugin. Nie używaj darmowych wtyczek od nieznanych autorów do bramek płatności — to ryzyko bezpieczeństwa.

Krok 2: Ustawienie Bricks jako aktywnego motywu

Po aktywacji Bricks przejdź do Bricks → Ustawienia → WooCommerce. Upewnij się, że opcja „Enable WooCommerce integration” jest włączona. Bricks automatycznie zarejestruje własne szablony dla stron WooCommerce: sklep (shop), produkt (single), koszyk (cart), checkout, zamówienie (order).

W tym samym miejscu ustaw „Products per page” — ile produktów pokazuje archiwum domyślnie. Zalecane: 12 lub 24, żeby wiersze siatki były pełne niezależnie od liczby kolumn (2, 3 lub 4). Ustaw też sortowanie domyślne: dla większości sklepów najlepiej konwertuje „Nowości” lub „Popularne”.

Tworzenie globalnego nagłówka i stopki sklepu

W Bricks → Szablony utwórz szablon Header z typem „Header” i warunkiem wyświetlania „Cała witryna”. Dodaj do nagłówka: logo, menu nawigacji, ikonę koszyka (element Bricks „Cart” z dynamiczną liczbą produktów) i pole wyszukiwania AJAX. Podobnie stwórz Footer. Dzięki Global Templates nagłówek i stopka są zarządzane w jednym miejscu i automatycznie pojawiają się na wszystkich stronach WooCommerce.

Krok 3: Szablon strony produktu (Single Product)

To najważniejszy szablon — tu podejmowana jest decyzja zakupowa. W Bricks → Szablony utwórz nowy szablon z typem „Produkt WooCommerce”. Bricks oferuje dedykowane elementy dynamiczne dla single product:

• Product Gallery — galeria główna z thumbnailami, obsługuje zoom i lightbox
• Product Title — H1 dynamicznie pobierany z WooCommerce
• Product Price — obsługuje ceny regularne, promocyjne i zakresy wariantów
• Product Rating — gwiazdki z liczby recenzji
• Product Add to Cart — przycisk z wyborem wariantów, ilości i dodaniem do koszyka
• Product Tabs — opis, atrybuty, recenzje w zakładkach
• Product Related — produkty powiązane dynamicznie
• Product Upsells — upsells zdefiniowane w WooCommerce

Układ konwertującej karty produktu

Sprawdzony układ: po lewej galeria (60% szerokości na desktop), po prawej kolumna z nazwą, ceną, wariantami, przyciskiem Add to Cart i krótkim opisem zaufania (ikony z „Bezpieczna płatność”, „Darmowa dostawa od X zł”, „30 dni na zwrot”). Poniżej — pełna sekcja z opisem, specyfikacją i recenzjami. Na mobile obie kolumny stackują się vertically. W Bricks ustaw to przez Container z direction: row na desktop i column na mobile (breakpoint 768px).

 

Krok 4: Archiwum produktów (Shop i kategorie)

Szablon archiwum to siatka produktów wyświetlana na stronie /sklep/, /kategoria/ i wynikach wyszukiwania. W Bricks utwórz szablon typu „Archive” z warunkiem WooCommerce Product Archive. Kluczowe elementy:

• Products Query Loop — dynamiczne pobieranie produktów z filtrowaniem i sortowaniem
• Product Card — Twój własny układ karty (thumbnail, nazwa, cena, gwiazdki, przycisk)
• Products Filter — filtry boczne lub górne (cena, atrybuty, kategorie)
• Pagination lub Infinite Scroll — ładowanie kolejnych produktów
• Active Filters — tagi aktywnych filtrów z możliwością usunięcia

Optymalizacja karty produktu w siatce

Karta produktu na archiwum musi ładować się błyskawicznie. Używaj atrybutu `loading=”lazy”` na wszystkich thumbnailach poza pierwszym wierszem (który dostaje `loading=”eager”` i `fetchpriority=”high”`). Ustaw stałą wysokość thumbnailów przez `aspect-ratio: 4/3` w CSS — eliminuje to Layout Shift (CLS) przy ładowaniu obrazów. Hover na karcie: delikatne podświetlenie lub pokaz „Dodaj do koszyka” — implementuj przez CSS `:hover`, nie JavaScript, żeby nie blokować głównego wątku.

Krok 5: Koszyk i checkout

WooCommerce od wersji 8.3+ oferuje blokowy checkout (Checkout Block), który lepiej integruje się z nowoczesnym stackiem. Jednak Bricks ma własny element Cart i Checkout kompatybilny z klasycznym shortcode WooCommerce. Dla Bricks użyj klasycznego shortcode `[woocommerce_checkout]` umieszczonego w elemencie Bricks Shortcode — i zaprojektuj wokół niego otoczenie: nagłówek, pasek zaufania, ikonki bezpieczeństwa.

Checkout powinien być maksymalnie prosty: minimalny nagłówek (logo + informacja o bezpieczeństwie), formularz danych, podsumowanie zamówienia po prawej stronie. Usuń zbędne pola przez wtyczkę Checkout Field Editor. Każde niepotrzebne pole to dodatkowe tarcie — a każde tarcie to porzucone zamówienie.

Krok 6: Wydajność — 90+ w PageSpeed z WooCommerce

Optymalizacja	Narzędzie	Wpływ na LCP
Obrazy produktów w WebP + lazy loading	Imagify / ShortPixel	Wysoki — często 1–2 s
Cache stron + fragment cache koszyka	LiteSpeed Cache / WP Rocket	Wysoki — TTFB
CSS per-strona (Bricks natywnie)	Bricks ustawienia	Średni — mniej CSS do parsowania
Hosting z LiteSpeed i HTTP/3	LH.pl, Seohost.pl, Kinsta	Wysoki — serwer jest fundamentem
Preload czcionek i hero image	Bricks Header lub wtyczka	Średni — LCP na starcie
Deferred JS wtyczek koszyka	WP Rocket / ręcznie	Średni — TBT i INP

Kluczowa zasada: nie ładuj JS koszyka i checkoutu na stronach, gdzie nie są potrzebne. WP Rocket i LiteSpeed Cache mają opcję „load JS/CSS only where needed” — włącz ją i przetestuj, czy koszyk nadal działa. To jeden ruch, który potrafi podnieść wynik PageSpeed o 8–15 punktów na stronie kategorii.

Krok 7: SEO sklepu WooCommerce w Bricks

Zainstaluj Rank Math lub Yoast SEO — oba mają dedykowane moduły WooCommerce. Skonfiguruj: meta title i description dla strony sklepu, szablony dla archiwów kategorii (np. „[Nazwa kategorii] — sklep online | Twoja Firma”), schema Product automatycznie dla każdego produktu (cena, dostępność, oceny). Rank Math robi to out-of-the-box; Yoast wymaga WooCommerce SEO jako dodatku.

Struktura URL sklepu ma znaczenie dla SEO. Domyślne WooCommerce daje `/produkt/nazwa-produktu` i `/kategoria-produktu/nazwa`. Możesz je skrócić do `/p/nazwa` i `/k/nazwa` przez ustawienia bezpośrednich odnośników w WooCommerce → Ustawienia → Zaawansowane. Krótsze URL są łatwiejsze do udostępniania i lepiej wyglądają w wynikach wyszukiwania.

FAQ: Bricks Builder i WooCommerce

Czy Bricks Builder w pełni zastępuje gotowy motyw WooCommerce?

Tak — Bricks od wersji 1.8 obsługuje wszystkie kluczowe szablony WooCommerce: produkt, archiwum, koszyk, checkout, potwierdzenie zamówienia. Możesz zrezygnować z dodatkowego motywu WooCommerce i projektować cały sklep wizualnie w Bricks bez pisania kodu.

Czy WooCommerce na Bricks Builder jest szybszy niż na Elementorze?

W testach porównawczych Bricks generuje znacznie lżejszy DOM i mniej CSS niż Elementor, co przekłada się na lepsze Core Web Vitals (szczególnie LCP i CLS). Na dużych katalogach różnica w czasie ładowania strony kategorii może sięgać 1–2 sekund — co ma bezpośredni wpływ na SEO i konwersję.

Jakich wtyczek do płatności używać w Polsce?

Przelewy24 i PayU to najczęściej wybierane bramki przez polskich klientów — oba mają oficjalne wtyczki WooCommerce. Stripe obsługuje karty i jest dobry dla klientów zagranicznych. Dla Blik Przelewy24 to nadal lider. Możesz integrować kilka bramek równolegle — WooCommerce pokazuje je jako opcje na checkoucie.

Czy mogę używać Bricks do projektowania maili zamówień WooCommerce?

Bricks nie projektuje maili transakcyjnych WooCommerce — do tego służy osobna wtyczka jak Kadence WooCommerce Email Designer lub YayMail. Maile WooCommerce to osobny system szablonów PHP. Możesz jednak stylować je przez CSS w ustawieniach WooCommerce lub wspomniane wtyczki.

 

Podsumowanie

Bricks Builder i WooCommerce to połączenie, które daje pełną kontrolę nad wyglądem sklepu bez kompromisów wydajnościowych. Kluczowe etapy: instalacja i konfiguracja WooCommerce, szablony Bricks dla single product i archiwum, zoptymalizowany checkout i optymalizacja PageSpeed. Sklep zbudowany tym stosem może osiągać 90+ w PageSpeed i jednocześnie wyglądać dokładnie tak, jak zaplanował projektant. To rzadkie połączenie w ekosystemie WordPress.