So passen Sie die Platzierung und Stile von Wunschzettel-Schaltflächen in WooCommerce an

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:

1. Button-Einstellungen: Wunschlisten-Button-Beschriftung, die Beschriftung, die nach dem Hinzufügen eines Produkts angezeigt wird, und Ein-/Aus-Schalter für unterstützte Plugins wie Quick View for WooCommerce (diese erscheinen nur, während dieses Plugin aktiv ist)
2. Frontend-Styling: Die Einstellung Frontend CSS Loading, die steuert, wie viel des Plugin-CSSs auf Ihrem Shop geladen wird (siehe unten im Abschnitt Frontend CSS Loading)
3. Produktseite: Button-Platzierung und -Stil auf einzelnen Produktseiten
4. Shop-Seite: Button-Platzierung und -Stil auf Produktlisten
5. Warenkorbseite: Stil und Beschriftung für den Button „Warenkorb zur Wunschliste hinzufügen“

Nachdem Sie eine Einstellung auf dieser Registerkarte geändert haben, klicken Sie auf Änderungen speichern.

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.

Wenn ein unterstütztes Plugin wie Quick View for WooCommerce aktiv ist, wird in diesem Abschnitt auch ein Ein-/Aus-Schalter dafür angezeigt. Siehe Verwendung des Buttons mit Quick View for WooCommerce unten.

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-Platzierung bestimmt, wo der Button auf der Produktseite erscheint. Die Standardeinstellung ist Oben rechts vom Produktbild, aber Sie können auch Oben links vom Produktbild, Über dem Button „In den Warenkorb“, Unter dem Button „In den Warenkorb“, Inline mit dem Button „In den Warenkorb“, Über dem Produkttitel oder Unter dem Produkttitel wählen. Um den Wunschzettel-Button auf einzelnen Produktseiten vollständig auszublenden, wählen Sie Nicht anzeigen.

Wenn Sie Inline mit dem Button „In den Warenkorb“ wählen, wird ein Feld Button-Abstand angezeigt, der Abstand in Pixel zwischen dem Button „In den Warenkorb“ und dem Wunschzettel-Button. Standardmäßig beträgt er 16px und kann von 0 bis 60px eingestellt werden. Ihr Wert gilt auf jedem Gerät. Auf Touchscreens wird ein Abstand unter 8px auf 8px erhöht, damit Kunden nicht auf den falschen Button tippen.

⚠️ Produkte ohne Preis oder nicht auf Lager: Ab Version 1.0.7 zeigen die Platzierungen Oberhalb des „In den Warenkorb“-Buttons, Unterhalb des „In den Warenkorb“-Buttons und Inline mit dem „In den Warenkorb“-Button den Wunschlisten-Button auch bei Produkten an, die keinen Preis haben, nicht auf Lager sind oder sich im Katalogmodus befinden. Diese Produkte blenden normalerweise das WooCommerce „In den Warenkorb“-Formular aus, sodass der Button stattdessen an einer nahegelegenen Stelle in der Produktzusammenfassung angezeigt wird, anstatt zu verschwinden.

Die nächste Einstellung ist Konfigurationsmodus. Wählen Sie Voreinstellungen verwenden, um aus vorgefertigten Stil-Kombinationen auszuwählen, Benutzerdefinierte Einstellungen, um Farben, Ränder und Text selbst festzulegen, oder Standard des Themes, um das eigene Erscheinungsbild des aktiven Themes zu übernehmen.

Schaltflächenfarben und -ränder festlegen

Die Felder für Farbe und Rand erscheinen unter Die Schaltfläche zur Wunschliste auf der Produktseite anpassen und nur, wenn Konfigurationsmodus auf Benutzerdefinierte Einstellungen gesetzt ist. Jedes Farbfeld öffnet eine Farbauswahl.

