Cum să adăugați CSS personalizat la WP Simple Pay

Aveți nevoie să stilizați formularele de plată WP Simple Pay cu CSS personalizat? Există câteva modalități de a adăuga CSS personalizat pe site-ul dvs. WordPress pentru formularele dvs. și alte elemente ale paginii.

Puteți dezactiva stilurile „opinate” ale WP Simple Pay și puteți moșteni stilurile temei dvs. vizitând Simple Pay Pro → Setări → General → Avansat.

1. Editați direct fișierul foii de stil a temei dvs. (de obicei style.css). Fiți precaut cu orice actualizări ale temei care vă vor suprascrie modificările, motiv pentru care recomandăm #2 sau #3.
2. Adăugați un fișier CSS separat la tema dvs. și utilizați funcția wp_enqueue_style pentru a o referi în functions.php sau într-un plugin personalizat separat.
3. Adăugați CSS în antetul temei dvs. folosind pluginul gratuit WP Code. Accesați Snippete de cod → Antet & Subsol, apoi adăugați CSS-ul dvs. așa cum este prezentat mai jos.

Dacă trebuie să eliminați stilurile pluginului de pe anumite pagini, consultați acest snippet din biblioteca noastră de snippet-uri de cod.

Sfaturi de personalizare

În acest moment, nu avem un ghid de stil CSS pentru formularele de plată WP Simple Pay. Cea mai bună modalitate de a găsi numele claselor și ID-urilor pe care trebuie să le modificați este să inspectați elementele paginii folosind instrumentele pentru dezvoltatori ale browserului dvs.

Iată un ghid excelent pentru a începe să utilizați această metodă: Bazele elementului de inspecție: Personalizarea WordPress pentru utilizatorii DIY

Clasele și ID-urile elementelor CSS ale formularelor WP Simple Pay tind să înceapă cu simpay-.

Iată un exemplu în care ID-ul formularului este 83 și ID-ul câmpului text este 4:

<style>
#simpay-form-83 #simpay-text-4 { display: none; }
</style>

Iată un exemplu de modificare a culorii butonului de checkout din verde în albastru atunci când utilizați opțiunile de afișare a formularului încorporat sau suprapus.

<style>
.simpay-checkout-btn { background-color: #428bca !important; }
.simpay-checkout-btn:hover { background-color: #037ad0 !important; }
</style>