Wie kann ich den Kaufen-Button erst dann sichtbar machen, nachdem der Interessent die Nutzungsbedingungen für das Produkt akzeptiert hat?

Du hast ein Produkt und möchtest, dass der Kaufen-Button erst dann erscheint, nachdem der Interessent über eine Checkbox die Nutzungsbedingungen für dieses Produkt akzeptiert hat:

Dabei kann der Kaufen-Button also erst nach Akzeptieren der Bedingungen sichtbar gemacht werden oder aber der Interessent wird direkt nach Akzeptieren der Bedingungen direkt zur Kasse-Seite in den Warenkorb weitergeleitet.

In dieser Anleitung zeigen wir dir, wie du mit Hilfe eines Formulars solch eine Einschränkung beim Kauf deines Produktes umsetzen kannst. Wir greifen dabei auf die Standard Formulare zu, welche du ab dem EXPERT Paket unter der Rubrik "Webseite" > "Formulare" findest. 

Das Ganze lässt sich aber auch mit einem Divi Kontaktformular Modul realisieren, welches du dann schon ab dem STARTER Paket nutzen kannst. Wenn du diesen Weg gehen möchtest, kannst du in unserer Anleitung den Punkt 3 komplett überspringen.

1. Wie kann so eine Nutzungsbedingung aussehen?

Nehmen wir mal an, dass du einen Online Kurs im Gesundheitswesen anbietest und möchtest aber vor dem Kauf ausdrücklich darauf hinweisen, dass dieser Kurs ein reines Präventionsangebot ist und keine notwendige medizinische Behandlung ersetzt. Vielleicht unter Umständen auch, dass die Teilnahme am Kurs auf eigene Gefahr und eigenes gesundheitliches Risiko hin erfolgt und du als Autor / Leiter des Kurses von Haftungsansprüchen ausgeschlossen bist. 

Damit diese Nutzungsbedingung auch wirksam ist, sollte ja vom Interessent eine Interaktion erfolgen: Das Akzeptieren dieser Bedingung. 

Wie der genaue Inhalt einer solchen Nutzungsbedinung lautet oder in welchem Zusammenhang diese steht, kannst du als Autor frei bestimmten. Bitte beachte aber, dass es sich hierbei nicht um Kaufbedingungen handeln sollte, die auf der Kasse-Seite auftreten werden. Denn ab diesem Zeitpunkt stehen wir, die Spreadmind GmbH, als Reseller im Vordergrund und der Käufer akzeptiert unsere Verkaufsbedingungen.  

2. Wichtige Produkt Einstellungen

Im Bearbeitungsmodus des Produktes gehst du zur Optionen-Box "Produkt Einstellungen" und aktivierst unter dem Abschnitt Button-Optionen die Option Automatische Ausgabe des "Kaufen"-Buttons deaktivieren über das Anwählen der Checkbox:

Klicke danach in der Optionen-Box "Veröffentlichen" auf den orangenen Button, um die Einstellung zu speichern. Hast du ein neues Produkt erstellt, lautet der Button "Veröffentlichen". Nimmst du eine Anpassung an einem existierenden Produkt vor, lautet der Button "Aktualisieren":

3. Neues Formular für das Akzeptieren der Nutzungsbedingung erstellen

Gehe im Backend deiner Plattform zu "Webseite" > "Formulare" und erstelle ein neues Formular:

 Trage in das Popup den Formulartitel und optional eine -beschreibung ein: 

Du kannst später beim Einbinden des Formulars auf deiner Verkaufsseite festlegen, ob der Titel und die Beschreibung jeweils angezeigt werden soll oder nicht.

Die Formularbeschreibung kann optional schon dein Text der Nutzungsbedingung sein. Muss es aber nicht. Du kannst auch auf der Verkaufsseite den Inhalt der Nutzungsbedingung aufführen und hast dort dann auch die Möglichkeit, diese besonders auffällig zu gestalten, bspw. mit einer roten Hintergrundfarbe o.ä. 

Klicke auf Formular erstellen, um in den Formular-Editor weitergeleitet zu werden.

Das Formular selbst benötigt nur ein einziges Feld: Eine Checkbox, die angewählt werden muss, damit das Formular abgesendet wird und der Produktkauf möglich ist. 

Im Bearbeitungsmodus des Formulars findest du das Checkbox-Feld unter den "Standardfeldern" – durch Klick auf das Feld wird dieses deinem Formular hinzugefügt:

Wir benötigen nur eine Checkbox, daher wollen wir die restlichen entfernen. Das nehmen wir in den Feldeinstellungen vor.

Um die Feldeinstellungen zu öffnen, klickst du einfach auf das hinzugefügte Feld und kannst dann rechts in den allgemeinen Feldeinstellungen optional einen Titel oder Beschreibung eintragen:

Scrolle nun weiter nach unten zum Abschnitt "Labels" und trage im ersten Label deinen gewünschten Inhalt ein. Klicke bei den beiden anderen Labels auf das Minus-Icon, um diese zu entfernen:

Als letztes wollen wir das Checkbox-Feld noch als ein Pflichtfeld markieren. Diese Option findest du weiter unten beim Abschnitt "Regeln" und kannst dort den Haken für "erforderlich" setzen:

Speicher die Einstellung rechts oben über den Button " Aktualisieren":

Nun sollten wir uns überlegen, was passieren soll, nachdem der Interessent die Bedingung akzeptiert hat. Hier stehen uns zwei Möglichkeiten zu Verfügung.

Nach Akzeptieren der Bedingung (= nach Absenden des Formulars) soll... 

a) ... auf der gleichen Seite der Kaufen-Button angezeigt werden (folge den Schritten aus Punkt 3.1)

b) ... der Interessent direkt auf die Kasse-Seite in den Warenkorb weitergeleitet werden (folge den Schritten aus Punkt 3.2)

3.1 Variante A:
Nach Akzeptieren der Bedingung Kaufen-Button sichtbar machen

Nachdem du dein Formular gespeichert hast, gehst du über das DropDown-Menü "Einstellungen" zu "Bestätigungen": 

Klicke bei der "Standard Bestätigung" auf "Bearbeiten" (Option erscheint, sobald du mit der Maus über die Zeile fährst):

Du wirst nun in den Bearbeitungsmodus der Bestätigung weitergeleitet. 

Als "Art der Besätigung" lassen wir Text (s.u. Bild 2). Dadurch verschwindet nach Absenden des Formulars dieses und an dessen Stelle erscheint eine Text. In unserem Fall soll hier also der Kaufen-Button erscheinen.  

Dafür benötigen wir den Kaufen-Button Shortcode, den du im Bearbeitungsmodus deines Produktes bei der Optionen-Box "Produkt-Einstellungen" findest und fügen diesen in das Nachrichten Feld ein:

Bild oben: Wir befinden uns hier im Bearbeitungsmodus des Produktes.

Bild oben: Wir befinden uns hier in den Formulareinstellungen im Bearbeitungsmodus der Standard-Bestätigung.

Klicke unten auf den Button "Bestätigung speichern". 

Wir haben nun alle Einstellungen vorgenommen und müssen das Formular nur noch auf die Verkaufsseite einbinden. Deine Verkaufsseite kann entweder die Produktseite selbst sein (Backend "Produkte" > Bearbeitungsmodus deines Produktes) oder eine Seite, die du im Backend unter "Webseite" > "Seiten" erstellt hast. 

Wie du das Formular einfügst, zeigen wir in dieser Anleitung unter Punkt 1 (egal ob beim Produkt oder auf einer Seite): Wie füge ich ein Kontaktformular in eine Seite ein?

In unserem Beispiel haben wir das Nutzungsbedingung-Formular direkt auf die Produktseite eingebunden. 

Ausgabe Produktseite im Frontend:

Button-Text "Weiter":

Standardmäßig lautet der Button eines Formulars Absenden. Beim Akzeptieren der Nutzungsbedingung für ein Produkt ist das weniger sinnvoll, daher haben wir den Button Text einfach in Weiter geändert. 

Diese Einstellung nimmst du Backend unter "Webseite" > "Formulare" in den "Formulareinstellungen" bei der Abschnittsbox Formular-Button beim Button Text vor: 

Klicke am Ende der Seite auf den Button "Einstellungen speichern".

Möchtest du ein anderes Design für den Formular-Button nutzen? Dann hilft dir diese Anleitung: Wie kann ich den Button eines Kontaktformulars gestalterisch anpassen?

3.2 Variante B:
Nach Akzeptieren der Bedingung direkt zur Kasse-Seite weiterleiten

