So starten Sie ein Overlay von anderen Schaltflächen oder Links

Dieser Artikel beschreibt das Hinzufügen von benutzerdefiniertem Code zu Ihrer WordPress-Website und richtet sich an Entwickler. Obwohl wir selbst keine kundenspezifischen Entwicklungsdienste anbieten, empfehlen wir Ihnen, wenn Sie Hilfe benötigen, dringend Seahawk Media.

Benutzerdefinierte Code-Snippets werden wie besehen bereitgestellt, und es gibt keine Garantie, dass sie über mehrere Versionen von WP Simple Pay hinweg weiterhin funktionieren.

Schritt 1: URL des Buttons aktualisieren

Um ein Stripe Checkout- oder Overlay-Zahlungsformular über einen benutzerdefinierten Button-Link zu starten, müssen Sie die URL des Button-Links ändern. Die Anpassung der URL des Button-Links hängt davon ab, wie Sie Ihren Inhalt bearbeiten. Aktualisieren Sie die URL auf die folgende:

#form-176

Ersetzen Sie 176 durch die ID des Zahlungsformulars, das Sie starten möchten. Sie finden die ID Ihres Zahlungsformulars auf dem Bearbeitungsbildschirm des Formulars. Die Formular-ID ist der numerische Teil des Simple Pay-Shortcodes, wie unten gezeigt.

Binden Sie als Nächstes den WP Simple Pay-Zahlungsformular-Shortcode wie gewohnt in Ihre Seite ein: . Dadurch wird das Zahlungsformular auf der Seite ausgegeben, aber wir werden es in den nächsten Schritten ausblenden, um sicherzustellen, dass nur der benutzerdefinierte Button-Link sichtbar ist.

Schritt 2: Benutzerdefinierten JavaScript-Code hinzufügen

Es gibt viele Möglichkeiten, benutzerdefinierten JavaScript-Code zu Ihrer WordPress-Website hinzuzufügen. Sehen Sie sich unseren empfohlenen Leitfaden zum Hinzufügen von Code-Snippets an. Wir empfehlen, JavaScript über das kostenlose Plugin WP Code in den Footer Ihres Themes einzufügen. Gehen Sie zu Code Snippets → Header & Footer und fügen Sie den benutzerdefinierten Javascript-Code in den Footer-Bereich ein, wie unten gezeigt.

<script>
( function( $ ) {
	// Update comma separated list with payment form ID(s) to launch.
	var ids = [ '123' ];

	// Do not modify.
	ids.forEach( function( id ) { 
		$( 'a[href~="#form-' + id + '"]' ).click( function( e ) {
			e.preventDefault(); 
			$( '.simpay-form-' + id + ' .simpay-payment-btn' ).click();
			$( '#simpay-modal-control-' + id ).click(); 
		}); 
	});
})( jQuery );
</script>

Ersetzen Sie die 123 in Zeile 4 durch die ID Ihres Zahlungsformulars. Wenn Sie mehrere Buttons auf einer Seite erstellen, können Sie eine durch Kommas getrennte Liste von Zahlungsformular-IDs hinzufügen, die Sie starten möchten.

Schritt 3: Benutzerdefinierten CSS-Code hinzufügen

Es gibt viele Möglichkeiten, benutzerdefinierten CSS-Code zu Ihrer WordPress-Website hinzuzufügen. Wir haben einige Möglichkeiten in unserer Dokumentation skizziert. Wir empfehlen, CSS über das kostenlose Plugin WP Code in den Header Ihres Themes einzufügen. Gehen Sie zu Code Snippets → Header & Footer und fügen Sie Ihr CSS in den Header-Bereich ein:

<style>
body:not(.simpay-form-preview) .simpay-form-wrap {
  display: none;
} 
</style>

Dadurch wird die Standardausgabe des -Shortcodes ausgeblendet, sodass nur der benutzerdefinierte Button-Link sichtbar ist.