So erstellen Sie angepasste Zahlungsbuttons in WordPress

Möchten Sie benutzerdefinierte Zahlungsbuttons für Ihre WordPress-Website erstellen?

Mit dem „Button“-Block können Sie das Erscheinungsbild Ihrer Zahlungsbuttons direkt im Block-Editor bearbeiten. So können Sie Ihre Zahlungsbuttons an Ihr Branding und das Gesamtdesign Ihrer Website anpassen und Ihren Kunden gleichzeitig ein schnelles und einfaches Checkout-Erlebnis bieten.

In diesem Artikel zeigen wir Ihnen Schritt für Schritt, wie Sie einen benutzerdefinierten Zahlungsbutton erstellen, mit dem Kunden auschecken können, ohne Ihre Website verlassen zu müssen.

Anpassen Ihrer Zahlungsbuttons

Der WordPress-Block-Editor ermöglicht das Hinzufügen von Elementen wie Preistabellen, Callouts und Buttons zu jedem Beitrag oder jeder Seite in WordPress.

Wenn Sie bereits WP Simple Pay verwenden, um Zahlungen auf Ihrer Website zu akzeptieren, können Sie Ihre Zahlungsformulare problemlos mit diesen Elementen integrieren. So können Sie Overlay-Zahlungsformulare direkt auf Ihrer Website starten oder Benutzer zu einem externen Stripe Checkout-Formular weiterleiten.

Weitere Informationen finden Sie in unserem Leitfaden: Zahlungsformular-Typen: Eingebettet vs. Overlay vs. Stripe Checkout.

Mit dem „Button“-Block können Sie Stil und Erscheinungsbild des Zahlungsbuttons anpassen, einschließlich Breite, Text und Farboptionen.

Für dieses Tutorial erstellen wir einen gestylten Zahlungsbutton, wie den unten gezeigten.

Während Sie Ihren Zahlungsbutton so konfigurieren können, dass das Zahlungsformular auf einer von Stripe gehosteten Checkout-Seite gestartet wird, zeigt dieses spezielle Beispiel, wie Sie das Formular direkt auf Ihrer Website starten. Dies ist eine großartige Möglichkeit, Kaufabbrüche zu reduzieren, da es für Ihre potenziellen Kunden weniger Schritte erfordert.

Legen wir los!

Schritt 1: Zahlungsformular erstellen

Wenn Sie bereits WP Simple Pay verwenden, um Zahlungsformulare für Ihre WordPress-Website zu erstellen, müssen Sie ein Zahlungsformular mit dem erweiterten Drag-and-Drop-Formular-Builder erstellen.

Wenn Sie das Plugin noch nicht installiert und aktiviert haben, besuchen Sie einfach die Preisseite, wählen Sie den besten Plan für Ihre spezifischen Bedürfnisse und aktivieren Sie ihn auf Ihrer Website.

Weitere Informationen finden Sie in unserer Schritt-für-Schritt-Anleitung: So installieren Sie WP Simple Pay.

Nachdem Sie das Plugin aktiviert haben, führt Sie der Einrichtungsassistent durch die Verbindung Ihres Stripe-Kontos.

Wenn die Einrichtung abgeschlossen ist, sehen Sie eine Erfolgsseite, auf der Sie auf Zahlungsformular erstellen klicken können.

Als Nächstes sehen Sie auf der Seite mit den Zahlungsformular-Vorlagen mehrere Optionen. Wählen Sie Zahlungsformular.

Stellen Sie im Tab Allgemein sicher, dass Sie den Titel und die Beschreibung Ihres Formulars hinzufügen. Sie müssen auch On-Site-Zahlungsformular für den Typ auswählen und das Kontrollkästchen neben Im Overlay-Modal öffnen aktivieren.

Als Nächstes fügen Sie im Tab Zahlung Ihren Preisbetrag hinzu und wählen Einmalig. Sie können auch die Kontrollkästchen neben jeder der angebotenen Zahlungsmethoden aktivieren.

Als Nächstes können Sie im Tab Formularfelder ganz einfach Formularfelder hinzufügen, entfernen und bearbeiten.

Um mehr über die Anpassung Ihrer Formularfelder zu erfahren, lesen Sie unsere Anleitung zum Sammeln von Kundendaten während des Checkouts in WordPress.

Wenn Sie mit der Konfiguration Ihres Zahlungsformulars fertig sind, klicken Sie auf Veröffentlichen.

Schritt 2: Veröffentlichen Sie Ihr Zahlungsformular

Nachdem Sie Ihr Zahlungsformular mit WP Simple Pay erstellt haben, können Sie es zu einer Seite oder einem Beitrag auf Ihrer Website hinzufügen.

Navigieren Sie zuerst zu der Seite oder dem Beitrag, auf der/dem Ihr Formular erscheinen soll.

Klicken Sie dann auf das + Symbol, um den Buttons Block einzublenden.

Wählen Sie die erste Option für Buttons aus der Liste. Dadurch können Sie das gerade erstellte Zahlungsformular aus dem Dropdown-Menü auswählen.

Sobald Ihr Button zur Seite hinzugefügt wurde und Sie das Zahlungsformular ausgewählt haben, klicken Sie auf das Styles Symbol.

Hier können Sie die Schriftart, Farbe, Typografie und mehr des Buttons ändern.

Wenn Sie mit dem Stil des Zahlungsbuttons zufrieden sind, klicken Sie auf Speichern oder Aktualisieren.

Wenn Sie Ihre Seite aufrufen und den Zahlungsbutton testen, sollte er als Overlay-Modal angezeigt werden, damit Ihre Kunden ihre Transaktionen direkt auf der Seite abschließen können.

Das war's! Wir hoffen, dieser Artikel hat Ihnen geholfen zu lernen, wie Sie einen benutzerdefinierten Zahlungsbutton für Ihre WordPress-Website erstellen.

Wenn Ihnen dieser Artikel gefallen hat, sollten Sie sich auch unsere Anleitung zum Erstellen eines Overlay-Zahlungsformulars in WordPress ansehen.

Worauf warten Sie noch? Starten Sie noch heute mit WP Simple Pay!

Um weitere Artikel wie diesen zu lesen, folgen Sie uns auf X.