Nachdem du dein Formular gespeichert hast, gehst du über das DropDown-Menü "Einstellungen" zu "Bestätigungen": 

Klicke bei der "Standard Bestätigung" auf "Bearbeiten" (Option erscheint, sobald du mit der Maus über die Zeile fährst):

Du wirst nun in den Bearbeitungsmodus der Bestätigung weitergeleitet. 

Als "Art der Besätigung" wählen wir umleiten. Die Umleitungs URL soll die Kasse-Seite werden und dabei soll auch gleich das Produkt in den Warenkorb gelegt werden. Das lösen wir über einen individuellen Warenkorblink.

Diese Anleitung zeigt dir, wie du einen individuellen Warenkorblink erstellst, den du dann als Umleitungs URL nutzen kannst: Wie kann ich den Kaufen-Button auf einer anderen Webseite einbinden?

In unserem Beispiel sieht die Einstellungen der Bestätigung dann so aus: 

Klicke unten auf den Button "Bestätigung speichern". 

Wir haben nun alle Einstellungen vorgenommen und müssen das Formular nur noch auf die Verkaufsseite einbinden. Deine Verkaufsseite kann entweder die Produktseite selbst sein (Backend "Produkte" > Bearbeitungsmodus deines Produktes) oder eine Seite, die du im Backend unter "Webseite" > "Seiten" erstellt hast. 

Wie du das Formular einfügst, zeigen wir in dieser Anleitung unter Punkt 1 (egal ob beim Produkt oder auf einer Seite): Wie füge ich ein Kontaktformular in eine Seite ein?

In unserem Beispiel haben wir das Nutzungsbedingung-Formular direkt auf die Produktseite eingebunden. 

Ausgabe Produktseite im Frontend:

Button-Text "99,00 € – JETZT KAUFEN":

Standardmäßig lautet der Button eines Formulars Absenden. Beim Akzeptieren der Nutzungsbedingung für ein Produkt unter der Verwendung eines Formulars ist das weniger sinnvoll, daher haben wir den Button Text einfach in 99,00 € – JETZT KAUFEN geändert. 

Diese Einstellung nimmst du Backend unter "Webseite" > "Formulare" in den "Formulareinstellungen" bei der Abschnittsbox Formular-Button beim Button Text vor:

Klicke am Ende der Seite auf den Button "Einstellungen speichern".

Möchtest du ein anderes Design für den Formular-Button nutzen? Dann hilft dir diese Anleitung: Wie kann ich den Button eines Kontaktformulars gestalterisch anpassen?

4. Neues Divi Kontaktformular Modul für das Akzeptieren der Nutzungsbedingung erstellen

Wie bereits am Anfang der Anleitung erwähnt, stehen die Standard Formulare (Backend "Webseite" > "Formulare") erst ab dem EXPERT Paket zur Verfügung. Wir können aber auch über ein Divi Kontaktformular Modul die Variante umsetzen, dass nach Absenden des Formulars (= Akzeptieren der Nutzungsbedingung) der Interessent direkt in den Warenkorb zur Kasse-Seite weitergeleitet wird. 

Das heißt also, dass der Absende-Button des Kontaktformulars unser "Kaufen-Button" werden wird:

Rufe dazu deine Verkaufsseite im Frontend auf (kann sowohl die Produktseite als auch eine normale Seite sein) und aktiviere den visuellen Builder von Divi. 

Klicke an deiner gewünschten Stelle deines Layouts auf das graue Plus-Icon, um an der Stelle das Kontaktformular hinzuzufügen, an welcher du die Nutzungsbedingungen + Kaufen-Button haben möchtest: 

Standardmäßig ist das Divi Kontaktformular Modul mit den Feldern "Name", "E-Mail Adresse" und "Nachricht" aufgebaut. Diese Felder werden alle nicht benötigt, daher können diese einfach über das Papierkorb-Icon gelöscht werden:

Wir benötigen nur ein Checkbox Feld, daher klicken wir jetzt auf Neues Feld hinzufügen:

Standardmäßig legt Divi hier ein "Eingabefeld", welches wir im nächsten Schritt in eine Checkbox umwandeln. Zuerst aber tragen wir in den Feld Einstellungen unter der Option "Text" den "Titel" Nutzungsbedingung akzeptieren ein. Die "Feld ID" kannst du leer lassen, diese wird nach dem Speichern automatisch ausgefüllt: 

