Jak stylizować formularze płatności Stripe w WordPress

Czy kiedykolwiek stworzyłeś idealną stronę, na której kolory są odpowiednie, a czcionki piękne, tylko po to, by odkryć, że Twój formularz płatności wygląda… nie na miejscu?

Byłem tam. Poświęcasz cały ten czas na to, aby Twoja strona wyglądała profesjonalnie i budziła zaufanie, ale generyczny przycisk „Zapłać teraz” lub domyślne style pól po prostu nie pasują do Twojej marki. Może to sprawić, że ostatni, najważniejszy krok do otrzymania zapłaty będzie odczuwany jako oderwany od reszty doświadczenia klienta.

Wtedy zrozumiałem, jak potężne mogą być kilka prostych poprawek stylistycznych. A dzięki odpowiedniej wtyczce do płatności nie musisz zatrudniać programisty ani grzebać w skomplikowanych plikach motywu, aby to zrobić.

Martwisz się, że to staje się zbyt techniczne? Nie martw się. Nie jest wymagane żadne doświadczenie w kodowaniu. Będę trzymać się prostych, krok po kroku instrukcji, a w przypadku najpotężniejszych dostosowań, chodzi naprawdę tylko o wiedzę, co skopiować i gdzie to wkleić.

W tym przewodniku pokażę Ci przyjazne dla początkujących sposoby dostosowywania formularzy płatności Stripe. Omówię wszystko, od wizualnych poprawek bez kodu po użycie niestandardowego CSS dla pełnej kontroli nad projektem.

Dostosowywanie formularzy płatności Stripe w WordPress

Dlaczego warto stylizować formularze płatności Stripe?

Ostatnim etapem każdej sprzedaży jest płatność, a projekt formularza płatności odgrywa w tym momencie ogromną rolę. Formularz, który wygląda czysto, profesjonalnie i jest spójny z resztą Twojej witryny, buduje zaufanie i zapewnia klientów, że ich informacje są bezpieczne.

Pomyśl o tym jak o fizycznym sklepie; spójna, dobrze oznakowana kasa wydaje się bezpieczniejsza niż generyczna. Te drobne detale projektowe tworzą płynne doświadczenie, które może bezpośrednio wpłynąć na Twoje wskaźniki konwersji.

Na szczęście nie musisz być projektantem, aby wprowadzić znaczące ulepszenia.

Stylizacja za pomocą wbudowanych ustawień

Ciągle używam WP Simple Pay do tworzenia formularzy płatności Stripe, ponieważ nie wymaga dodatkowych wtyczek ani nawet tworzenia skomplikowanego systemu koszyka.

Zawiera również kilka wbudowanych opcji, które pomogą Ci dostosować formularze za pomocą zaledwie kilku kliknięć.

Zanim zaczniemy, pomocne jest posiadanie WP Simple Pay skonfigurowanego na Twojej stronie. Jeśli jeszcze go nie używałeś, oto kilka przyjaznych dla początkujących samouczków, które pomogą Ci zacząć:

• Jak dodać formularz płatności do strony w WordPress (bez kodu)
• Jak dodać przycisk „Kup teraz” do Twojej witryny WordPress

Po utworzeniu formularza płatności Stripe za pomocą WP Simple Pay jesteś gotowy do jego stylizacji. Zacznijmy od tego, jak to zrobić bezpośrednio z panelu administracyjnego WordPress.

Jak dostosować przycisk płatności za pomocą WP Simple Pay

Najbardziej widoczną częścią Twojego formularza jest przycisk płatności. Aby szybko dostosować jego styl, możesz wybrać jeden z dwóch wyglądów bezpośrednio w ustawieniach formularza.

WP Simple Pay pozwala na zmianę stylów przycisków Przycisk realizacji zakupu, Przycisk płatności oraz Przycisk zastosowania kuponu w indywidualnych ustawieniach formularza.

Po prostu przejdź do formularza płatności, który chcesz edytować, i dostosuj styl przycisku w ustawieniach niestandardowego pola.

Najpierw przejdź do zakładki Formularze płatności i kliknij formularz płatności, który chcesz stylizować.

Następnie kliknij zakładkę Pola formularza. Tutaj możesz wybrać między Niebieskim Stripe lub Domyślnym dla przycisku płatności.

Oto szybki przegląd stylizowanych przycisków płatności:

Główny przełącznik: „Stylizacje z charakterem”

Aby zapewnić, że Twoje formularze od razu wyglądają świetnie, WP Simple Pay zawiera wbudowany arkusz stylów.

Nazywa się „Stylizacje z charakterem”, ponieważ stosuje domyślny projekt do układu formularza, odstępów i responsywnego zachowania.

Dla większości użytkowników pozostawienie tego włączonego jest najlepszym wyborem.

