Bricks Builder i WooCommerce to połączenie, które zyskuje coraz większe zainteresowanie wśród agencji i deweloperów WordPress. Od wersji 1.9 Bricks oferuje wbudowane wsparcie WooCommerce — można budować szablony stron produktu, archiwum, koszyka i checkoutu bez dodatkowych wtyczek. W tym artykule pokazuję, jak skonfigurować sklep WooCommerce w Bricks Builder: od wyboru podejścia do szablonowania, przez budowanie stron produktu, po optymalizację UX dla wyższych konwersji.
Dlaczego Bricks Builder sprawdza się przy budowaniu sklepu WooCommerce?
Trzy główne powody, dla których deweloperzy wybierają Bricks do projektów e-commerce:
- Czysty kod i prędkość — sklep WooCommerce z Bricks ładuje mniej JS i CSS niż z Elementorem. Prędkość ładowania stron produktu bezpośrednio wpływa na konwersje i Core Web Vitals (sygnał rankingowy Google).
- Pełna kontrola nad szablonami WooCommerce — zamiast modyfikować pliki PHP motywu, budujesz szablony stron produktu i archiwum w wizualnym edytorze, z pełnym dostępem do danych WooCommerce przez elementy dynamiczne.
- Jednorazowa licencja — Bricks Builder kosztuje 149 USD za nieograniczoną liczbę stron (jednorazowo), co przy budowaniu wielu sklepów dla klientów jest znacznie tańsze niż Elementor Pro (599 USD/rok za 1000 stron).
Konfiguracja WooCommerce w Bricks Builder: pierwsze kroki
Przed budowaniem szablonów WooCommerce w Bricks, upewnij się, że masz: zainstalowaną i skonfigurowaną wtyczkę WooCommerce (ustawienia sklepu, produkty, bramki płatności), aktywny Bricks Builder jako motyw, wyłączony motyw WooCommerce (jeśli używasz Bricks jako pełnego theme builder).
Theme Builder dla WooCommerce w Bricks
Bricks Theme Builder pozwala przypisać szablony do różnych typów stron. Dla WooCommerce tworzysz osobne szablony dla:
- Single Product — strona produktu (tytuł, galeria, cena, opis, przycisk Add to Cart)
- Product Archive — lista produktów, kategoria produktów
- Cart — strona koszyka
- Checkout — strona checkoutu
- My Account — panel klienta
- Shop — główna strona sklepu
Żeby przypisać szablon, idź do Bricks → Templates → New Template, wybierz typ (np. “Single Product”), zbuduj układ i w warunkach przypisania (Conditions) wybierz “All Products” lub konkretne kategorie.
Budowanie strony produktu w Bricks Builder
Strona produktu (Single Product) to kluczowy element sklepu — tutaj następuje decyzja o zakupie. Elementy, które muszą być na stronie produktu:
Elementy WooCommerce dostępne w Bricks
Bricks oferuje dedykowane elementy WooCommerce, które dynamicznie pobierają dane konkretnego produktu:
- Product Title — tytuł produktu (H1)
- Product Gallery — galeria zdjęć produktu z lightbox i miniaturami
- Product Price — cena regularna i promocyjna
- Product Rating — gwiazdki ocen
- Product Short Description — krótki opis produktu
- Add to Cart — przycisk dodania do koszyka z wyborem wariantów
- Product Meta — SKU, kategorie, tagi
- Product Tabs — zakładki z opisem, atrybutami i opiniami
- Related Products — sekcja powiązanych produktów
Układ strony produktu: best practices
Standardowy układ strony produktu to dwie kolumny: galeria po lewej (60-65% szerokości), informacje zakupowe po prawej (35-40%). Na mobile obie kolumny ustawiają się jedna pod drugą — galeria na górze, informacje zakupowe poniżej. Kluczowe dla konwersji: przycisk Add to Cart musi być visible bez scrollowania (above the fold) zarówno na desktop jak i mobile.
Strona archiwum produktów: filtry i układ siatki
Archiwum produktów w WooCommerce wyświetla listę produktów — kategorię, wyniki wyszukiwania, sklep główny. Bricks pozwala budować te widoki z pełną kontrolą nad layoutem:
Query Loop dla archiwum produktów
Element Query Loop w Bricks to narzędzie do wyświetlania dynamicznych list treści. Dla archiwum WooCommerce konfigurujesz Query Loop z typem zapytania “WooCommerce Products” — automatycznie pobiera produkty z aktywnej kategorii/archiwum. Wewnątrz pętli budujesz kartę produktu (Product Card) z elementami: Product Image, Product Title, Product Price, Add to Cart Button.
Filtry i sortowanie
Domyślne filtry WooCommerce (filtr po cenie, atrybutach, kategoriach) można integrować z Bricks przez shortcody lub bloki WooCommerce. Dla zaawansowanego filtrowania z AJAX (bez przeładowania strony) popularne wtyczki to FiboFilters, YITH WooCommerce Ajax Product Filter lub JetSmartFilters (dla zaawansowanych użytkowników Bricks z JetPlugins).
Checkout i koszyk: optymalizacja dla konwersji
Checkout to miejsce, gdzie sklep traci najwięcej potencjalnych klientów. Badania Baymard Institute pokazują, że średnio 70% użytkowników porzuca koszyk przed finalizacją zakupu. Kluczowe obszary optymalizacji checkoutu w Bricks:
Minimalizacja pól checkoutu
Im mniej pól do wypełnienia, tym wyższe konwersje. WooCommerce domyślnie ma wiele opcjonalnych pól (firma, drugie imię, province). Usuń niepotrzebne przez WooCommerce → Settings → Advanced → Account & Privacy lub przez funkcję w functions.php.
One-Page Checkout
Koszyk i checkout na jednej stronie (one-page checkout) eliminuje konieczność przechodzenia między krokami. Wtyczka WooCommerce One Page Checkout pozwala to osiągnąć. W Bricks możesz budować layout jednej strony z oboma sekcjami.
Wyraźny pasek postępu
Pasek pokazujący kroki checkoutu (Koszyk → Dane → Płatność → Potwierdzenie) redukuje poczucie niepewności u klienta i zmniejsza liczbę porzuceń. W Bricks możesz go zbudować jako statyczny element w szablonie Checkout.
WooCommerce i Core Web Vitals: optymalizacja prędkości
WooCommerce dodaje własne skrypty i style do każdej strony sklepu. Kilka technik optymalizacji wydajności dla sklepów Bricks + WooCommerce:
| Problem | Rozwiązanie |
|---|---|
| WooCommerce ładuje CSS na każdej stronie | Ogranicz ładowanie CSS WooCommerce tylko do stron sklepu przez Perfmatters lub ręczną konfigurację |
| Duże galerie produktów spowalniają LCP | Konwertuj obrazki produktów na WebP, używaj srcset, preload głównego obrazka produktu |
| Skrypty koszyka i checkout blokują renderowanie | Defer skrypty WooCommerce poza stroną Cart/Checkout przez WP Rocket lub Perfmatters |
| Wiele wariantów produktu = dużo JS | Ogranicz liczbę wariantów do minimum, rozważ lazy loading paneli wariantów |
Podsumowanie: sklep WooCommerce w Bricks Builder
Bricks Builder i WooCommerce to połączenie dające deweloperom pełną kontrolę nad wyglądem i wydajnością sklepu. Wbudowane elementy WooCommerce od Bricks 1.9 eliminują potrzebę osobnych wtyczek do szablonowania, a czysty kod Bricks przekłada się na lepsze Core Web Vitals i konwersje. Przy budowaniu sklepu skup się na: szybkiej stronie produktu z galeria above the fold, uproszczonym checkoucie i optymalizacji prędkości przez konwersję obrazków na WebP i selektywne ładowanie skryptów WooCommerce.
Najczęstsze pytania o WooCommerce z Bricks Builder
Czy Bricks Builder wspiera WooCommerce?
Tak, od wersji 1.9 Bricks Builder ma wbudowane wsparcie WooCommerce — dedykowane elementy do budowania stron produktu, archiwum, koszyka i checkoutu. Wcześniejsze wersje wymagały zewnętrznych integracji lub wtyczek. Bricks 1.9+ pozwala budować kompletny sklep bez dodatkowych narzędzi.
Czy Bricks Builder jest lepszy od Elementora dla sklepów WooCommerce?
Bricks generuje szybsze strony produktu (mniej CSS i JS) i ma jednorazową licencję na nieograniczone strony — co jest dużą zaletą przy agencyjnym budowaniu wielu sklepów. Elementor Pro ma dojrzalszy ekosystem WooCommerce z wieloletnią historią integracji i więcej gotowych szablonów sklepów. Dla złożonych projektów e-commerce z dużą liczbą niestandardowych integracji Elementor może być bezpieczniejszym wyborem.
Jak dodać filtry produktów w sklepie Bricks Builder + WooCommerce?
Bricks nie ma wbudowanych filtrów produktów z AJAX. Możliwości: (1) Domyślne widżety filtrów WooCommerce (filtr ceny, tagów) jako shortcode lub blok — bez AJAX; (2) Wtyczka YITH WooCommerce Ajax Product Filter — filtrowanie bez przeładowania strony; (3) JetSmartFilters (płatna) — zaawansowane filtry kompatybilne z Query Loop Bricks. Wybór zależy od budżetu i poziomu złożoności filtrowania.
Jak zoptymalizować prędkość sklepu WooCommerce w Bricks Builder?
Kluczowe działania: konwertuj obrazki produktów na WebP (LiteSpeed Cache lub ShortPixel), włącz per-page CSS w Bricks Settings, ogranicz ładowanie skryptów WooCommerce do stron sklepu przez Perfmatters, włącz cache na poziomie serwera (LiteSpeed Cache lub WP Rocket), użyj CDN dla plików statycznych. Sprawdź wyniki przez PageSpeed Insights osobno dla strony produktu, archiwum i checkoutu.