Öffne als nächstes in der gleichen Ansicht die Option für Feld-Optionen und wähle unter "Typ" Kontrollkästchen aus, damit das Eingabefeld sich in ein Checkbox-Feld umwandelt. Trage nun unter "Optionen" den Text ein, der neben der Checkbox erscheinen soll. Stelle sicher, dass das Feld als ein erforderliches Feld markiert ist:

Klicke rechts unten beim Modul auf den grünen Button, um die Anpassungen zu speichern. Du kommst dadurch wieder in den Modul Einstellungen eine Ebene höher zu den Kontaktformular-Modul-Einstellungen. 

Dort hinterlegen wir nun unter der Option "Text" zuerst eine Erfolgsmeldung, die nach Absenden des Formulars kurz angezeigt wird und ändern den Button-Text auf "99 € – JETZT KAUFEN":

Als Nächstes richten wir die Weiterleitung in den Warenkorb ein, damit der Interessent nach Absenden des Formulars (= Akzeptieren der Nutzungsbedingung) direkt auf die Kasse-Seite kommt. 

Gehe in den Modul-Einstellungen des Kontaktformulars nun zu der Option Umleiten und aktiviere die Option Redirect-URL aktivieren:

In das Feld darunter müssen wir nun eine Redirect-URL einbinden, also das Ziel angegen. In unserem Fall soll es ja die Kasse-Seite sein, bei der das Produkt dann im Warenkorb liegt. Das lösen wir über einen individuellen Warenkorblink:

Diese Anleitung zeigt dir, wie du einen individuellen Warenkorblink erstellst, den du dann als Redirect-URL nutzen kannst: Wie kann ich den Kaufen-Button auf einer anderen Webseite einbinden?

Zusätzlich deaktivieren wir noch unter der Option Spam-Schutz die Option Basic Captcha verwenden, damit vor dem Absende-Button keine Rechenaufgabe mehr auftaucht:

Wie im Bild oben erkennbar, wird der Absende-Button aber standardmäßig rechtsbündig ausgerichtet, was in unserem Fall nicht sinnvoll ist. Wir wollen den Absende-Button linksbündig platzieren.

Da es in dem Kontaktformular Modul keine Einstellungsmöglichkeit für das Ausrichten des Absende-Buttons gibt, lösen wir das über ein paar winzige kleine Zeilen CSS-Code. 

Dazu müssen wir im Kontaktformular Modul zuerst eine Vorbereitung treffen und unter dem Reiter "Erweitert" > Option "CSS-ID & Klassen" tragen wir eine eigene CSS-Klasse ein:

Wir nennen unsere CSS-Klasse contact_form_nutzungsbedingung. 

Du kannst hier eine beliebige Bezeichnung wählen. Achte aber unebdingt darauf, keine Leer- und Sonderzeichen und auch keine Umlaute zu verwenden, da die Programmiersprache englisch ist. Leerzeichen werden immer durch Binde- oder Unterstriche ersetzt. 

Speicher nun die Einstellungen am Modul, speicher die Anpassungen an deiner Seite und verlasse den visuellen Builder von Divi. Die linksbündige Ausrichtung des Absende-Buttons nehmen wir im Backend vor. 

Gehe nun ins Backend deiner Spreadmind Plattform zu "Design" > "Theme Optionen" > Reiter "Allgemeines" ganz ans Ende der Seite zu "eigenes CSS" und füge dort den folgenden CSS-Code ein:

.contact_form_nutzungsbedingung .et_contact_bottom_container {
    float: left;
    margin-top: 10px;
}

Das sieht dann so aus:

Hast du für dein Kontaktformular Modul eine andere CSS-Klasse verwendet, musst du oben im CSS-Code contact_form_nutzungsbedingung durch den Namen deiner CSS-Klasse ersetzen. Ganz wichtig: Achte darauf, dass vor dem Klassen-Namen ein Punkt gesetzt ist. Nur so ist der CSS-Code gültig.

• Über den Befehl float: left; richten wir den Absende-Button linksbündig aus. 
• Über den Befehl margin-top: 10px; geben wir dem Absende-Button einen Abstand nach oben von 10px mit, damit der Button nicht so auf unserer Checkbox klemmt. 

Klicke auf den Button " Änderungen speichern". 

Ausgabe Verkaufsseite im Frontend: