Blokowy koszyk i checkout w WooCommerce: co zmienia się dla sklepu i wtyczek

Od WooCommerce 8.3, wydanego w listopadzie 2023 roku, nowe sklepy dostają domyślnie checkout blokowy WooCommerce i koszyk złożony z bloków, a nie strony oparte na shortcode’ach. A co ze sklepami, które działały wcześniej? Nic się nie zmieniło, nikt ich automatycznie nie przełączył. Klasyczne strony koszyka i kasy chodzą dalej, dopóki administrator sam czegoś nie ruszy.

Piszę o stanie na grudzień 2023 roku. Będzie o tym, jak wygląda i jak się edytuje nową kasę, które wtyczki potrafią się na niej wyłożyć, jak dodać własne pola i kiedy w ogóle opłaca się migrować.

Czym checkout blokowy WooCommerce różni się od klasycznego shortcode’u?

Checkout blokowy to kasa poskładana z bloków edytora Gutenberg i renderowana w React. Nie powstaje już z szablonu PHP wywoływanego przez

. Blok to samodzielny kawałek strony (można go przesunąć, ukryć, skonfigurować w edytorze). W praktyce oznacza to, że układ, kolejność sekcji i teksty kasy zmieniasz bez kodu i bez grzebania w szablonach motywu. Fajna sprawa. Wszystkie kroki zamówienia są na jednej stronie, pola walidują się na bieżąco, a dane lecą do sklepu przez Store API, czyli interfejs, przez który przeglądarka gada z WooCommerce bez przeładowania formularza. Stara kasa? Ta stała na hookach PHP, czyli punktach w kodzie, do których wtyczki doklejały swoje funkcje.

Koszyk blokowy WooCommerce: co zyskuje klient i administrator

W koszyku blokowym klient zmienia ilości, usuwa produkty i wpisuje kupony bez przeładowania strony. Nowa suma i koszt dostawy pokazują się od razu. Administrator z kolei ustawia wygląd koszyka wprost w edytorze, bez proszenia developera o każdą drobnostkę. Do ruszenia są m.in.:

• podsumowanie zamówienia i kolejność jego elementów,
• blok produktów krzyżowych, czyli propozycji dodatkowych zakupów,
• widok pustego koszyka z własnym tekstem i produktami,
• przyciski przejścia do kasy i ich opisy.

Zgodność wtyczek z checkoutem blokowym: dlaczego część rozszerzeń przestaje działać

No i tu zaczynają się schody. Wtyczki, które dopisywały pola albo treści do kasy przez hooki PHP w rodzaju woocommerce_after_order_notes, w kasie blokowej nie mają się do czego podpiąć. Strona po prostu nie powstaje z szablonu PHP. Żeby rozszerzenie działało, musi korzystać z mechanizmów opisanych w dokumentacji bloków koszyka i kasy: rejestracji bloków wewnętrznych, rozszerzania Store API oraz slotów i filtrów po stronie JavaScript. Najczęściej obrywa się:

• bramek płatności,
• metod wysyłki i wyboru punktów odbioru,
• faktur i pola NIP,
• zgód marketingowych,
• programów lojalnościowych.

Objaw jest podstępny. Na starej kasie wszystko gra, a na nowej element wtyczki zwyczajnie znika. Bez błędu, bez komunikatu, bez niczego.

Pola w checkoutcie: jak dodać NIP, zgody i własne dane klienta

Dodatkowe pola w kasie blokowej dodajesz rozszerzeniem zgodnym z blokami. Klasyczne edytory pól, oparte na filtrze woocommerce_checkout_fields, tam ich nie pokażą. Oficjalne API do własnych pól w checkoutcie blokowym jest dopiero w przygotowaniu, więc na dziś każda wtyczka kombinuje po swojemu. W polskim sklepie chodzi zwykle o trzy rzeczy: pole NIP do faktury, checkbox zgody i uwagi do zamówienia. Treść zgód i sposób ich zbierania wynikają z przepisów o ochronie danych i prawach konsumenta (tu moim zdaniem nie ma co zgadywać, lepiej dać to do przejrzenia prawnikowi). A jeśli Twoja wtyczka bloków nie wspiera? K4.pl może przygotować na zamówienie rozszerzenie zgodne z nową kasą.

Jak sprawdzić sklep przed przejściem na checkout blokowy

Zanim cokolwiek przełączysz, ustal, czy każda wtyczka dotykająca koszyka i kasy deklaruje zgodność z blokami i z HPOS w WooCommerce. Potem test pełnego zamówienia na kopii sklepu. Nie na produkcji. Polecam taką kolejność:

1. Zrób kopię sklepu na serwerze testowym (staging).
2. Spisz wtyczki związane z płatnościami, wysyłką i polami formularza.
3. Otwórz stronę kasy w edytorze i sprawdź komunikaty o niezgodnych rozszerzeniach.
4. Złóż testowe zamówienie dla każdej metody płatności i dostawy.
5. Skontroluj e-maile, faktury i dane widoczne w panelu zamówienia.

Jak wrócić do klasycznego checkoutu WooCommerce? Prosto. W edytorze strony podmieniasz blok kasy na blok klasycznego checkoutu albo wstawiasz shortcode

. Z koszykiem to samo, tylko shortcode’em .

Czy przechodzić na checkout blokowy WooCommerce już teraz?

Zależy. Nowy sklep z prostym zestawem płatności i wysyłek spokojnie może startować od kasy blokowej. Sklep obwieszony rozszerzeniami kasy niech raczej poczeka, aż te staną się zgodne. Decydują w sumie cztery rzeczy: ile wtyczek modyfikuje zamówienie, czy masz własne pola, czy motyw jest niestandardowy i czy jest czas oraz ludzie na testy. Im więcej dodatków, tym większa szansa, że coś zniknie po cichu.

Kierunek jest jednak jasny, WooCommerce idzie w bloki. Więc nawet jeśli dziś zostajesz przy shortcode’zie, zaplanuj migrację. Przy wyborze nowych wtyczek patrz, czy są zgodne z koszykiem i kasą z bloków, a checkout blokowy WooCommerce w najbliższych miesiącach będzie po prostu kolejnym, naturalnym krokiem.

Najczęstsze pytania