Feld	Was es ändert	Standard
Schaltflächentextfarbe	Die Farbe des Schaltflächentextes. Sie gilt für Schaltflächentypen, die Text anzeigen.	#1F2937
Schaltflächen-Hover-Textfarbe	Die Textfarbe, während ein Käufer mit der Maus über die Schaltfläche fährt.	#DC2626
Schaltflächen-Hintergrundfarbe	Die Füllfarbe hinter der Schaltfläche.	#FFFFFF
Schaltflächen-Hover-Hintergrundfarbe	Die Füllfarbe, während ein Käufer mit der Maus über die Schaltfläche fährt.	#F9FAFB
Schaltflächen-Randfarbe	Die Farbe des Schaltflächenrandes.	#E5E7EB
Schaltflächen-Hover-Randfarbe	Die Randfarbe, während ein Käufer mit der Maus über die Schaltfläche fährt.	#DC2626
Schaltflächen-Randbreite	Die Randstärke in Pixeln, von 0 bis 5.	1
Schaltflächen-Randradius	Wie rund die Ecken der Schaltfläche sind, in Pixeln, von 0 bis 50. Verwenden Sie 0 für eckige Ecken.	4
Vertikales Schaltflächen-Padding	Der Abstand über und unter dem Schaltflächeninhalt in Pixeln, von 0 bis 30.	3
Horizontales Schaltflächen-Padding	Der Abstand links und rechts vom Schaltflächeninhalt in Pixeln, von 0 bis 40.	8

Nicht jedes Feld gilt für jeden Schaltflächentyp. Die Randfarbe und -breite werden nur für Nur Text und die drei Pill-Schaltflächentypen angezeigt. Die Hintergrundfarben, der Randradius und das Padding gelten nicht für Nur Symbol, Vollständiges Symbol oder Minimales Symbol.

Wählen Sie den Button-Typ und den Textstil

Drei weitere Felder befinden sich am unteren Rand der benutzerdefinierten Einstellungen. Button Text Size legt die Größe des Button-Textes in Pixel fest, von 10 bis 24 (Standard 14). Button Text Style schaltet den Text zwischen Normal (Standard) und Kursiv um.

Button Type bestimmt, was der Button anzeigt und wie er aussieht. Die Standardeinstellung ist Minimal Icon and Text. Die Optionen sind:

• Nur Text
• Nur Symbol
• Symbol und Text
• Symbol und Text Pill
• Solides Symbol
• Solides Symbol und Text
• Solides Symbol und Text Pill
• Minimales Symbol
• Minimales Symbol und Text
• Minimales Symbol und Text Pill

Icon Only, Solid Icon und Minimal Icon zeigen nur das Symbol an, sodass die Felder für Text, Hintergrund, Rahmen und Abstand keine Änderungen für sie haben. Um die Symbolform selbst auszuwählen, siehe Auswahl eines Button-Symbols unten.

Profi-Tipp: Wenn Benutzerdefinierte Einstellungen ausgewählt sind, verwenden Sie die Live-Vorschau, um zu sehen, wie Ihr Button im normalen Zustand und 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-Platzierung ist standardmäßig oben rechts auf dem Produktbild, aber Sie können ihn auch in der oberen linken Ecke, oberhalb oder unterhalb des „In den Warenkorb“-Buttons oder oberhalb oder unterhalb des Produkttitels positionieren. Die Positionen in der oberen Ecke eignen sich am besten für Rasterseiten. Um den Wunschlisten-Button auf Shop-, Kategorie- und Archivseiten auszublenden, wählen Sie Nicht anzeigen.

Ähnlich wie der Abschnitt Produktseite verfügt er über die Option Configuration Mode. Wählen Sie Use Presets für eine schnelle Einrichtung mit vorgefertigten Kombinationen, Custom Settings, um jede Farbe, Schriftgröße, Rahmenbreite und jeden Textstil fein abzustimmen, um Ihr Shop-Branding anzupassen, oder Theme Default, um das Button-Erscheinungsbild Ihres aktiven Themes zu übernehmen. Die benutzerdefinierten Felder entsprechen denen der Produktseite, mit der Ausnahme, dass Button Type hier Button Style genannt wird.