Style WP Simple Pay są zaprojektowane tak, aby od razu wyglądały świetnie bez wysiłku. Ale jeśli czujesz się pewnie i chcesz pustego płótna, aby pozwolić stylom Twojego motywu przejąć kontrolę, masz absolutnie taką możliwość!

Możesz wyłączyć nasze style, przechodząc do WP Simple Pay → Ustawienia → Ogólne → Zaawansowane i przełączając Stylizacje z charakterem na Wyłączone.

Teraz, gdy wiesz, jak działają wbudowane ustawienia dla WP Simple Pay, przyjrzyjmy się, jak możesz w pełni kontrolować projekt swojego formularza.

Niestandardowa droga — stylizacja formularza za pomocą CSS

Chociaż wbudowane ustawienia są świetne do szybkich zmian, możesz chcieć idealnie dopasować swój formularz płatności do unikalnej marki Twojej witryny. W tym celu służy CSS (Cascading Style Sheets). Jest to język, którego przeglądarki używają do stylizowania stron internetowych, a Ty możesz go użyć, aby w pełni kontrolować projekt swojego formularza.

Martwisz się, że robi się zbyt technicznie? Nie martw się. W przypadku większości zmian wystarczy skopiować i wkleić mały fragment tekstu we właściwe miejsce. Pokażę Ci dokładnie, jak.

Następne kroki zależą od typu motywu, którego używasz, czy to klasycznego motywu, czy motywu blokowego.

Klasyczne motywy używają starszego narzędzia Dostosuj i często opierają się na widżetach i szablonach stron. Z drugiej strony motywy blokowe używają nowszego Edytora witryny, który pozwala projektować całą witrynę za pomocą bloków.

Zacznijmy od klasycznych motywów.

Dodawanie niestandardowego CSS do Twojej witryny WordPress za pomocą narzędzia Dostosuj

Najbezpieczniejszym i najłatwiejszym miejscem do dodania niestandardowego CSS do Twojej witryny WordPress jest Niestandardowe ustawienia motywu. W ten sposób Twoje zmiany nie zostaną utracone podczas aktualizacji motywu.

1. Z panelu administracyjnego WordPress przejdź do Wygląd → Dostosuj.
2. Po lewej stronie otworzy się nowy panel, pokazujący podgląd Twojej witryny na żywo po prawej stronie.
3. Kliknij na zakładkę „Dodatkowy kod CSS” na dole panelu.

Pojawi się pole tekstowe, w którym możesz wkleić kod. Na przykład,

simpay-checkout-btn

