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.
Die Einstellung Selected Wishlist Button Action (Aktion für ausgewählte Wunschlisten-Schaltfläche) bestimmt, was passiert, wenn ein Käufer auf die Schaltfläche eines Produkts klickt, das sich bereits in seiner Wunschliste befindet. Die Standardeinstellung ist Remove from Wishlist (Aus Wunschliste entfernen), womit das Produkt mit einem Klick wieder entfernt wird. Wechseln Sie zu View Wishlist (Wunschliste anzeigen), um den Käufer stattdessen zu seiner Wunschlisten-Seite zu leiten.
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.
Die Einstellung Button Placement (Platzierung der Schaltfläche) legt fest, wo die Schaltfläche auf der Produktseite erscheint. Die Standardeinstellung ist Below the Add to Cart Button (Unter der Schaltfläche „In den Warenkorb“), aber Sie können auch Above the Add to Cart Button (Über der Schaltfläche „In den Warenkorb“), Inline with the Add to Cart Button (Auf gleicher Höhe mit der Schaltfläche „In den Warenkorb“), Above the Product Title (Über dem Produkttitel), Below the Product Title (Unter dem Produkttitel), Top Right of the Product Image (Oben rechts auf dem Produktbild) oder Top Left of the Product Image (Oben links auf dem Produktbild) wählen. Um die Wunschlisten-Schaltfläche auf einzelnen Produktseiten vollständig auszublenden, wählen Sie Don’t show (Nicht anzeigen).
⚠️ 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 Configuration Mode (Konfigurationsmodus). Wählen Sie Use Presets (Voreinstellungen verwenden), um aus vorgefertigten Stil-Kombinationen auszuwählen, Custom Settings (Benutzerdefinierte Einstellungen), um manuell auf den vollständigen Farbwähler, Schriftarten und Größenregler zuzugreifen, oder Theme Default (Theme-Standard), um das Erscheinungsbild der Schaltfläche Ihres aktiven Themes zu übernehmen.
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.
Die Einstellung Button Placement (Platzierung der Schaltfläche) ist standardmäßig unter der Schaltfläche „In den Warenkorb“ platziert, aber Sie können die Schaltfläche auch in den oberen Ecken von Produktbildern oder über/unter Produkttiteln positionieren. Für einen sauberen, modernen Look auf Rasterseiten funktioniert die Position in der oberen Ecke in der Regel sehr gut. Um die Wunschlisten-Schaltfläche auf Shop-, Kategorie- und Archivseiten auszublenden, wählen Sie Don’t show (Nicht anzeigen).
Ähnlich wie im Abschnitt „Produktseite“ gibt es die Option Configuration Mode (Konfigurationsmodus). Wählen Sie Use Presets (Voreinstellungen verwenden) für eine schnelle Einrichtung mit vorgefertigten Kombinationen, Custom Settings (Benutzerdefinierte Einstellungen), um jede Farbe, Schriftgröße, Rahmenbreite und jeden Textstil fein abzustimmen, damit sie zu Ihrem Shop-Branding passen, oder Theme Default (Theme-Standard), um das Erscheinungsbild der Schaltfläche Ihres aktiven Themes zu übernehmen.
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 ebenfalls die Option Configuration Mode (Konfigurationsmodus): Wählen Sie Use Presets (Voreinstellungen verwenden) für eine schnelle Einrichtung, Custom Settings (Benutzerdefinierte Einstellungen), um Farben, Schriftarten und Größen selbst zu steuern, oder Theme Default (Theme-Standard), um das Erscheinungsbild der Schaltfläche Ihres aktiven Themes zu übernehmen.
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:
- Full styling: use the plugin’s colors and fonts (default) (Vollständiges Styling: Verwenden Sie die Farben und Schriftarten des Plugins) (Standard). Lädt die vollständige Stylesheet des Plugins. Funktioniert auf Anhieb für die meisten Shops.
- Minimal styling: let your theme override colors and fonts (Minimales Styling: Lassen Sie Ihr Theme Farben und Schriftarten überschreiben). Lädt Farben und Hintergründe ohne
!important-Überschreibungen, sodass die CSS Ihres Themes gewinnen kann, wo sie in Konflikt geraten. Versuchen Sie dies zuerst, wenn die Wunschlisten-Schaltfläche mit Ihrem Theme kollidiert. - No styling: inherit colors and fonts from the active theme (Kein Styling: Übernehmen Sie Farben und Schriftarten vom aktiven Theme). Verwirft die Farben und Schriftarten des Plugins, sodass die Schaltfläche diese aus Ihrem Theme übernimmt. Am besten für Entwickler, die eine vollständige benutzerdefinierte Erstellung durchführen. Die Größen, Positionen und Layout-CSS der Schaltfläche 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