Profi-Tipp: Für eine elegante, moderne Shop-Seite wählen Sie Benutzerdefinierte Einstellungen, setzen Sie Button-Stil auf Nur Symbol und verwenden Sie eine Platzierung in der oberen Ecke. Das spart Platz und hält die Wunschlisten-Option sichtbar.

Verwendung des Buttons mit Page Buildern

Wenn Sie Ihr Shop- oder Layout für Kategorien mit den Widgets Loop Grid oder Loop Carousel von Elementor Pro erstellen, wird der Wunschzettel-Button automatisch in jeder Produktkarte gerendert und verwendet die oben unter Shop-Seite festgelegte Platzierung. Es ist keine separate Einstellung erforderlich, aber Elementor Pro muss aktiv sein.

Produktgitter und Karussells von Premium Addons für Elementor erhalten den Button ebenfalls automatisch, entsprechend Ihrer Shop-Seiten-Platzierung. Oben rechts vom Produktbild und Oben links vom Produktbild zeigen den Button oben im Detailbereich der Karte anstelle des Bildes. Weitere Informationen finden Sie unter So fügen Sie den Wunschzettel-Button mit dem Elementor-Widget hinzu.

Wenn Sie den Button mit den eigenen Widgets oder Modulen eines Builders selbst platzieren, anstatt diese Einstellungen zu verwenden, lesen Sie die spezielle Anleitung für Ihren Builder: So fügen Sie den Wunschlisten-Button mit dem Elementor-Widget hinzu, So fügen Sie die Wunschliste zu Divi Builder-Layouts hinzu oder So fügen Sie die Wunschliste mit dem UX Builder von Flatsome zu einer Seite hinzu.

Verwendung des Buttons mit Blocksy

Wenn Ihr Shop das Blocksy Theme oder ein Blocksy Child Theme verwendet, benötigen Sie kein benutzerdefiniertes CSS. SaveTo Wishlist lädt automatisch seine eigenen Blocksy-Stile, sodass der Button perfekt zu den Shop-, Archiv- und einzelnen Produktseiten von Blocksy passt.

Auf der Shop-Seite funktioniert jede Platzierung bei Blocksy wie folgt:

• Oben rechts auf dem Produktbild, die Standardeinstellung, passt am besten, da Blocksy die obere linke Ecke der Karte für sein Sale-Badge verwendet.
• Oben links auf dem Produktbild verschiebt den Button unter ein Sale-, Nicht vorrätig- oder benutzerdefiniertes Blocksy-Badge, sodass es nicht verdeckt wird. Wenn das Badge sehr groß ist oder Sie mehr als ein Badge in dieser Ecke anzeigen, verwenden Sie Oben rechts auf dem Produktbild.
• Über dem Produkttitel und Unter dem Produkttitel zeigen beide den Button zwischen dem Produktbild und dem Titel an, da Blocksy seinen eigenen Titel rendert. Über dem In den Warenkorb Button zeigt ihn direkt unter dem Titel an. Unter dem In den Warenkorb Button zeigt ihn nach dem In den Warenkorb Button an. Alle vier folgen Ihrer Blocksy-Karten-Ausrichtung: links, mittig oder rechts.

Auf der Produktseite funktionieren alle sieben Platzierungen. Inline mit dem In den Warenkorb Button sitzt neben dem In den Warenkorb Button auf dem Desktop und rutscht auf schmalen Bildschirmen darunter. Oben links auf dem Produktbild rutscht ebenfalls unter ein Badge in dieser Ecke, genau wie auf der Shop-Seite.

Verwendung des Buttons mit Quick View for WooCommerce

