So fügen Sie mit Divi . dynamisch eine Gutscheincodeleiste zu bestimmten Produktseiten hinzu

Wenn Sie einen Online-Shop betreiben, den Sie mit Divi und WooCommerce erstellt haben, möchten Sie gelegentlich Gutscheincodes auf Ihrer Website anzeigen, um die Dringlichkeit zu erhöhen. Im gesamten Web werden Sie feststellen, dass viele Online-Shops die Gutscheincodes in einer Leiste am oberen Rand der Seite teilen. Mit Divis Theme Builder können Sie jetzt automatisch eine solche Gutscheincodeleiste zu Produkten hinzufügen, die für den Gutscheincode berechtigt sind.

In diesem Tutorial zeigen wir Ihnen genau, wie das geht. Dieses Tutorial besteht aus mehreren Teilen, vom Einrichten des Gutscheincodes bis zum Erstellen einer separaten Produktvorlage für Produkte in der Rabattkategorie. Sie können auch die JSON-Datei der Vorlage kostenlos herunterladen! Der von uns verwendete allgemeine Stil basiert auf dem fetten Produktseitenlayout, das wir in der Vergangenheit geteilt haben.

Lasst uns anfangen!

Vorschau

Bevor wir in das Tutorial eintauchen, werfen wir einen kurzen Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Laden Sie die Produktseitenvorlage KOSTENLOS herunter

Um die Produktseitenvorlage in die Hände zu bekommen, müssen Sie sie zuerst über die Schaltfläche unten herunterladen. Um Zugang zum Download zu erhalten, müssen Sie unsere Divi Daily-E-Mail-Liste abonnieren, indem Sie das untenstehende Formular verwenden. Als neuer Abonnent erhalten Sie jeden Montag noch mehr Divi-Güte und ein kostenloses Divi-Layout-Paket! Wenn Sie bereits auf der Liste stehen, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download. Sie werden nicht „erneut abonniert“ oder erhalten zusätzliche E-Mails.

Laden Sie die Dateien herunter

Kostenlos herunterladen

Melden Sie sich beim Divi-Newsletter an und wir senden Ihnen eine Kopie des ultimativen Divi-Landing-Page-Layout-Pakets sowie jede Menge anderer fantastischer und kostenloser Divi-Ressourcen, Tipps und Tricks per E-Mail zu. Folgen Sie mit und Sie werden in kürzester Zeit ein Divi-Meister. Wenn Sie bereits abonniert sind, geben Sie einfach unten Ihre E-Mail-Adresse ein und klicken Sie auf Download, um auf das Layout-Paket zuzugreifen.

HERUNTERLADEN

Sie haben sich erfolgreich abonniert. Bitte überprüfen Sie Ihre E-Mail-Adresse, um Ihr Abonnement zu bestätigen und Zugang zu kostenlosen wöchentlichen Divi-Layout-Paketen zu erhalten!

Tutorial-Übersicht

• Stellen Sie sicher, dass Sie Divi und das WooCommerce-Plugin auf Ihrer Website installiert haben
• Im ersten Teil des Tutorials erstellen wir eine neue Rabattproduktkategorie
• Wir weisen die berechtigten Produkte dieser neuen Produktkategorie zu
• Dann erstellen wir einen neuen Gutscheincode und stellen sicher, dass der Gutscheincode nur für die von uns erstellte Produktkategorie gilt
• Im Theme Builder erstellen wir eine neue Vorlage für diese bestimmte Produktkategorie
• Wir verwenden den normalen Hauptteil der Produktseite für diese Vorlage und fügen mithilfe der integrierten Optionen von Divi eine obere Gutscheincodeleiste hinzu.

1. Neue Rabattproduktkategorie erstellen

Gehen Sie zu Produktkategorien und fügen Sie eine neue Rabattproduktkategorie hinzu

Beginnen Sie mit der Installation des WooCommerce-Plugins auf Ihrer WordPress-Website und fügen Sie eine neue Produktkategorie hinzu, die allen Produkten gewidmet ist, die für den neuen Rabatt berechtigt sind. Wenn Sie den Gutscheincode für vorhandene Produktkategorien verwenden möchten, können Sie diese stattdessen verwenden.

2. Produkte einer neuen Rabattkategorie zuordnen

Produkt bearbeiten

Öffnen Sie dann die Produkte, die Sie in den Verkauf aufnehmen möchten.

Produkte einer neuen Rabattkategorie zuordnen

Und nehmen Sie sie in die neue Rabattproduktkategorie auf.

3. Erstellen Sie einen WooCommerce-Gutscheincode

Gehe zu Coupons und füge neuen Coupon hinzu

Der nächste Teil dieses Tutorials behandelt das Erstellen eines neuen Gutscheincodes. Gehen Sie zu Ihrem WordPress-Dashboard > Coupons > und klicken Sie auf 'Erste Coupon erstellen' .

Gutscheincode & Gutscheindaten hinzufügen

Fügen Sie den Gutscheincode oben hinzu und wählen Sie die allgemeinen Einstellungen aus, die Sie auf Ihren Gutscheincode anwenden möchten.

• Rabattcode: Rabattcode hinzufügen
• Rabattart: Prozentualer Rabatt
• Gutscheinbetrag: Prozent hinzufügen
• Ablaufdatum des Gutscheins: Datum auswählen

Nutzungsbeschränkung hinzufügen

Fahren Sie dann mit der Nutzungsbeschränkung fort und stellen Sie sicher, dass der Gutscheincode nur für Produkte innerhalb Ihrer Rabattproduktkategorie funktioniert.

• Produktkategorien: Rabatt

4. Neue Vorlage für Rabattkategorie hinzufügen

Neue Vorlage hinzufügen

Sobald Sie den Gutscheincode erstellt haben, ist es an der Zeit, ihn auf den entsprechenden Produktseiten einzufügen! Gehen Sie dazu zum Divi Theme Builder und fügen Sie eine neue Vorlage hinzu.

Verwenden Ein

Verwenden Sie diese neue Vorlage für die Rabattproduktkategorie.

• Verwendung bei: Produkt in einer bestimmten Produktkategorie: Rabatt

5. Globalen Produktseitentext für neue Vorlage wiederverwenden

Ziehen Sie den Hauptteil der Produktvorlage in den Hauptteil der neuen Vorlage

Sie können Ihren regulären Vorlagentext für Produktseiten wiederverwenden, indem Sie ihn einfach in Ihre neue Vorlage ziehen. In diesem Tutorial verwenden wir das fett formatierte Produktseitenlayout, das wir in einem anderen Tutorial erstellt haben. Sie können die JSON-Datei des Layouts im Blogbeitrag herunterladen.

6. Fügen Sie die obere Gutscheincodeleiste zum Textkörper der neuen Vorlage hinzu

Betreten Sie den Body-Template-Editor

Nachdem Sie den Hauptteil der Produktseite zu Ihrer neuen Vorlage hinzugefügt haben, können Sie mit der Bearbeitung beginnen. Die Änderungen, die Sie an dieser Vorlage vornehmen, werden nur auf den Produktseiten angezeigt, die Teil der Rabattproduktkategorie sind.

Neuen Abschnitt nach oben hinzufügen

Im Vorlageneditor fügen wir als erstes einen neuen Abschnitt oben hinzu.

Hintergrundfarbe

Öffnen Sie die Abschnittseinstellungen und ändern Sie die Hintergrundfarbe.

• Hintergrundfarbe: #e02b20

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Animation

Vervollständigen Sie die Abschnittseinstellungen, indem Sie eine Animation hinzufügen.

• Animationsstil: Folie
• Animationsrichtung: Unten
• Animationsdauer: 1500 ms
• Animationsverzögerung: 1000ms
• Anfangsdeckkraft der Animation: 100 %
• Animationsgeschwindigkeitskurve: Ease-In-Out
• Animationswiederholung: Einmal

Neue Zeile hinzufügen

Spaltenstruktur

Fahren Sie fort, indem Sie dem Abschnitt eine neue Zeile mit der folgenden Spaltenstruktur hinzufügen:

Größe

