Die
Add To Cart Popup-Erweiterung fügt Easy Digital Downloads eine Popup-Funktionalität hinzu. Wenn sie aktiviert ist, erscheint nach dem Klicken eines Kunden auf eine Schaltfläche „In den Warenkorb“ ein kleines modales Popup, das ihm die Option gibt, direkt zur Kasse zu gehen oder weiter einzukaufen. Hier ist ein Beispiel mit der Standardformatierung des TwentyFifteen-Themes.
Here’s how to configure the popup.
Konfigurationsanweisungen für Add to Cart Popup
- Nach der Installation finden Sie die Einstellungen für diese Erweiterung unter WordPress Admin → Downloads → Einstellungen → Erweiterungen → Add To Cart Popup
- Wenn Sie das Plugin aktivieren, ist das Popup standardmäßig deaktiviert. So haben Sie die Möglichkeit, die Einstellungen anzupassen, bevor Sie es auf Ihrer Website aktivieren. Das Popup kann dann durch Aktivieren des Kontrollkästchens Popup aktivieren aktiviert werden.
Hinweis: Bei Verwendung der „Sofort kaufen“-Schaltflächenfunktion oder der Free Downloads-Erweiterung wird das Popup automatisch deaktiviert, um eine Störung von Zahlungs-Gateway-Weiterleitungen oder Drittanbieter-Popups zu vermeiden.
Anpassung
Allgemeines Erscheinungsbild
Popup-Vorschau: Diese Schaltfläche ermöglicht es Ihnen, ein Popup auf der Einstellungsseite auszulösen, um Ihre Änderungen anzuzeigen, bevor Sie sie speichern. Sie können auch den Link „Popup-Vorschau“ in der Admin-Leiste verwenden. Wir haben dies hinzugefügt, damit Sie nicht ständig zum Anfang der Einstellungsseite scrollen müssen, um das Popup in der Vorschau anzuzeigen.
Beachten Sie, dass die Vorschau bei Verwendung von Shortcodes möglicherweise nicht ganz genau ist, da einige Stile möglicherweise nicht im WordPress-Admin geladen werden. Es wird empfohlen, die Vorschau auf der Frontend-Seite Ihrer Website anzuzeigen, wenn Sie fertig sind, um das Erscheinungsbild des Popups zu bestätigen.
Popup-Text: Hier können Sie den Text festlegen, der im Popup angezeigt wird. Wenn das Plugin irgendwo im Text dieser Option „%s“ (ohne Anführungszeichen) erkennt, wird dieser durch den Namen des Downloads ersetzt, den der Benutzer in seinen Warenkorb gelegt hat. Sie haben auch die Möglichkeit, Mediendateien (wie Bilder), Einbettungen und sogar Shortcodes im Popup hinzuzufügen.
Popup-Pluraltext: Ähnlich wie der Popup-Text wird dieser Text im Popup angezeigt, wenn mehrere Artikel gleichzeitig in den Warenkorb gelegt wurden. Dies ist typisch, wenn Sie variable Preisoptionen verwenden, die das gleichzeitige Hinzufügen mehrerer Optionen ermöglichen. Auch hier haben Sie die Möglichkeit, Mediendateien (wie Bilder), Einbettungen und sogar Shortcodes im Popup hinzuzufügen.
Denken Sie daran, dass Sie die Werkzeugleiste des Editors erweitern können, indem Sie auf die Schaltfläche ganz rechts im Editor klicken!
Schriftgröße: Hier können Sie die Gesamtgröße der im Popup verwendeten Schriftart ändern. Verschiedene CSS-Formate werden hier akzeptiert.
- Pixelgrößen sind absolute feste Größen. Beispiel: 12px
- Prozentuale Größen beziehen sich auf die Standard-Schriftgröße des Themes. Beispiel: 120 % (20 % größer als die Schriftgröße des Themes).
- „em“-Werte ähneln Prozentwerten, wobei 1em die Standard-Schriftgröße ist. Beispiel: 2em (doppelt so groß wie der Standard).
Textfarbe: Die Farbe des Popup-Textes. Um die Farbe festzulegen, klicken Sie auf das Farbfeld, um die Farbauswahl zu öffnen.
Hintergrundfarbe: Die Farbe des Popup-Hintergrunds. Um die Farbe festzulegen, klicken Sie auf das Farbfeld, um die Farbauswahl zu öffnen.
Hier ist ein Beispiel mit der Textfarbe auf Gelb und der Hintergrundfarbe auf Blau gesetzt:
Rahmen: Diese Option ermöglicht es Ihnen, den Rahmen des Popups zu gestalten, der am Rand des Popup-Fensters erscheint. Die drei Optionen sind die Breite (oder Dicke), der Stil und die Farbe.
Radius des Rahmens: Der Radius der Ecken des Rahmens. Je größer dieser Wert ist, desto runder werden die Ecken. Dies gilt auch, wenn der Rahmen nicht sichtbar ist (Breite ist Null, Stil ist „Kein“ oder Farbe ist transparent).
Schatten: Diese Option ermöglicht es Ihnen, dem Popup einen Schatten hinzuzufügen, indem Sie die Schattenmenge (Größe und Dicke) und die Schattenfarbe festlegen. Das folgende Beispiel fügt einen dunkelgrünen Schatten mit einer Schattenmenge von 15 hinzu:
Overlay-Farbe: Der Begriff Overlay bezieht sich auf die Farbe, die den Rest der Seite abdeckt, wenn das Popup angezeigt wird. Sie können seine Farbe ändern, indem Sie auf das Farbfeld klicken, um die Farbauswahl zu öffnen, die auch eine Transparenzoption enthält. Das folgende Beispiel ändert das Overlay zu einem hellen, halbtransparenten Orange:
Popup-Abmessungen
Größe: Hier können Sie die Größe des Popups steuern. Verschiedene CSS-Formate werden hier akzeptiert, einschließlich Pixel und Prozentsätze.
- Pixelgrößen sind feste Größen. Beispiel: 500px (500 Pixel auf dem Bildschirm des Benutzers)
- Prozentuale Größen beziehen sich auf die Größe des Browserfensters des Benutzers. Beispiel: 60 % (60 % des Bildschirms des Benutzers)
Wenn Breite oder Höhe leer gelassen werden, berechnet das Popup diese automatisch, um den Inhalt anzupassen.
Das folgende Beispiel zeigt ein Popup mit einer Breite von 500 Pixeln und einer automatisch berechneten Höhe, die leer gelassen wurde.
Innenabstand: Der Innenabstand bezieht sich auf den Abstand zwischen dem Rand des Popups und seinem Inhalt, wie im folgenden Bild gezeigt:
Der grüne Bereich ist das, was als „Innenabstand“ bezeichnet wird.
Schaltflächenstile
Schaltflächenrahmen: Der Rahmen für die im Popup angezeigten Schaltflächen, ähnlich der vorherigen Option Rahmen. Sie können die Dicke, den Stil und die Farbe des Rahmens festlegen.
Radius der Ecken: Der Radius der Schaltflächenecken. Je größer dieser Wert ist, desto runder werden die Ecken. Dies gilt auch, wenn der Schaltflächenrahmen nicht sichtbar ist (Breite auf 0 gesetzt, Stil ist „Kein“ oder Farbe ist transparent).
Zum Beispiel: ein blauer „gepunkteter“ Rahmen mit einer Breite von 5 Pixeln und einem Eckradius von 3 Pixeln:
Schaltflächen-Innenabstand: Ähnlich der Popup-Option Innenabstand, ermöglicht dies Ihnen, den Abstand innerhalb der Schaltfläche anzupassen. Zum Beispiel verwendet das folgende Beispiel einen oberen und unteren Innenabstand von 6 Pixeln und einen linken und rechten Innenabstand von 30 Pixeln.
Button-Ausrichtung: Sie können die Buttons entweder nebeneinander horizontal anzeigen lassen oder sie vertikal übereinander stapeln. Die Standardeinstellung ist horizontal.
Button-Ausrichtung: Sie können zwischen links, Mitte und rechts Ausrichtung wählen. Die Wahl von links oder rechts verschiebt die Buttons zu der jeweiligen Seite, während die Wahl von Mitte die Buttons in der Mitte des Popups positioniert.
Button-Reihenfolge: Diese Option erlaubt Ihnen zu wählen, welcher Button zuerst angezeigt wird. Wenn die Button-Ausrichtung auf horizontal eingestellt ist, bestimmt diese Option, welcher Button links angezeigt wird. Wenn die Button-Ausrichtung auf vertikal eingestellt ist, bestimmt diese Option, welcher Button oben angezeigt wird.
Kasse/Weiter Button
Die nächsten beiden Abschnitte bestehen aus identischen Optionen, die es Ihnen ermöglichen, das individuelle Erscheinungsbild beider Buttons anzupassen.
Aktiviert: Wählen Sie, ob der Button angezeigt oder ausgeblendet werden soll.
Text: Sie können den Text jedes Buttons nach Belieben anpassen.
Textfarbe: Die Farbe des Textes innerhalb des Buttons.
Textfarbe beim Hover: Die Farbe des Textes innerhalb des Buttons, wenn der Mauszeiger über dem Button schwebt.
Hintergrundfarbe: Die Hintergrundfarbe des Buttons.
Hintergrundfarbe beim Hover: Die Hintergrundfarbe des Buttons, wenn der Mauszeiger über dem Button schwebt.
Das folgende Beispiel verwendet weiße Buttons mit schwarzem Text, die sich beim Überfahren mit der Maus in rote Buttons mit weißem Text ändern.
Der Farbwähler, erklärt