Wenn Ihr Shop Reno Quick View von ShapedPlugin (früher Quick View for WooCommerce) verwendet, wird der Button „In Wunschliste speichern“ auch im Quick View-Popup angezeigt. Kunden können ein Produkt speichern, ohne seine Produktseite zu öffnen. Dies erfordert SaveTo Wishlist Lite 1.1.7 oder neuer.

Das Popup verwendet Ihre Produktseite-Platzierung und -Stil, sodass nichts extra eingerichtet werden muss. Einige Dinge funktionieren im Popup etwas anders:

• Oben rechts vom Produktbild und Oben links vom Produktbild zeigen den Button über dem Produkttitel an, nicht auf dem Bild.
• Bei einem variablen Produkt folgt der Button der Variante, die der Kunde im Popup auswählt.
• Wenn die Platzierung auf der Produktseite auf Nicht anzeigen gesetzt ist, zeigt das Popup den Button ebenfalls nicht an.

Um den Button aus dem Popup herauszuhalten, ihn aber auf Ihren Produktseiten anzuzeigen:

1. Gehen Sie zu SaveTo Wishlist → Einstellungen → Button-Platzierung & Stile → Button-Einstellungen.
2. Schalten Sie In Quick View für WooCommerce anzeigen aus.
3. Klicken Sie auf Änderungen speichern.

Der Schalter ist standardmäßig aktiviert. Er erscheint nur, während Quick View für WooCommerce aktiv ist.

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.

Das Cart Button Label hat standardmäßig „Save Cart to Wishlist“. Sie können es in etwas Freundlicheres wie Save Cart for Later oder ♥ Save My Cart ändern. Die gleichen Button-Stil-, Farb-, Rahmen- und Textoptionen, 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 enthält auch die Option Configuration Mode: Wählen Sie Use Presets für eine schnelle Einrichtung, Custom Settings, um die Farben, Rahmen und den Text selbst zu steuern, oder Theme Default, um das Button-Erscheinungsbild Ihres aktiven Themes zu übernehmen. Wie auf der Shop-Seite wird Button Type hier Button Style genannt.

Auswahl eines Button-Icons

Wenn Sie den Konfigurationsmodus auf Benutzerdefinierte Einstellungen auf der Produkt-, Shop- oder Warenkorb-Seite umschalten, wird für diese Seite eine Einstellung für Button-Icon angezeigt. Wählen Sie aus Herz (Standard), Stern, Lesezeichen oder Plus, oder wählen Sie Benutzerdefiniertes Bild, um einen Benutzerdefiniertes Button-Icon-Uploader anzuzeigen. Der Button zeigt weiterhin ein Herz an, bis ein Bild hochgeladen wird.

Die gleichen benutzerdefinierten Einstellungen umfassen auch Button Icon Color und Button Hover Icon Color (beide standardmäßig #DC2626) und Button Icon Size von 12 bis 40 Pixel (Standard 20). Die Felder für die Symbolfarbe sind ausgeblendet, wenn Sie Custom Image auswählen, da sie ein hochgeladenes Bild nicht ändern können.

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 Wunschlisten-Aktion (Einstellungen → Allgemein), um zu steuern, was nach einem Klick passiert. Verwenden Sie Button-Platzierung & Stile, um Beschriftungen, Platzierung, Farben und CSS-Laden für jede Seite festzulegen, auf der der Button angezeigt wird.

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.

Wishlist-Button fehlt im Quick View Popup
Gehen Sie zu SaveTo Wishlist → Einstellungen → Button-Platzierung & Stile → Button-Einstellungen und stellen Sie sicher, dass In Quick View für WooCommerce anzeigen aktiviert ist. Überprüfen Sie dann, ob die Platzierung auf der Produktseite nicht auf Nicht anzeigen gesetzt ist. Wenn nur abgemeldete Käufer ihn nicht sehen können, ist wahrscheinlich Gast-Wishlist deaktivieren unter Einstellungen → Gast-Optionen aktiviert, was den Button für Gäste überall ausblendet.

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