Ihre Wunschzettel-Seite ist oft die letzte Station für einen Kunden, bevor er sich zum Kauf entschließt. Wenn diese Seite wie ein generisches Plugin aussieht, das mit Ihren sorgfältig ausgewählten Markenfarben und -schriftarten kollidiert, kann dies zu einer „Diskrepanz“ führen, die das Vertrauen beeinträchtigt.
Standardmäßig verwendet die Wunschzettel-Seite ein blaues Farbschema, das nicht immer zu jedem WordPress-Theme passt. Die Einstellungen für die Stil-Anpassung der Wunschzettel-Seite von SaveTo Wishlist ermöglichen es Ihnen, die Typografie und die Farben der Wunschzettel-Seite zu ändern, damit sie zum Branding Ihres Shops passt, ohne dass Sie CSS schreiben müssen.
Diese Anleitung führt Sie durch die verfügbaren Stileinstellungen und deren Anwendung.
💡 Hinweis:
Diese Einstellungen wirken sich speziell auf die Haupt-Wunschzettel-Seite (auf der Kunden ihre gespeicherten Artikel sehen) aus und nicht auf die „In den Wunschzettel“-Schaltflächen auf den Produktseiten.
🔗 Externe Ressource:
Wenn Sie sich bei der Farbwahl unsicher sind, empfehlen wir Ihnen, Adobe Color für Inspirationen zu zugänglichen Farbpaletten zu besuchen.
Voraussetzungen
Stellen Sie vor Beginn sicher, dass Sie Folgendes haben:
- SaveTo Wishlist Lite in Ihrem Shop installiert und aktiviert haben
- Eine Wunschzettel-Seite, die bereits eingerichtet ist (das Plugin erstellt automatisch eine bei der Aktivierung)
Schritt für Schritt: Gestalten Sie Ihre benutzerdefinierte Wunschzettel-Seite
1. Stileinstellungen finden
Alle Ihre Design-Werkzeuge sind zur einfachen Bedienung zusammengefasst.
- Gehen Sie zu SaveTo Wishlist → Einstellungen.
- Klicken Sie auf den Tab Wunschzettel-Seite und scrollen Sie nach unten zum Abschnitt Stile.
2. Überschriften und Titel gestalten
Die Überschrift ist das Erste, was Ihre Kunden sehen. Heben Sie sie hervor:
- Größe und Farbe der Überschriften: Passen Sie die Größe der Überschriften und die Farbe der Überschriften an die Haupt-H1- oder H2-Tags Ihrer Website an.
- Größe und Farbe des Überschriftentextes: Steuern Sie den Untertext oder den Beschreibungsbereich, um sicherzustellen, dass er lesbar ist und der Schriftfarbe Ihres Marken-Body-Textes entspricht.
3. Die Wunschzettel-Tabelle gestalten
Hier befinden sich die Produktdaten. Sie können jetzt das „technische“ Aussehen der Liste verfeinern:
- Textgröße der Tabellenspalten: Ändern Sie die Textgröße für Überschriften wie „Produktname“ oder „Preis“.
- Textgröße der Tabellenzeilen: Passen Sie die Schriftgröße der Artikeldetails in der Liste für bessere Lesbarkeit auf Desktop und Mobilgeräten an.
4. Das Popup-Modal gestalten
Wenn Sie die Popup-Aktion verwenden, stellen Sie sicher, dass das Fenster zur Ästhetik Ihrer Website passt:
- Größe und Farbe des Popup-Titels: Legen Sie die Schriftgröße und Farbe Ihres Popup-Titels fest.
- Größe und Farbe des Popup-Textes: Verwenden Sie diese Steuerelemente, um sicherzustellen, dass die Anweisungen klar sind.
- Popup-Schaltflächen „Speichern“ und „Abbrechen“: Verwenden Sie die Farbwähler für die Schaltflächen Speichern und Abbrechen.
💡 Hinweis:
Verwenden Sie Ihre primäre Markenfarbe für die Speichern-Schaltfläche, da diese die Aufmerksamkeit auf die Aktion lenkt.
5. Schaltflächen gestalten
Passen Sie Größe und Farben der Schaltflächen auf der Wunschzettel-Seite an:
- Schriftgröße der Schaltfläche: Machen Sie Ihre „In den Warenkorb“-Schaltfläche größer oder kleiner, um sie an Ihre Designsprache anzupassen.
- Schriftfarbe der Schaltfläche: Sorgen Sie für hohen Kontrast (z. B. weiße Schrift auf dunklem Hintergrund), indem Sie eine benutzerdefinierte Farbe auswählen.
- Hintergrundfarbe der Schaltfläche: Ändern Sie das Standardblau in Ihre primäre Markenfarbe.
6. Vorschau und speichern
- Klicken Sie unten auf der Seite auf Änderungen speichern.
- Öffnen Sie Ihre Wunschzettel-Seite in einem neuen Inkognito-Fenster, um die Änderungen genau so zu sehen, wie Ihre Kunden sie sehen werden.
✨ Bonus-Tipp: Wunschzettel-Links anpassen
Standardmäßig übernehmen die Links auf Ihrer Wunschzettel-Seite (wie Produkttitel) normalerweise die globalen Link-Einstellungen Ihres Themes. Wenn Sie diese Farben ändern möchten, um sie besser an Ihre neuen Schaltflächenstile anzupassen, finden Sie diese Einstellungen normalerweise in Ihrem WordPress-Dashboard unter Darstellung → Customizer → Typografie → Link-/Akzentfarbe.
💡 Hinweis:
Jedes Theme ist anders aufgebaut! Je nachdem, welches Theme Sie installiert haben, befindet sich diese Einstellung möglicherweise auch unter „Globale Farben“ oder „Schaltflächen- & Linkstile“.
Das Theme die Gestaltung steuern lassen
Die obigen Stileinstellungen geben Ihnen die Kontrolle über die eigenen Farb- und Schriftoptionen des Plugins. Aber wenn Sie lieber möchten, dass Ihr Theme all das vorgibt, oder wenn die CSS Ihres Themes bereits die Hauptarbeit leistet, können Sie SaveTo Wishlist anweisen, sich zurückzuhalten.
Gehen Sie zu SaveTo Wishlist → Einstellungen → Schaltflächenplatzierung & Stile → Frontend-Gestaltung. Dort finden Sie die Einstellung Frontend-CSS-Laden mit drei Optionen:
- Vollständige Gestaltung – Farben und Schriftarten des Plugins verwenden (Standard). Das Plugin lädt sein vollständiges Farb- und Schriftarten-Stylesheet. Dies ist die Standarderfahrung.
- Minimale Gestaltung – Farben und Schriftarten vom Theme überschreiben lassen. Das Stylesheet wird weiterhin geladen, aber
!importantwird nicht für dekorative Eigenschaften wie Farbe, Hintergrund und Rahmen verwendet, sodass die CSS Ihres Themes den Vorrang erhalten kann. - Keine Gestaltung – Farben und Schriftarten vom aktiven Theme übernehmen. Schaltflächengrößen, Positionen und Layout bleiben in jedem Modus erhalten. Nur die visuelle Gestaltung ändert sich.
💡 Hinweis:
Admin-Stile sind von dieser Einstellung nicht betroffen. Sie steuert nur, wie das Frontend-Stylesheet für Ihre Kunden geladen wird.
Vorher & Nachher: Wunschzettel-Seite an Ihr Branding anpassen
Unten sehen Sie einen Vorher-Nachher-Vergleich, der zeigt, wie die Wunschzettel-Seite angepasst werden kann, um besser zum Theme Ihres Shops zu passen.
Zwischen Tabellen- und Rasteransicht wechseln
Ihre Kunden sind nicht an ein einziges Layout gebunden. Auf der Wunschzettel-Seite sehen sie einen Ansichtswechsel neben der Suchleiste. Ein Klick wechselt zwischen dem Standard-Tabellenlayout und einem Raster- (Kachel-) Layout.
Die Gitteransicht zeigt Wunschlistenartikel als responsive Produktkacheln an. Das Layout passt sich der Bildschirmbreite an und zeigt eine einzelne Spalte auf kleinen mobilen Bildschirmen, dann zwei, dann drei und schließlich vier Spalten auf den breitesten Bildschirmen. Jede Kachel zeigt das Produktbild, den Namen, den Preis, den Lagerstatus, die Menge und eine Schaltfläche zum Hinzufügen zum Warenkorb. Alle üblichen Artikelaktionen (das Drei-Punkte-Menü) sind weiterhin verfügbar.
Welche Ansicht ein Kunde auch wählt, sie wird in seinem Browser gespeichert, sodass sie beim nächsten Besuch vom selben Gerät aus noch vorhanden ist.
Fehlerbehebung bei Ihrem Design
Meine Änderungen werden nicht auf der Website angezeigt
Dies liegt fast immer am Caching. Wenn Sie ein Plugin wie WP Rocket, LiteSpeed Cache oder ein CDN wie Cloudflare verwenden, stellen Sie sicher, dass Sie nach dem Speichern Ihrer Stile den Cache löschen/leeren. Sie können auch den offiziellen WooCommerce-Leitfaden zum Caching konsultieren.
Der Schriftstil passt nicht genau zu meinem Theme
Das Plugin verwendet standardmäßig die von Ihrem Theme geerbte Schriftfamilie. Diese Einstellungen ermöglichen es Ihnen, die Größe und Farbe zu ändern. Wenn die Schriftfamilie selbst falsch aussieht, stellen Sie sicher, dass die globalen CSS Ihres Themes korrekt geladen werden.
Die Farben sehen auf Mobilgeräten anders aus
Prüfen Sie, ob auf Ihrem Telefon der „Dunkelmodus“ aktiviert ist, da einige Browser versuchen, Farben automatisch umzukehren. Die Farben, die Sie in den Stileinstellungen festlegen, sind so konzipiert, dass sie die meisten dieser automatischen Browseranpassungen überschreiben.
Häufig gestellte Fragen
➤ Muss ich CSS kennen, um diese Farben zu ändern?
Überhaupt nicht! Wir haben eine benutzerfreundliche Oberfläche mit Farbwählern und Schiebereglern entwickelt, sodass Sie niemals eine Zeile Code anfassen müssen.
➤ Verlangsamen diese Einstellungen meine Seite?
Nein. Diese Stile sind leichtgewichtig und beeinträchtigen die Seitenladezeit nicht merklich.
Brauchen Sie Hilfe?
- Premium-Benutzer: Reichen Sie ein Support-Ticket ein und unser Team wird Ihnen helfen.
- Kostenlose Benutzer: Posten Sie im WordPress.org Support-Forum.
