Cum să stilizezi formularele de plată Stripe în WordPress

Ați creat vreodată site-ul perfect unde culorile sunt exact așa cum trebuie, fonturile sunt frumoase, doar pentru a descoperi că formularul dvs. de plată arată… nepotrivit?

Am trecut prin asta. Petreceți tot acest timp făcând site-ul dvs. să pară profesional și de încredere, dar butonul generic „Plătește acum” sau stilurile implicite ale câmpurilor pur și simplu nu se potrivesc cu marca dvs. Acest lucru poate face ca pasul final, cel mai important, de a fi plătit să pară deconectat de restul experienței clientului dvs.

Atunci am aflat cât de puternice pot fi câteva ajustări simple de stil. Și cu pluginul de plăți potrivit, nu aveți nevoie să angajați un dezvoltator sau să căutați prin fișiere complicate de temă pentru a realiza acest lucru.

Vă îngrijorați că devine prea tehnic? Nu vă faceți griji. Nu este necesară nicio experiență de codare aici. Mă voi limita la instrucțiuni simple, pas cu pas, iar pentru cele mai puternice personalizări, este doar o chestiune de a ști ce să copiați și unde să îl lipiți.

În acest ghid, vă voi arăta modalități prietenoase pentru începători de a vă personaliza formularele de plată Stripe. Voi acoperi totul, de la ajustări vizuale fără cod la utilizarea CSS personalizat pentru control complet asupra designului.

Personalizarea formularelor de plată Stripe în WordPress

De ce să vă stilizați formularele de plată Stripe?

Ultimul pas în orice vânzare este plata, iar designul formularului dvs. de plată joacă un rol important în acel moment. Un formular care arată curat, profesional și consistent cu restul site-ului dvs. construiește încredere și reasigură clienții că informațiile lor sunt în siguranță.

Gândiți-vă la asta ca la un spațiu comercial fizic; un tejghea de checkout coezivă, bine marcată, se simte mai sigură decât una generică. Aceste mici detalii de design creează o experiență fluidă care poate afecta direct ratele dvs. de conversie.

Din fericire, nu trebuie să fiți designer pentru a face îmbunătățiri semnificative.

Stilizare cu setări încorporate

Folosesc WP Simple Pay tot timpul pentru a crea formulare de plată Stripe, deoarece nu necesită pluginuri suplimentare sau chiar crearea unui sistem complicat de coș de cumpărături.

Include, de asemenea, câteva opțiuni încorporate pentru a vă ajuta să vă personalizați formularele în doar câteva clicuri.

Înainte de a începe, este util să aveți WP Simple Pay configurat pe site-ul dvs.. Dacă nu l-ați folosit încă, iată câteva tutoriale prietenoase pentru începători care vă vor ajuta să începeți:

• Cum să adăugați un formular de plată pe o pagină în WordPress (fără cod)
• Cum să adăugați un buton „Cumpără acum” pe site-ul dvs. WordPress

Odată ce ați creat un formular de plată Stripe cu WP Simple Pay, sunteți gata să îl stilizați. Să începem cu modul în care puteți face acest lucru direct din tabloul de bord WordPress.

Cum să personalizați butonul de plată cu WP Simple Pay

Cea mai proeminentă parte a formularului dvs. este butonul de plată. Pentru a-i oferi o ajustare rapidă a stilului, puteți alege între două aspecte direct din setările formularului.

WP Simple Pay vă permite să modificați stilurile butonului de finalizare a comenzii, butonului de plată și butonului de aplicare a cuponului în setările individuale ale formularului.

Pur și simplu vizitați formularul de plată pe care doriți să îl editați și ajustați stilul butonului în setările câmpului personalizat.

Mai întâi, navigați la fila Formulare de plată și faceți clic pe formularul de plată pe care doriți să îl stilizați.

Apoi, faceți clic pe fila Câmpuri formular. Aici puteți alege între Albastru Stripe sau Implicit pentru butonul de plată.

Iată o privire rapidă asupra butoanelor de plată stilizate:

Comutatorul principal: „Stiluri cu opinie”

Pentru a vă asigura că formularele dvs. arată grozav de la început, WP Simple Pay include o foaie de stiluri încorporată.

Se numește „Stiluri cu opinie” deoarece aplică un design implicit aspectului, spațierii și comportamentului receptiv al formularului.

Pentru majoritatea utilizatorilor, lăsarea acestei opțiuni activată este cea mai bună alegere.

