Comment ajouter du CSS personnalisé à WP Simple Pay

Avez-vous besoin de styliser vos formulaires de paiement WP Simple Pay avec du CSS personnalisé ? Il existe plusieurs façons d'ajouter du CSS personnalisé à votre site WordPress pour vos formulaires et autres éléments de page.

Vous pouvez désactiver les « styles opinionnés » de WP Simple Pay et hériter des styles de votre thème en visitant Simple Pay Pro → Paramètres → Général → Avancé.

1. Modifiez directement le fichier de feuille de style de votre thème (généralement style.css). Méfiez-vous cependant des mises à jour du thème qui écraseront vos modifications, c'est pourquoi nous recommandons les options 2 ou 3.
2. Ajoutez un fichier CSS séparé à votre thème et utilisez la fonction wp_enqueue_style pour le référencer dans votre functions.php ou un plugin personnalisé séparé.
3. Ajoutez du CSS à l'en-tête de votre thème à l'aide du plugin gratuit WP Code. Allez dans Extraits de code → En-tête et pied de page, puis ajoutez votre CSS comme indiqué ci-dessous.

Si vous avez besoin de désenregistrer les styles du plugin de certaines pages, consultez cet extrait dans notre bibliothèque d'extraits de code.

Conseils de personnalisation

Pour le moment, nous n'avons pas de guide de style CSS pour les formulaires de paiement WP Simple Pay. La meilleure façon de trouver les noms de classes et d'identifiants que vous devez modifier est d'inspecter les éléments de la page à l'aide des outils de développement de votre navigateur.

Voici un excellent guide pour commencer à utiliser cette méthode : Bases de l'inspection d'éléments : Personnaliser WordPress pour les utilisateurs DIY

Les classes et identifiants CSS des éléments de formulaire WP Simple Pay ont tendance à commencer par simpay-.

Voici un exemple où l'ID du formulaire est 83 et l'ID du champ de texte est 4 :

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

Voici un exemple de modification de la couleur du bouton de paiement de vert à bleu lors de l'utilisation des options d'affichage de formulaire intégrées ou superposées.

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