Öffnen Sie die Zeileneinstellungen und lassen Sie die Zeile die gesamte Breite des Abschnittscontainers einnehmen.

• Benutzerdefinierte Dachrinnenbreite verwenden: Ja
• Dachrinnenbreite: 1
• Spaltenhöhen ausgleichen: Ja

Abstand

Entfernen Sie als nächstes alle standardmäßigen oberen und unteren Polster.

• Obere Polsterung: 0px
• Untere Polsterung: 0px

Spalte 1

Abstand

Öffnen Sie dann die Einstellungen von Spalte 1 und fügen Sie einige obere und untere Auffüllungen hinzu.

• Obere Polsterung: 25px
• Untere Polsterung: 25px

Spalte 2

Hintergrundfarbe

Öffnen Sie auch die Einstellungen von Spalte 2 und fügen Sie eine weiße Hintergrundfarbe hinzu.

• Hintergrundfarbe: #ffffff

Abstand

Fügen Sie dieser Spalte auch einige benutzerdefinierte obere und untere Auffüllungen hinzu.

• Obere Polsterung: 20px
• Untere Polsterung: 20px

Grenze

Und schließen Sie einen oberen linken und rechten Randradius ein.

• Oben links + Oben rechts: 30px

Textmodul zu Spalte 1 hinzufügen

Inhalt hinzufügen

Das erste und einzige Modul, das wir in Spalte 1 benötigen, ist ein Textmodul. Geben Sie eine Kopie Ihrer Wahl ein.

Texteinstellungen

Wechseln Sie zum Design-Tab des Moduls und ändern Sie die Texteinstellungen entsprechend:

• Textschriftart: Montserrat
• Textfarbe: #ffffff
• Textgröße: 16px
• Textausrichtung: Mitte

Textmodul zu Spalte 2 hinzufügen

Gutscheincode zum Inhaltsfeld hinzufügen

Fügen Sie in der zweiten Spalte ein weiteres Textmodul mit dem Rabattcode hinzu, den Sie im ersten Teil des Tutorials hinzugefügt haben.

Texteinstellungen

Ändern Sie die Texteinstellungen des Moduls wie folgt:

• Textschriftart: Montserrat
• Schriftstärke des Textes: Schwer
• Textfarbe: #000000
• Textgröße: 19px
• Textausrichtung: Mitte

Größe

Ändern Sie dann die Größeneinstellungen.

• Breite: 50%
• Modulausrichtung: Mitte

Abstand

Fügen Sie auch etwas Bodenpolsterung hinzu.

• Untere Polsterung: 10px

Grenze

Und vervollständigen Sie die Einstellungen des Moduls, indem Sie einen unteren Rand hinzufügen.

• Breite des unteren Rands: 1px
• Farbe des unteren Rands: #333333

7. Theme Builder-Änderungen speichern und Ergebnis anzeigen

Sobald Sie die geänderte Produktseite fertiggestellt haben, können Sie die Vorlagenänderungen speichern, den Theme Builder beenden und das Ergebnis auf den Rabattproduktseiten anzeigen!

Vorschau

Nachdem wir nun alle Schritte durchgegangen sind, werfen wir einen letzten Blick auf das Ergebnis für verschiedene Bildschirmgrößen.

Desktop

Handy, Mobiltelefon

Abschließende Gedanken

In diesem Beitrag haben wir Ihnen gezeigt, wie Sie eine Gutscheincodeleiste erstellen und automatisch auf Produktseiten anzeigen lassen, die für den jeweiligen Gutscheincode in Frage kommen. Dies ist eine großartige Möglichkeit, Besuchern einen zusätzlichen Anreiz zum Kauf Ihrer Produkte zu geben. Sie konnten die JSON-Vorlagendatei auch kostenlos herunterladen! Wenn Sie Fragen haben, hinterlassen Sie einen Kommentar im Kommentarbereich unten.

Wenn Sie mehr über Divi erfahren und weitere Divi-Werbegeschenke erhalten möchten, abonnieren Sie unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie immer einer der ersten sein werden, der diesen kostenlosen Inhalt erfährt und von diesem profitiert.