Stilurile WP Simple Pay sunt concepute pentru a arăta grozav imediat, fără efort. Dar, dacă vă simțiți încrezător și doriți o pânză goală pentru a lăsa stilurile proprii ale temei dvs. să preia controlul, aveți absolut acea opțiune!

Puteți dezactiva stilurile noastre accesând WP Simple Pay → Setări → General → Avansat și comutând Stiluri cu opinie la Dezactivat.

Acum că știți cum funcționează setările încorporate pentru WP Simple Pay, să explorăm cum puteți prelua controlul complet asupra designului formularului dvs.

Modul personalizat — Stilizați-vă formularul cu CSS

În timp ce setările încorporate sunt grozave pentru schimbări rapide, s-ar putea să doriți să potriviți perfect formularul de plată cu marca unică a site-ului dvs. Aici intervine CSS (Cascading Style Sheets). Este limbajul pe care browserele îl folosesc pentru a stiliza paginile web și îl puteți folosi pentru a prelua controlul complet asupra designului formularului dvs.

Vă faceți griji că devine prea tehnic? Nu vă faceți. Pentru majoritatea modificărilor, este la fel de simplu ca și copierea și lipirea unui mic fragment de text în locul potrivit. Vă voi arăta exact cum.

Următorii pași depind de tipul de temă pe care o utilizați, fie o temă clasică, fie o temă bloc.

Teme clasice folosesc instrumentul mai vechi Customizer și se bazează adesea pe widget-uri și șabloane de pagină. Teme bloc, pe de altă parte, folosesc noul Editor de site, care vă permite să vă proiectați întregul site cu blocuri.

Să începem cu temele clasice.

Adăugarea de CSS personalizat pe site-ul dvs. WordPress utilizând instrumentul Customizer

Cel mai sigur și mai ușor loc pentru a adăuga CSS personalizat pe site-ul dvs. WordPress este Personalizatorul temei. În acest fel, modificările dvs. nu se vor pierde atunci când actualizați tema.

1. Din tabloul de bord WordPress, navigați la Aspect → Personalizare.
2. Se va deschide un panou nou în stânga, afișând o previzualizare live a site-ului dvs. în dreapta.
3. Faceți clic pe fila „CSS suplimentar” din partea de jos a panoului.

Va apărea o casetă de text unde puteți lipi codul. De exemplu,

simpay-checkout-btn

