Come aggiungere CSS personalizzato a WP Simple Pay

Hai bisogno di stilizzare i tuoi moduli di pagamento WP Simple Pay con CSS personalizzato? Ci sono diversi modi per aggiungere CSS personalizzato al tuo sito WordPress per i tuoi moduli e altri elementi della pagina.

Puoi disabilitare gli "stili predefiniti" di WP Simple Pay e ereditare gli stili del tuo tema visitando Simple Pay Pro → Impostazioni → Generali → Avanzate.

1. Modifica direttamente il file del foglio di stile del tuo tema (solitamente style.css). Fai attenzione però agli aggiornamenti del tema che sovrascriveranno le tue modifiche, motivo per cui consigliamo #2 o #3.
2. Aggiungi un file CSS separato al tuo tema e usa la funzione wp_enqueue_style per fare riferimento ad esso nel tuo functions.php o in un plugin personalizzato separato.
3. Aggiungi CSS all'intestazione del tuo tema utilizzando il plugin gratuito WP Code. Vai su Snippet di Codice → Intestazione e piè di pagina, quindi aggiungi il tuo CSS come mostrato di seguito.

Se hai bisogno di rimuovere gli stili del plugin da alcune pagine, consulta questo snippet nella nostra libreria di snippet di codice.

Suggerimenti per la personalizzazione

Al momento non disponiamo di una guida di stile CSS per i moduli di pagamento WP Simple Pay. Il modo migliore per trovare i nomi delle classi e degli ID che devi modificare è ispezionare gli elementi della pagina utilizzando gli strumenti per sviluppatori del tuo browser.

Ecco una guida eccellente per iniziare a utilizzare questo metodo: Basi dell'ispezione degli elementi: personalizzare WordPress per utenti fai-da-te

Le classi e gli ID CSS degli elementi del modulo WP Simple Pay tendono a iniziare con simpay-.

Ecco un esempio in cui l'ID del modulo è 83 e l'ID del campo di testo è 4:

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

Ecco un esempio di modifica del colore del pulsante di checkout da verde a blu quando si utilizzano le opzioni di visualizzazione del modulo Incorporato o Sovrapposto.

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