Ihr Shop hat sein eigenes Aussehen mit eigenen Farben, Schriftarten und Layout. Diese Anleitung zeigt Ihnen, wie Sie den SaveTo Wishlist-Button anpassen, auf den Produkt-, Shop- und Warenkorbseiten, ohne eine Zeile Code anzufassen.
Voraussetzungen
- WooCommerce installiert und konfiguriert.
- SaveTo Wishlist Lite installiert und aktiv.
- Administratorzugriff auf Ihr WordPress-Dashboard.
Wunschzettel-Aktion
Die Einstellung Button zur Wunschliste hinzufügen steuert, was passiert, wenn ein Kunde auf den Wunschzettel-Button klickt. Sie finden sie unter SaveTo Wishlist → Einstellungen → Allgemein → Wunschzettel-Aktion.
Es gibt drei Optionen:
- Weiterleiten: leitet den Kunden nach dem Klicken direkt zu seiner Wunschzettel-Seite weiter. Gut für Shops, in denen Kunden ihre Wunschliste sofort überprüfen sollen.
- Popup: zeigt ein Bestätigungs-Popup an, ohne die Seite zu verlassen. Nützlich, wenn Käufer auf der Seite bleiben und weiter stöbern sollen.
- Ausblenden: eine kleine Bestätigungsnachricht blendet neben dem Button ein, um zu bestätigen, dass das Produkt gespeichert wurde, ohne Navigation oder Popup. Es ist die subtilste Option, ideal, wenn Sie minimale Unterbrechungen des Einkaufsflusses wünschen.
Wo Sie die Einstellungen finden
Gehen Sie zu Ihrem WordPress Dashboard → SaveTo Wishlist → Einstellungen → Button-Platzierung & Stile.
Sie sehen fünf Hauptbereiche:
- Button-Einstellungen – Beschriftung des Wunschzettel-Buttons und die Beschriftung, die nach dem Hinzufügen eines Produkts angezeigt wird
- Frontend-Styling – die Einstellung Frontend-CSS-Laden, die steuert, wie viel CSS des Plugins in Ihrem Shop geladen wird (behandelt im Abschnitt Frontend-CSS-Laden unten)
- Produktseite – Button-Platzierung und Stil auf einzelnen Produktseiten
- Shop-Seite – Button-Platzierung und Stil auf Produktlisten
- Warenkorb-Seite – Stil und Beschriftung für den Button „Warenkorb zur Wunschliste hinzufügen“
Button-Einstellungen
Beschriftung des Wunschzettel-Buttons legt den Standardtext für alle Wunschzettel-Buttons in Ihrem Shop fest. Der Standard ist Speichern für Wunschliste, aber Sie können ihn in alles ändern, was passt, wie Zu Favoriten hinzufügen oder Für später speichern. Halten Sie ihn kurz und klar.
Beschriftung des ausgewählten Wunschzettel-Buttons ermöglicht es Ihnen, eine andere Beschriftung anzuzeigen, sobald ein Produkt zur Wunschliste hinzugefügt wurde. Der Standard ist Aus Wunschliste entfernen, womit Käufer den Artikel mit einem Klick entfernen können. Sie können ihn in alles ändern, was zu Ihrem Shop passt.
Profi-Tipp: Halten Sie Button-Beschriftungen kurz und handlungsorientiert, damit Käufer leicht handeln können.
Produktseite
Der Abschnitt Produktseite steuert, wie der Wunschzettel-Button auf einzelnen Produktseiten erscheint, auf denen Käufer ein einzelnes Produkt vor dem Kauf ansehen.
Button Placement bestimmt, wo der Button auf der Produktseite erscheint. Die Standardeinstellung ist Unter dem Button „In den Warenkorb“, aber Sie können auch Über dem Button „In den Warenkorb“, Über dem Produkttitel, Unter dem Produkttitel, Oben rechts vom Produktbild oder Oben links vom Produktbild wählen.
⚠️ Produkte ohne Preis oder nicht auf Lager: Ab Version 1.0.7 zeigen die Platzierungen Über dem Button „In den Warenkorb“ und Unter dem Button „In den Warenkorb“ den Wunschzettel-Button auch bei Produkten an, die keinen Preis haben, nicht auf Lager sind oder sich im Katalogmodus befinden. Diese Produkte verbergen normalerweise das WooCommerce-Formular „In den Warenkorb“, sodass der Button nun stattdessen an einer nahegelegenen Stelle in der Produktzusammenfassung erscheint, anstatt zu verschwinden.
Die nächste Einstellung ist die Option Konfigurationsmodus. Wählen Sie Voreinstellungen verwenden, um aus vorgefertigten Stil-Kombinationen auszuwählen, oder wählen Sie Benutzerdefinierte Einstellungen, um manuell auf den vollständigen Farbwähler, Schriftarten und Größensteuerungen zuzugreifen.
Profi-Tipp: Verwenden Sie die Live-Vorschau, um zu sehen, wie Ihr Button sowohl im normalen als auch im Hover-Zustand aussieht, bevor Sie Ihre Änderungen speichern.
Shop-Seite
Der Abschnitt Shop-Seite steuert, wie Wunschzettel-Buttons in Ihren Produkt-Grids, Kategorie-Seiten und Archiv-Seiten erscheinen, überall dort, wo Käufer mehrere Produkte gleichzeitig durchsuchen.
Button Placement ist standardmäßig unter dem Button „In den Warenkorb“ platziert, aber Sie können den Button auch in den oberen Ecken der Produktbilder oder über/unter den Produkttiteln positionieren. Für einen sauberen, modernen Look auf Grid-Seiten funktioniert die Position in der oberen Ecke in der Regel sehr gut.
Ähnlich wie im Abschnitt Produktseite gibt es die Option Konfigurationsmodus. Wählen Sie Voreinstellungen verwenden für eine schnelle Einrichtung mit vorgefertigten Kombinationen oder Benutzerdefinierte Einstellungen, um jede Farbe, Schriftgröße, Randbreite und jeden Textstil fein abzustimmen, damit er zu Ihrem Shop-Branding passt.
Profi-Tipp: Für eine elegante, moderne Shop-Seite probieren Sie „Nur Symbol“-Buttons in den oberen Ecken aus. Das spart Platz und hält die Wunschzettel-Option sichtbar.
Warenkorb-Seite
Der Abschnitt Warenkorb-Seite ist für den Button „Warenkorb auf Wunschzettel speichern“, der es Käufern ermöglicht, ihren gesamten Warenkorb auf einmal zu speichern. Er ist großartig für Kunden, die später zurückkehren oder ihre Auswahl teilen möchten.
Die Standardeinstellung für Warenkorb-Button-Beschriftung ist „Warenkorb auf Wunschzettel speichern“. Sie können ihn in etwas Freundlicheres wie Warenkorb für später speichern oder ♥ meinen Warenkorb speichern ändern. Die gleichen Stil-, Farb-, Schrift- und Größenoptionen, die auf den Produkt- und Shop-Seiten verfügbar sind, gelten auch hier, sodass Sie die Konsistenz in Ihrem gesamten Shop wahren können.
Dieser Abschnitt hat auch die Option Konfigurationsmodus: Wählen Sie Voreinstellungen verwenden für eine schnelle Einrichtung oder Benutzerdefinierte Einstellungen, um die Farben, Schriftarten und Größen selbst zu steuern.
Frontend-CSS-Laden
Die Einstellung Frontend-CSS-Laden steuert, wie viel des Plugin-Stylesheets auf Ihrem Shop geladen wird. Sie finden sie unter SaveTo Wishlist → Einstellungen → Schaltflächenplatzierung & Stile → Frontend-Styling.
Es gibt drei Optionen:
- Vollständiges Styling – Verwenden Sie die Farben und Schriftarten des Plugins (Standard). Lädt das vollständige Stylesheet des Plugins. Funktioniert für die meisten Shops sofort.
- Minimales Styling – Lassen Sie Ihr Theme Farben und Schriftarten überschreiben. Lädt Farben und Hintergründe ohne
!important-Überschreibungen, sodass die CSS Ihres Themes dort gewinnen kann, wo sie in Konflikt geraten. Versuchen Sie dies zuerst, wenn die Wishlist-Schaltfläche mit Ihrem Theme kollidiert. - Kein Styling – Farben und Schriftarten vom aktiven Theme übernehmen. Verwirft die Farben und Schriftarten des Plugins, sodass die Schaltfläche diese aus Ihrem Theme übernimmt. Am besten für Entwickler, die einen vollständigen benutzerdefinierten Build erstellen. Die Schaltflächengrößen, Positionen und Layout-CSS des Plugins bleiben in jedem Modus erhalten.
Zusammenfassung
Verwenden Sie Wishlist-Aktion (Einstellungen → Allgemein), um zu steuern, was nach einem Klick passiert. Verwenden Sie Schaltflächenplatzierung & Stile, um Beschriftungen, Platzierung, Farben und CSS-Laden für jede Seite festzulegen, auf der die Schaltfläche angezeigt wird, wobei Weiterleitung, Popup oder Ausblenden steuert, was nach einem Klick passiert.
Best Practices
- Passen Sie Farben und Stil der Schaltfläche an das Design Ihres Shops an
- Halten Sie Beschriftungen kurz und handlungsorientiert
- Testen Sie Schaltflächen auf Mobilgeräten auf Lesbarkeit und Tippgröße
- Verwenden Sie die Live-Vorschau, um Ihre Einstellungen vor dem Speichern zu bestätigen
Fehlerbehebung
Schaltflächenstil wird nach dem Speichern nicht aktualisiert
Wenn Sie Einstellungen ändern und die Schaltfläche im Frontend gleich aussieht, versuchen Sie, den Konfigurationsmodus von Voreinstellungen verwenden auf Benutzerdefinierte Einstellungen (oder umgekehrt) umzuschalten und erneut zu speichern. Leeren Sie auch alle Caching-Plugins oder den CDN-Cache. Zwischengespeichertes CSS kann verhindern, dass Stiländerungen angezeigt werden.
Wishlist-Schaltfläche kollidiert mit Theme-CSS
Wenn die Schaltfläche defekt aussieht oder mit Ihren Theme-Stilen kollidiert, gehen Sie zu SaveTo Wishlist → Einstellungen → Schaltflächenplatzierung & Stile → Frontend-Styling und wechseln Sie Frontend-CSS-Laden von Vollständiges Styling zu Minimales Styling. Dies ermöglicht es dem CSS Ihres Themes, Farben und Schriftarten zu überschreiben, wo sie kollidieren. Für einen vollständig benutzerdefinierten Build bietet Kein Styling eine leere Leinwand.
Häufig gestellte Fragen
Was ist der Unterschied zwischen Voreinstellungen verwenden und Benutzerdefinierte Einstellungen?
Voreinstellungen bieten Ihnen eine Reihe fertiger Stil-Kombinationen, sodass ein Klick ein koordiniertes Aussehen anwendet. Benutzerdefinierte Einstellungen schalten einzelne Steuerelemente für Farbe, Schriftgröße, Randbreite, Symbol und Hover-Effekte frei, sodass Sie alles manuell feinabstimmen können.
Was macht Fade visuell?
Auf Produkt- und Shop-Seiten zeigt ein Klick auf den Wunschlisten-Button eine kleine Bestätigungsnachricht (ein Häkchen-Symbol und „Zur [Wunschlistenname] hinzugefügt“), die neben dem Button eingeblendet wird, etwa zwei Sekunden lang verbleibt und dann ausgeblendet wird. Der Button selbst bleibt die ganze Zeit sichtbar. Auf der Warenkorb-Seite wird der Button „Warenkorb zur Wunschliste speichern“ kurz ausgeblendet, um das Speichern zu bestätigen. Es gibt kein Popup und keinen Seitenumbruch.
Werden meine Anpassungen übernommen, wenn ich das Theme wechsle?
Ja. Button-Stile werden in den Plugin-Einstellungen gespeichert, nicht in Ihrem Theme. Ein Theme-Wechsel setzt Ihren Beschriftungstext, Ihre Farben oder Ihre Platzierungsauswahl nicht zurück. Allerdings überschreiben einige Themes die Button-Stile mit ihrem eigenen CSS, daher lohnt es sich, das Erscheinungsbild nach einem Theme-Wechsel zu überprüfen.
Brauchen Sie Hilfe?
- Premium-Benutzer: Support-Ticket eröffnen
- Kostenlose Benutzer: Besuchen Sie unser Community-Forum
