Jak dodać formularz do karty produktu Woocommerce? Poznaj naszą wtyczkę DC Product Form

Nie każdy produkt w sklepie internetowym to zwykła koszulka czy świeczka zapachowa. Czasem sprzedajemy coś, co wymaga od klienta podania dodatkowych danych

– adresu nieruchomości, parametrów technicznych, tekst dla personalizacji produktu czy innych szczegółów niezbędnych do realizacji zamówienia.

Standardowy przycisk „Dodaj do koszyka” w WooCommerce nie został stworzony z myślą o takich scenariuszach. Nie zbierze żadnych dodatkowych informacji i nie przekaże ich dalej do zamówienia. A to oznacza konieczność korzystania z płatnych rozszerzeń lub pisania własnych integracji.

W tym wpisie pokażę, jak rozwiązać ten problem bez żadnych abonamentów, dodatkowych opłat ani kodowania.
Poznasz naszą wtyczkę Design Cart: Product Form, która pozwala połączyć dowolny formularz Fluent Forms z WooCommerce i zbierać potrzebne dane bezpośrednio przy produkcie — elegancko, skutecznie i za darmo.

To rozwiązanie powstało z myślą o realnych problemach właścicieli sklepów i jest częścią szerszego podejścia do Tworzenia sklepów internetowych, w którym funkcjonalność dopasowuje się do produktu, a nie odwrotnie.

 

Dlaczego powstała DC Product Form

Wtyczka DC Product Form nie powstała w teorii – tylko z realnej potrzeby projektu.
Pracowaliśmy nad sklepem internetowym z certyfikatami energetycznymi, gdzie cały proces zamówienia musiał być maksymalnie zautomatyzowany. Problem w tym, że taki produkt wymaga od klienta podania mnóstwa danych: adresu nieruchomości, metrażu, roku budowy, typu ogrzewania, właściciela… i tak dalej.

Każdy rodzaj certyfikatu wymagał zupełnie innego zestawu pól.
Standardowy przycisk „Dodaj do koszyka” w WooCommerce był więc kompletnie bezużyteczny — nie da się w nim zebrać żadnych dodatkowych informacji.

Oczywiście istnieją płatne rozwiązania, jak WS Form PRO Product Add-Ons czy WooCommerce Product Fields, ale wszystkie mają jedną wspólną cechę: abonamenty. Miesięczne lub roczne, często uzależnione od liczby instalacji. I właśnie tego chciałem uniknąć.

Zamiast inwestować w kolejne komercyjne dodatki, postanowiłem wykorzystać to, co już działa znakomicie — Fluent Forms. To jeden z najlepszych generatorów formularzy dla WordPressa, a w połączeniu z WooCommerce mógł stać się potężnym narzędziem do obsługi zamówień niestandardowych.

Tak narodziła się DC Product Form — lekka, darmowa integracja, która pozwala dodać dowolny formularz Fluent Forms bezpośrednio do karty produktu WooCommerce.
Nie ma żadnych limitów, wersji PRO ani ukrytych opłat. Formularz możesz dowolnie projektować, dopasować do produktu, a wszystkie dane automatycznie zapisują się w zamówieniu.

Efekt?
Klient otrzymał rozwiązanie klasy premium bez żadnych kosztów licencyjnych, a my stworzyliśmy kolejne narzędzie, które pozwala unikać zbędnych wydatków i zachować pełną kontrolę nad własnym sklepem.

 

Jak działa Design Cart: Product Form

Wtyczka Design Cart: Product Form została zaprojektowana tak, by działała w pełni automatycznie i bez potrzeby modyfikowania szablonu sklepu.
Jej zadanie jest proste — połączyć formularz Fluent Forms z produktem WooCommerce i przekazać dane klienta dalej, aż do zamówienia.

Każdy produkt może mieć swój własny formularz — wystarczy wybrać go z listy w edycji produktu. Dla jednego produktu możesz zbierać dane adresowe, dla innego parametry techniczne, a dla kolejnego po prostu krótką wiadomość od klienta.

Na froncie, formularz wyświetla się bezpośrednio na karcie produktu, tuż obok galerii i ceny. Klient wypełnia pola, wybiera ilość, a następnie klika „Zamów”.
W tym momencie wtyczka zbiera wszystkie dane z formularza, łączy je z informacjami o produkcie i dodaje kompletne zamówienie do koszyka.

Co ważne — DC Product Form działa z każdym motywem WooCommerce. Nie wymaga ingerencji w szablon, nadpisywania plików ani instalowania dodatkowych wtyczek.

Dodatkowo rozszerzenie usuwa oryginalny przycisk „Dodaj do koszyka” i zastępuje go własnym, nowoczesnym przyciskiem „Zamów” z wbudowanym polem ilości, obsługującym wygodne przyciski plus/minus.
Całość wygląda estetycznie, spójnie z motywem sklepu i działa bezbłędnie — niezależnie od tego, czy używasz motywu własnego, czy gotowego szablonu WooCommerce.

 

 

 

 

Instalacja i aktywacja

Instalacja Design Cart: Product Form jest tak prosta, jak każdej innej wtyczki WordPress — cały proces zajmuje mniej niż minutę.

1. Pobierz plik ZIP 👉 Pobierz Design Cart: Product Form

2. W panelu WordPress przejdź do Wtyczki → Dodaj nową → Wyślij wtyczkę na serwer

3. Wskaż pobrany plik ZIP i kliknij Zainstaluj teraz

4. Po zakończeniu instalacji wybierz Aktywuj wtyczkę

