So fügen Sie benutzerdefiniertes CSS zu WP Simple Pay hinzu

Müssen Sie Ihre WP Simple Pay-Zahlungsformulare mit benutzerdefiniertem CSS gestalten? Es gibt mehrere Möglichkeiten, benutzerdefiniertes CSS zu Ihrer WordPress-Site für Ihre Formulare und andere Seitenelemente hinzuzufügen.

Sie können die „eigenwilligen Stile“ von WP Simple Pay deaktivieren und die Stile Ihres Themes übernehmen, indem Sie zu Simple Pay Pro → Einstellungen → Allgemein → Erweitert navigieren.

1. Bearbeiten Sie die Stylesheet-Datei Ihres Themes direkt (normalerweise style.css). Seien Sie jedoch vorsichtig bei Theme-Updates, die Ihre Änderungen überschreiben könnten. Deshalb empfehlen wir #2 oder #3.
2. Fügen Sie eine separate CSS-Datei zu Ihrem Theme hinzu und verwenden Sie die Funktion wp_enqueue_style, um darauf in Ihrer functions.php oder einem separaten benutzerdefinierten Plugin zu verweisen.
3. Fügen Sie CSS zum Header Ihres Themes mit dem kostenlosen Plugin WP Code hinzu. Gehen Sie zu Code-Snippets → Header & Footer und fügen Sie Ihr CSS wie unten gezeigt hinzu.

Wenn Sie die Plugin-Stile von einigen Seiten entfernen müssen, sehen Sie sich diesen Snippet in unserer Code-Snippet-Bibliothek an.

Tipps zur Anpassung

Derzeit haben wir keine CSS-Stilrichtlinien für WP Simple Pay-Zahlungsformulare. Der beste Weg, die Klassen- und ID-Namen zu finden, die Sie ändern müssen, ist die Inspektion der Seitenelemente mit den Entwicklertools Ihres Browsers.

Hier ist eine großartige Anleitung für den Einstieg in diese Methode: Grundlagen der Elementinspektion: WordPress für DIY-Benutzer anpassen

Die CSS-Klassen und IDs der WP Simple Pay-Formulare beginnen tendenziell mit simpay-.

Hier ist ein Beispiel, bei dem die Formular-ID 83 und die Textfeld-ID 4 ist:

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

Hier ist ein Beispiel, wie die Farbe des Checkout-Buttons von Grün auf Blau geändert wird, wenn die Anzeigeoptionen für eingebettete oder Overlay-Formulare verwendet werden.

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