In diesem Tutorial richten wir mit einem gratis WordPress Abonnement Plugin einen bezahlpflichtigen Mitgliederbereich ein. Die Basis für dieses Video bilden die vorherigen 3 Komplettanleitungen, wo wir gemeinsam vom Hosting über die Installation von WordPress, Mailkonten und unserer Website alls komplett einmal geminsam und Schritt-für-Schritt gemacht haben:
WordPress Mitgliederbereich selbst erstellen – Anleitung
Erstelle deinen eigenen WordPress Mitgliederbereich. Schritt für Schritt Anleitung für geschützte Inhalte, Login und Registrierung.
Website für Verein erstellen – Teil 1: Grundlagen, Über uns & Kontakt
Website für Verein erstellen – Anleitung Teil 1: wir treffen grundlegende Einstellungen und bauen die ersten Seiten inklusive Formular und Spendenfunktion.
Hosting einrichten: Günstiges Webhosting & WordPress Schritt-für-Schritt Anleitung
Die eigene Website beginnt mit dem richtigen Hosting. Lass uns also Schritt für Schritt günstiges Webhosting sowie einen Mail-Account einrichten und auch gleich WordPress installieren.
Ergänzend zu der detaillierten Anleitung im Video zum einfachen mitmachen bekommst du hier noch einmal einige Infos zu unseren getroffenen Einstellungen und Änderungen.
Seiten für unser WordPress Abonnement Plugin aktualisieren und neue einrichten
Nachfolgend ein Überblick zu den bereits vorhandenen Seiten, deren teilweise Umbennung in Bezug auf Titel und URL-Struktur sowie die beiden neuen Seiten Premium Registrierung und Premium:
Neu: Premium Registrierung
/premium-registrierung
Übergeordnete Seite: Mitglied werden
Neu: Premium
/premium
Mitglieder
/mitglieder
AGB
/agb
Vielen Dank
/thank-you -> Umbenennung in /danke
Passwort zurücksetzen
/password-reset -> Umbenennung in /password-zuruecksetzen
Profil
/membership-profile -> Umbenennung in /profil
Anmeldung für Mitglieder
/membership-login -> Umbenennung in /login
Registrierung -> Umbenennung in Kostenlose Registrierung
/membership-registration -> Umbenennung in /kostenlose-registrierung
Join Us -> Umbenennung in Mitglied werden
/membership-join -> Umbenennung in /mitglied-werden
Nachfolgend können wir im WordPress Backend im Plugin WP-Mitgliedschaft unter Einstellungen, Allgemeine Einstellungen auch unsere neuen deutschen Bezeichnungen einmal sauber verlinken:
Custom CSS für die Navigation zwischen Gratis und Premium
Hier nur ergänzend zum Video einmal für den Container, wo die beiden Buttons drin sind:
Erweitert -> CSS ID -> bereich-umschalter
Eigene CSS:
/* Umschaltleiste */
#bereich-umschalter {
display: flex;
justify-content: space-between;
gap: 10px;
background: #f5f5f5;
padding: 10px;
border-radius: 12px;
}
/* Kostenloser Bereich */
#kostenloser-bereich {
flex: 1;
background: linear-gradient(to right, #e0e0e0 0%, #e0e0e0 50%);
color: #333;
text-align: center;
padding: 15px 0;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
}
/* Premium Bereich */
#premium-bereich {
flex: 1;
background: linear-gradient(to right, #ffcc66 0%, #ff9900 100%);
color: white;
text-align: center;
padding: 15px 0;
font-weight: 700;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
}
/* Hover-Effekte */
#kostenloser-bereich:hover {
background: linear-gradient(to right, #d6d6d6 0%, #d6d6d6 100%);
}
#premium-bereich:hover {
background: linear-gradient(to right, #ffaa33 0%, #ff8800 100%);
}
/* Optional: aktive Premium-Anzeige */
#premium-bereich.aktiv {
box-shadow: 0 0 12px rgba(255, 136, 0, 0.4);
transform: scale(1.02);
}
Und natürlich auch noch den beiden Buttons eine CSS ID zuweisen. Zuerst klicken wir auf das Widget vom linken Button -> Erweitert -> CSS ID -> kostenloser bereich
und dann klicken wir auf das Widget vom zweiten Button und tragen bei Erweitert -> CSS ID -> premium bereich
Fertig 😊
Das Ganze haben wir jeweils einmal gemacht auf der Seite mit dem Titel „Premium“ (/premium) und einmal auf der Seite mit dem Titel „Mitglieder“ (/mitglieder).
Tipp: wenn der Mitgliederbereich umfangreicher werden soll, kannst du natürlich mit dem Elementor Theme Builder auch eine zusätzliche Kopfzeile nur für die URLS aller Seiten vom Mitgliedsbereich bauen und diese Seiten dann auch von der normalen Menüführung ausschließen. Hier habe ich es mit den zwei Buttons und ein wenig Styling mal ganz einfach gehalten, damit das Tutorial übersichtlich bleibt.
PayPal Abo kündigen Link für dein Mitglied ordentlich einbinden
Das machen wir auf der Seite mit dem Namen „Anmeldung für Mitglieder“ mit der URL-Struktur „/login“.
Diese Seite dient als Login, wenn dein Mitglied noch nicht angemeldet ist:
Doch wenn dein Mitglied angemeldet ist und oben rechts in der Menüführung auf Login klickt, ändert sich die Seite dynamisch zu einer Übersichtsseite. Hier blenden wir auch einen Shortcode ein, sodass ein Mitglied selbst das vorhandene Abo bei Bedarf kündigen kann. Du selbst kannst das natürlich auch in deinem PayPal oder Stripe Account. Hier schauen wir uns exemplarisch nur einmal PayPal an. Und damit keine nervige „Your are not logged in“ Nachricht erscheint, wenn dein Mitglied noch nicht angemeldet ist, fügen wir ein bisschen Custom Code ein. Einfach mitmachen wie im Video und fertig 😊.
Also hier der Code, den du auf der „Anmeldung für Mitglieder“ (/login) Seite unter dem Shortcode für das Login Formlar in einem neuen Container einfügst:
[swpm_paypal_subscription_cancel_link merchant_id="ABC123XYZ" anchor_text="Abonnement von PayPal kündigen"]
Ersetze „ABC123XYZ“ einfach durch deine tatsächliche Paypal-Händler-ID. Diese findest du nach Login in deinem Paypal Account unter Kontoeinstellungen, Unternehmensprofil, Geschäftsangaben. Einmal nach unten scrollen und zack, da ist sie.
Damit nun nicht diese nervige meldung erscheint, wenn die Login Seite auch tatsäch als Login (bei ausgeloggtem Zustand) fungiert, tragen wir nachfolgendes ein nach Klick auf das Shortcode Widget mit obigem Code unter Erweitert, Layout, CSS-ID:
abobearbeiten
Dann unter Erweitert Klick auf (ganz unten) Eigene CSS und nachfolgendes einfügen:
/* Standardmäßig ausblenden */
selector#abobearbeiten {
display: none !important;
}
/* Bei eingeloggtem User wieder einblenden */
body.logged-in selector#abobearbeiten {
display: block !important;
}
Fertig 😊 Dann erscheint der PayPal kündigen Button nur, wenn dein mitglied auch angemeldet ist. Das sollte dann so aussehen:
Bedeutet auch vereinfacht ausgedrückt: wenn ein Mitglied seine Mitgliedschaft kündigen möchte, dann musst du das nicht in deinem PayPal (oder Stripe) Account über die ID des Users machen, sondern kannst bei der Anfrage durch eine Mail diesbezüglich einfach antworten: Klick einmal nach deiner Anmeldung auf Login und ganz unten findest du den Link „Abonnement von PayPal kündigen“. So einfach geht´s.
Natürlich kannst auch du unliebsame Mitglieder in deinem eigenen Paypal Account kündigen.
Antworten auf Individualisierungen oder spezielle Fragen ...
… findest du hier: in der offiziellen Dokumentation vom Simple Membership Plugin.
Kalkulationstool für Gebühren Zahlungsanbieter
Sicherlich nehmen online Zahlungsabwickler eine kleine Gebühr doch bedenke auch, dass einige Transaktionen ohne die Einbindung von beispielsweise PayPal oder Stripe einfach niemals stattgefunden hätten, weil die Bequemlichkeit der Möglichkeit zum Bezahlen fehlt.
Nachfolgend also ein kleiner Rechner, mit dem du direkt planen kannst, welcher Betrag nach Gebühren bei einem online Bezahldienst bei dir ankommt. Tipp: Einfach Gebühren direkt mit einplanen und fertig.
Bezahldienst-Gebührenrechner
Mit diesem Rechner kannst du ermitteln, welchen Betrag du angeben musst, damit nach Abzug der Gebühren dein gewünschter Betrag bei dir ankommt.