{culoare-de-fundal:

#800080!important; /* Acesta este un violet standard */}

Acest cod specific va schimba culoarea butoanelor de plată pe toate formularele WP Simple Payment de pe site-ul dvs. în violet.

Orice cod CSS pe care îl adăugați aici va fi aplicat site-ului dvs., permițându-vă să suprascrieți stilurile implicite ale temei dvs. Pe măsură ce tastați, veți vedea o previzualizare live a modificărilor dvs. în dreapta.

Un alt exemplu este crearea unei rețete de cod CSS pentru adăugarea unui fundal gri deschis și a colțurilor rotunjite la câmpurile formularului de plată. Puteți lipi acest lucru direct în caseta „CSS suplimentar” din Personalizatorul WordPress.

Utilizarea AI pentru a crea rețete CSS

Nu doriți să scrieți CSS de la zero? Nu trebuie. Puteți folosi un asistent AI precum Gemini Pro pentru a genera rețete personalizate pentru dvs. Doar descrieți ce doriți să realizați în engleză simplă. De exemplu, ați putea cere:

„Scrie cod CSS pentru a oferi butonului WP Simple Pay un fundal subtil cu gradient și pentru a face textul aldine.”

AI-ul este un partener puternic pentru crearea de stiluri personalizate, oferindu-vă un punct de plecare excelent pe care îl puteți apoi testa și ajusta pe site-ul dvs.”

Adăugarea de CSS personalizat utilizând editorul de blocuri

Dacă site-ul dvs. folosește o temă de blocuri, veți gestiona designul folosind editorul complet al site-ului în loc de Personalizator.

Mai întâi, accesați Aspect → Editor în tabloul de bord WordPress.

În bara laterală din stânga, faceți clic pe pictograma Pagini. Apoi, găsiți pagina care găzduiește formularul de plată WP Simple Pay.

Veți vedea acum Editorul WordPress. Din colțul din dreapta jos al ecranului, faceți clic pe CSS suplimentar pentru a deschide caseta.

Lucrul grozav la utilizarea Editorului de blocuri este că oferă un loc specific pe fiecare pagină sau postare pentru a adăuga CSS care se va aplica *doar* acelei pagini unice.

Acest lucru este excelent pentru modificări unice. De exemplu, puteți schimba cu ușurință culoarea titlului formularului de plată.

Aceasta este doar o modalitate prin care puteți utiliza Editorul de blocuri pentru a personaliza formularul de plată pe site-ul dvs.

Amintiți-vă, nu trebuie să fiți dezvoltator sau să scrieți codul de la zero. Încercați Gemini Pro sau alegeți un alt instrument AI pentru a vă ajuta să creați rețete.

Adăugarea de CSS personalizat cu fragmente de cod

În timp ce Personalizatorul și Editorul de blocuri sunt ambele foarte utile pentru ajustări rapide, o abordare mai puternică și mai organizată este utilizarea unui plugin dedicat precum WPCode, care vă păstrează stilurile în siguranță și separate de tema dvs.

WPCode este un plugin gratuit și ușor, care vă permite să adăugați în siguranță fragmente de cod personalizate – cum ar fi CSS, HTML sau JavaScript – fără a fi nevoie să editați direct fișierele temei dvs.

Este o modalitate excelentă de a vă păstra personalizările organizate și independente de tema dvs., astfel încât să nu le pierdeți niciodată în timpul unei actualizări.

După ce ați instalat și activat WPCode, accesați Fragmente de cod → Adăugare fragment în tabloul de bord WordPress.

Faceți clic pe caseta pe care scrie Adăugați propriul cod personalizat (Fragment nou) și dați un nume fragmentului dvs., cum ar fi Stilizare formular WP Simple Pay.

Sub Tip cod, selectați Fragment CSS din meniul derulant.

Continuați și lipiți CSS-ul în caseta de cod. Apoi, faceți clic pe Salvare fragment și comutați comutatorul din partea de sus la Activ.

Acesta este! Stilurile dvs. personalizate sunt acum live pe formularele de plată WP Simple Pay și puteți reveni la acest fragment oricând pentru a face modificări.

Partea mea preferată la utilizarea WPCode este că puteți experimenta cu ușurință și puteți încerca diferite rețete pentru a face ca formularele dvs. să arate așa cum doriți. Puteți folosi pluginul pentru a aplica „teme” complet diferite formularului dvs. doar prin copiere și lipire.

Iată un exemplu, dar țineți cont că aveți puterea de a crea personalizări nelimitate pentru formularele dvs. cu WPCode.

„Cardul plutitor modern”

Acest stil conferă formularului o senzație premium, făcându-l să pară că plutește de pe pagină cu o umbră discretă și un fundal cu gradient subtil. Este un aspect foarte popular în aplicațiile web moderne.

Ce face:

✅ Folosește stiluri de câmp curate, simple, care se potrivesc esteticii moderne.

✅ Încadrează formularul într-un container cu colțuri rotunjite și o umbră discretă.

✅ Aplică un gradient gri blând, în două tonuri, pe fundal.

Pur și simplu copiați și lipiți rețeta furnizată în casetă și faceți clic pe Actualizare.

WPCode face restul. Puteți accesa pagina de plată pentru a previzualiza formularul.

Sunteți gata să vă personalizați formularele de plată WordPress?

Acum sunteți echipat cu toate instrumentele și tehnicile de care aveți nevoie pentru a vă transforma formularele de plată.

Am călătorit de la setări simple, încorporate, la controlul puternic și flexibil al CSS-ului personalizat.

Ați învățat cum, cu un plugin puternic precum WPCode, puteți crea un spațiu fiabil și organizat pentru toate modificările dvs. de design.

Dacă doriți să creați formulare de plată Stripe personalizate pentru site-ul dvs. WordPress, cea mai bună modalitate este să utilizați WP Simple Pay și WPCode.

Doriți mai multe sfaturi despre cum să creați formulare de plată Stripe cu conversie ridicată și pagini de destinație de marcă fără cod? Vă recomand următoarele ghiduri:

• Cum să creezi o pagină de destinație pentru plăți Stripe în WordPress
• Cum să creați formulare de plată perfecte în WordPress (9 sfaturi ușoare)
• Cum să utilizați șabloane de formulare de plată în WordPress pentru a crește vânzările
• Cum să creați mesaje de confirmare prin e-mail per formular în WordPress

Ce mai așteptați? Începeți astăzi cu WP Simple Pay!

Pentru a citi mai multe articole ca acesta, urmăriți-ne pe X.