🧩 Uwaga:
Wtyczka DC Product Form działa w połączeniu z Fluent Forms, dlatego jeśli nie masz jeszcze zainstalowanego tego generatora formularzy – zrób to w pierwszej kolejności.
Możesz pobrać darmową wersję z oficjalnego repozytorium WordPress:
https://wordpress.org/plugins/fluentform/

Po aktywacji oba rozszerzenia automatycznie się zintegrowały.
Od tej chwili możesz przypisać formularz Fluent Forms do dowolnego produktu WooCommerce i zacząć zbierać dane od klientów bez żadnych dodatkowych ustawień.

 

Tworzenie formularza w Fluent Forms

Zanim przypiszesz formularz do produktu, musisz go najpierw utworzyć w Fluent Forms.
To prosty kreator typu drag & drop, dzięki któremu w kilka minut zbudujesz nawet bardzo rozbudowany formularz zamówienia.

1. Przejdź w panelu WordPress do Fluent Forms → All Forms → Add New.

2. Wybierz pusty formularz lub gotowy szablon i nazwij go np. „Zamów certyfikat energetyczny”.

3. Dodaj potrzebne pola – np. imię, nazwisko, adres, numer działki, adres nieruchomości czy inne dane wymagane przy danym produkcie.

4. Kliknij Save Form (Zapisz formularz).

Gotowe!
Twój formularz jest teraz dostępny z listy we wtyczce DC Product Form i możesz przypisać go do konkretnego produktu WooCommerce.

 

Przypisanie formularza do produktu

Gdy formularz jest już gotowy, czas połączyć go z konkretnym produktem w WooCommerce.
Zrobisz to bezpośrednio z poziomu edycji produktu — wystarczy kilka kliknięć.

1. Przejdź do Produkty → Wszystkie produkty i otwórz ten, do którego chcesz dodać formularz.

2. W sekcji Dane produktu → Ogólne znajdziesz nowe pole „Formularz Fluent Forms”.

3. Z rozwijanej listy wybierz odpowiedni formularz, który wcześniej utworzyłeś w Fluent Forms.

4. Kliknij Zaktualizuj lub Opublikuj, aby zapisać zmiany.

Od teraz formularz będzie automatycznie wyświetlany na karcie produktu, dokładnie tam, gdzie znajdował się przycisk „Dodaj do koszyka”.
Klient wypełni pola, kliknie „Zamów”, a wszystkie dane trafią do koszyka i później do zamówienia w panelu administracyjnym WooCommerce.

 

Efekt na stronie

Po zapisaniu produktu z przypisanym formularzem wszystko działa automatycznie — bez kodowania i bez edycji szablonu.

Na karcie produktu zobaczysz:

• formularz Fluent Forms, który możesz dowolnie rozbudować (pola tekstowe, adresy, wybory, załączniki itd.),

• estetyczne pole ilości z przyciskami plus/minus,

• oraz duży przycisk „Zamów”, który zastępuje standardowe „Dodaj do koszyka”.

Po kliknięciu przycisku „Zamów” dane z formularza są natychmiast przesyłane do WooCommerce — pojawiają się zarówno w koszyku, jak i w szczegółach zamówienia po stronie administratora.
W efekcie cały proces zamówienia przebiega płynnie i profesjonalnie, niezależnie od rodzaju produktu.

 

Dane formularza w zamówieniu

Wszystkie informacje, które klient wpisze w formularzu, zostają automatycznie zapisane i przypisane do konkretnego produktu.
Nie trzeba nic konfigurować — wtyczka robi to sama.

Dane formularza są widoczne w trzech miejscach:

• w koszyku, tuż pod nazwą produktu,

• w podsumowaniu zamówienia, które klient widzi przed złożeniem zakupu,

• oraz w panelu administratora, w szczegółach każdego zamówienia.

Każde pole formularza jest zapisywane jako meta dane (tzw. order item meta), dzięki czemu wszystkie informacje pozostają powiązane z konkretną pozycją zamówienia — nawet jeśli klient kupił kilka różnych produktów z różnymi formularzami.

 

Stylizacja

Wtyczka została przygotowana tak, aby bez problemu dopasować się do każdego motywu WooCommerce — niezależnie od jego struktury czy frameworka CSS.

Cały formularz jest opakowany w kontener #dc-product-form, co pozwala łatwo nadpisywać wygląd poszczególnych elementów bez ryzyka naruszenia innych stylów na stronie.

Własne style wtyczki znajdują się w pliku:
👉 assets/css/dcpf.css

Dzięki zastosowaniu !important w kluczowych miejscach, formularz zachowuje spójny wygląd nawet w przypadku rozbudowanych motywów z własnymi regułami CSS.

Przykładowa stylizacja:

#dc-product-form input,
#dc-product-form select {
  border-radius: 6px;
  border-color: #ccc;
}

Możesz oczywiście dodać własne reguły w motywie potomnym lub dodatkowym arkuszu stylów, aby idealnie dopasować formularz do projektu graficznego sklepu.

 

Kod i pobranie

• Pełna wtyczka: Design Cart: Product Form

• Autor: Design Cart

• Licencja: GPL

• Pobierz wersję 1.0.0:

 

Podsumowanie

Design Cart: Product Form to praktyczne rozwiązanie dla sklepów, które potrzebują zebrać dodatkowe dane od klienta jeszcze przed złożeniem zamówienia.
Wtyczka eliminuje konieczność kupowania drogich add-onów, łącząc Fluent Forms z WooCommerce w prosty i w pełni darmowy sposób.

Można ją dowolnie rozbudowywać — dodać własne walidacje pól, efekty animacji po kliknięciu „Zamów”, czy dopasować styl do layoutu sklepu.
To lekka, elastyczna i całkowicie niezależna integracja, która po prostu robi to, czego brakuje w standardowym WooCommerce.