{background-color:

#800080!important; /* To jest standardowy fioletowy kolor */}

Ten konkretny kod zmieni kolor przycisków płatności na wszystkich formularzach WP Simple Payment na Twojej stronie na fioletowy.

Każdy kod CSS dodany tutaj zostanie zastosowany do Twojej strony, umożliwiając nadpisanie domyślnych stylów Twojego motywu. Podczas pisania zobaczysz podgląd zmian na żywo po prawej stronie.

Innym przykładem jest stworzenie przepisu na kod CSS dodający jasnoszarą ramkę i zaokrąglone rogi do pól formularza płatności. Możesz wkleić to bezpośrednio do pola „Dodatkowy kod CSS” w narzędziu WordPress Customizer.

Używanie AI do tworzenia przepisów CSS

Nie chcesz pisać kodu CSS od zera? Nie musisz. Możesz użyć asystenta AI, takiego jak Gemini Pro, aby wygenerować niestandardowe przepisy. Po prostu opisz, co chcesz osiągnąć, prostym językiem. Na przykład, możesz zapytać:

„Napisz kod CSS, aby nadać przyciskowi WP Simple Pay subtelne tło gradientowe i pogrubić tekst.”

Sztuczna inteligencja jest potężnym partnerem w tworzeniu niestandardowych stylów, dając Ci świetny punkt wyjścia, który możesz następnie przetestować i dostosować na swojej stronie.”

Dodawanie niestandardowego CSS za pomocą edytora bloków

Jeśli Twoja strona korzysta z motywu blokowego, będziesz zarządzać swoim projektem za pomocą edytora całego witryny (Site Editor) zamiast narzędzia Customizer.

Najpierw przejdź do Wygląd → Edytor w swoim panelu WordPress.

W bocznym pasku po lewej stronie kliknij ikonę Strony. Następnie znajdź stronę, na której znajduje się formularz płatności WP Simple Pay.

Zobaczysz teraz Edytor WordPress. W prawym dolnym rogu ekranu kliknij Dodatkowy kod CSS, aby otworzyć pole.

Tym, co jest miłe w używaniu Edytora bloków, jest to, że zapewnia on określone miejsce na każdej stronie lub wpisie do dodawania kodu CSS, który będzie obowiązywał *tylko* dla tej jednej strony.

Jest to świetne do jednorazowych zmian. Na przykład, możesz łatwo zmienić kolor tytułu formularza płatności.

To tylko jeden ze sposobów, w jaki możesz użyć Edytora bloków do dostosowania formularza płatności na swojej stronie.

Pamiętaj, że nie musisz być programistą ani pisać kodu od zera. Wypróbuj Gemini Pro lub wybierz inne narzędzie AI, które pomoże Ci wymyślić przepisy.

Dodawanie niestandardowego CSS za pomocą fragmentów kodu

Chociaż narzędzia Customizer i Edytor bloków są bardzo przydatne do szybkich poprawek, potężniejszym i bardziej zorganizowanym podejściem jest użycie dedykowanego wtyczki, takiej jak WPCode, która przechowuje Twoje style bezpiecznie i oddzielnie od Twojego motywu.

WPCode to lekka i darmowa wtyczka, która pozwala bezpiecznie dodawać niestandardowe fragmenty kodu – takie jak CSS, HTML lub JavaScript – bez konieczności bezpośredniej edycji plików motywu.

Jest to doskonały sposób na utrzymanie Twoich niestandardowych rozwiązań w porządku i niezależności od motywu, dzięki czemu nigdy ich nie stracisz podczas aktualizacji.

Po zainstalowaniu i aktywowaniu WPCode przejdź do Fragmenty kodu → Dodaj fragment w swoim panelu WordPress.

Kliknij pole oznaczone jako Dodaj własny kod (nowy fragment) i nazwij swój fragment, na przykład Stylizacja formularza WP Simple Pay.

W sekcji Typ kodu wybierz z listy rozwijanej Fragment CSS.

Wklej swój kod CSS do pola kodu. Następnie kliknij Zapisz fragment i przełącz przełącznik u góry na Aktywny.

To wszystko! Twoje niestandardowe style są teraz aktywne na wszystkich formularzach płatności WP Simple Pay, a Ty możesz wrócić do tego fragmentu w dowolnym momencie, aby wprowadzić zmiany.

Moją ulubioną częścią korzystania z WPCode jest to, że możesz łatwo eksperymentować i wypróbować różne przepisy, aby uzyskać pożądany wygląd formularzy. Możesz użyć wtyczki, aby zastosować zupełnie inne „motywy” do swojego formularza za pomocą zwykłego kopiuj-wklej.

Oto jeden przykład, ale pamiętaj, że dzięki WPCode masz moc tworzenia nieograniczonych personalizacji dla swoich formularzy.

„Nowoczesna pływająca karta”

Ten styl nadaje formularzowi wrażenie premium, sprawiając, że wydaje się unosić nad stroną dzięki miękkiemu cieniowi i subtelnemu gradientowemu tłu. Jest to bardzo popularny wygląd w nowoczesnych aplikacjach internetowych.

Co robi:

✅ Używa czystych, prostych stylów pól, które pasują do nowoczesnej estetyki.

✅ Oprawia formularz w kontener z zaokrąglonymi rogami i miękkim cieniem.

✅ Stosuje delikatny, dwukolorowy szary gradient do tła.

Po prostu skopiuj i wklej dostarczony przepis do pola i kliknij Zaktualizuj.

WPCode zajmie się resztą. Możesz przejść do strony płatności, aby wyświetlić podgląd swojego formularza.

Gotowy do dostosowania formularzy płatności WordPress?

Jesteś teraz wyposażony we wszystkie narzędzia i techniki potrzebne do przekształcenia formularzy płatności.

Przeszliśmy od prostych, wbudowanych ustawień do potężnej i elastycznej kontroli niestandardowego CSS.

Dowiedziałeś się, jak dzięki potężnej wtyczce, takiej jak WPCode, możesz stworzyć niezawodne i zorganizowane miejsce dla wszystkich swoich poprawek projektowych.

Jeśli chcesz tworzyć niestandardowe formularze płatności Stripe dla swojej witryny WordPress, najlepszym sposobem jest użycie WP Simple Pay i WPCode.

Chcesz więcej wskazówek, jak tworzyć formularze płatności Stripe o wysokiej konwersji i strony docelowe z brandingiem bez kodowania? Polecam następujące przewodniki:

• Jak utworzyć stronę docelową płatności Stripe w WordPress
• Jak tworzyć idealne formularze płatności w WordPress (9 łatwych wskazówek)
• Jak używać szablonów formularzy płatności w WordPress, aby zwiększyć sprzedaż
• Jak tworzyć indywidualne wiadomości e-mail z potwierdzeniem w WordPress

Na co czekasz? Zacznij korzystać z WP Simple Pay już dziś!

Aby przeczytać więcej podobnych artykułów, śledź nas na X.