Überprüft von Sie installieren ein Wishlist-Plugin in Ihrem Woostify-Shop und laden die Shop-Seite. Die Schaltfläche befindet sich irgendwo seltsam. Sie drängt sich neben die Schaltfläche 'In den Warenkorb' oder versteckt sich hinter einem Produktbild. Manchmal verschwindet sie, wenn Sie mit der Maus über eine Produktkarte fahren.
Das ist kein kleines kosmetisches Problem. Eine Woostify-Wishlist-Schaltfläche, die niemand finden kann, ist ein Speicher, der nie stattfindet. Und ein Speicher, der nie stattfindet, ist ein Käufer, den Sie nicht zurückbringen können.
Hier sind die guten Nachrichten: SaveTo Wishlist Lite kümmert sich um das Styling, sobald es Woostify erkennt. Wo der Button platziert werden soll, kann es jedoch nicht für Sie entscheiden.
Dieser Leitfaden behandelt daher beide Aspekte. Erstens, was die Integration von selbst leistet. Zweitens, die Platzierungsoptionen, die Sie für ein nahtloses Layout wählen, einschließlich zweier spezifischer Positionen, die Sie vermeiden sollten.
Inhaltsverzeichnis
- Warum die Platzierung der Wishlist-Schaltfläche darüber entscheidet, ob Käufer speichern
- Was die Integration von SaveTo Wishlist und Woostify tatsächlich tut
- Was Sie vor dem Start benötigen
- So richten Sie Ihre Woostify Wishlist-Schaltflächen ein
- Die beiden Platzierungen, die Sie bei Woostify vermeiden sollten
- So bestätigen Sie, dass die Woostify-Styles geladen werden
- Gast-Wishlists sind wichtiger als das Styling
- Geltungsbereich & Kompatibilitätsrichtlinien
- Häufig gestellte Fragen: SaveTo Wishlist und Woostify
- Geben Sie der Speicher-Schaltfläche einen Platz zum Leben
Warum die Platzierung der Wishlist-Schaltfläche darüber entscheidet, ob Käufer speichern
Eine Wunschliste lohnt sich nur, wenn Käufer sie tatsächlich nutzen, und die Platzierung spielt eine große Rolle. Branchenbelege zeigen, wie viel Spielraum es für herausragendes Design gibt.
Der Produktseiten-UX-Benchmark des Baymard Institute wurde im März 2026 aktualisiert. Er ergab, dass 52 % der führenden Desktop-E-Commerce-Websites eine mittelmäßige oder schlechtere Leistung auf Produktseiten aufweisen. Auf Mobilgeräten steigt dieser Wert auf 62 %. Der Benchmark umfasst 155 oder mehr Websites und über 30.000 manuell bewertete Ergebnisse.
Produktlisten bieten eine noch größere Chance. Baymards Benchmark ergab, dass 80 % der E-Commerce-Websites erheblichen Verbesserungsbedarf bei der Benutzerfreundlichkeit von Produktlisten haben. Das bedeutet, dass ein klares, durchdachtes Layout Ihren Shop sofort von anderen abhebt.
Dann gibt es noch die Geräteaufteilung. Adobe Analytics berichtete, dass Mobilgeräte während der Feiertagssaison 2025 56,4 % der Online-Transaktionen ausmachten, gegenüber 54,5 % im Vorjahr. Das Testen Ihrer Platzierung auf Desktop- und Mobilbildschirmen gewährleistet ein nahtloses Erlebnis für alle Käufer.
🔍️ Eine Sache, die wir immer wieder sehen: Ein Shop-Betreiber wählt eine Platzierung, überprüft sie einmal auf einem Laptop und macht weiter. Die Probleme treten fast immer woanders auf. Normalerweise auf einem Kategorie-Archiv, einem variablen Produkt oder auf einem Handy. Überprüfen Sie alle drei, bevor Sie es als erledigt betrachten.
Möchten Sie das Gesamtbild von Käufern, die schauen und gehen? Unser Leitfaden zu WooCommerce Browse Abandonment behandelt dieses Muster im Detail.
Was die Integration von SaveTo Wishlist und Woostify tatsächlich tut
Die Integration funktioniert automatisch als leichtgewichtige Kompatibilitäts-Stylesheet, hält Ihren Shop schnell und erspart Ihnen das Durchsuchen komplexer Einstellungsbildschirme.
SaveTo Wishlist Lite 1.1.1 prüft die aktive WordPress-Template-Kennung. Wenn es genau woostify liest, lädt das Plugin ein zusätzliches Stylesheet. Dieses Stylesheet liegt über dem von Ihnen gewählten Basis-Frontend-Stylesheet. Es passt dann Stapelung, Ausrichtung und Abstände an, damit der Button zu Woostifys Markup passt.
Hier ist, was es ändert und was es bewusst unverändert lässt.
| Kontext | Was das Woostify-Stylesheet anpasst |
|---|---|
| Shop und Archiv, Platzierungen auf dem Bild | Hebt den Button-Container auf z-index: 3 an, sodass er über dem Produktbild gestapelt wird |
| Shop und Archiv, Inline-Platzierungen | Setzt ein vertikales Flex-Layout mit einem oberen Rand von 10 Pixeln. Passt auch die Links-, Zentrierungs- und Rechtsausrichtung von Woostify an |
| Einzelprodukt-Zusammenfassung | Fügt einen oberen Abstand von 12 Pixel hinzu, um einen sauberen, ausgewogenen Abstand zum darüber liegenden Element zu schaffen. |
| Farben, Typografie, Rahmen, Größenanpassung | Bleibt unverändert. Diese bleiben über Ihre Plugin- und Theme-Einstellungen vollständig anpassbar. |
Unser Leitfaden zur Anpassung des Wunschlisten-Buttons behandelt die Einstellungen, die das Erscheinungsbild steuern.
Was die Integration nicht tut
Die Liste der Dinge, die die SaveTo Wishlist- und Woostify-Integration nicht tut, ist ebenso nützlich. Sie fügt kein JavaScript, keine REST-Endpunkte und keine Datenbankeinträge hinzu. Sie verarbeitet keine Benutzerdaten. Sie registriert auch keine Woostify-spezifischen Rendering-Hooks und fügt keine Woostify-Einstellungsseite hinzu.
Da die Integration automatisch im Hintergrund läuft, müssen Sie nicht nach einem speziellen Woostify-Einstellungs-Tab oder -Schalter suchen. Die Erkennung erfolgt automatisch, und keine Einstellung schaltet das Woostify-Stylesheet von selbst ein oder aus.
Child-Themes werden ebenfalls abgedeckt. Führen Sie ein Child-Theme aus, dessen übergeordneter Bezeichner immer noch woostify ist, und das Stylesheet wird auf die gleiche Weise geladen. Der eigene Bezeichner des Child-Themes wird nicht zur Erkennung verwendet.
Selbst wenn eine angepasste Einrichtung die automatische Erkennung verhindert, bleibt Ihre Website vollständig funktionsfähig. SaveTo Wishlist Lite greift nahtlos auf sein Standard-Stylesheet zurück, um sicherzustellen, dass Ihre Buttons weiterhin reibungslos funktionieren.
Was Sie vor dem Start benötigen
Die Anforderungen sind kurz, und jede einzelne ist für die Ausführung der Integration unerlässlich.
| Komponente | Anforderung |
|---|---|
| SaveTo Wishlist Lite | 1.1.1 oder neuer |
| WordPress | 5.8 oder neuer, getestet bis 7.0 |
| PHP | 7.4 oder neuer |
| WooCommerce | 4.0 oder neuer, getestet bis 10.2 |
| Aktives Theme | Woostify oder ein Child-Theme, das auf Woostify basiert |
SaveTo Wishlist Lite überprüft automatisch, ob WooCommerce aktiv ist, bevor es initialisiert wird, und hält Ihr Dashboard reibungslos und sicher am Laufen.
Zwei Dinge, die Sie nicht brauchen: einen kostenpflichtigen Plan und eine bestimmte Woostify-Version. Das Kompatibilitäts-Stylesheet ist in SaveTo Wishlist Lite, der kostenlosen Version, enthalten. Außerdem prüft der Code keine Woostify-Version, Lizenz oder Begleitplugin. Es gibt auch keine kostenlose vs. Pro-Unterscheidung auf der Woostify-Seite.
Dies bietet Ihnen breite Kompatibilität über verschiedene Woostify-Versionen hinweg. Wir empfehlen immer, Ihre Seiten auf Ihrer aktiven Theme-Version kurz visuell zu überprüfen, um sicherzustellen, dass alles wie erwartet passt.
So richten Sie Ihre Woostify Wishlist-Schaltflächen ein
Die Woostify-Integration funktioniert auf Anhieb, sodass Sie sich ganz auf die Auswahl der Platzierung konzentrieren können, die Ihrem Shop das professionellste Aussehen verleiht.
Die Platzierung ist einer der Hebel, die wir in unserem Leitfaden zur Optimierung der Wunschlisten-Konversion behandeln.
Alles befindet sich auf einem Bildschirm: SaveTo Wishlist → Einstellungen → Button-Platzierung & Stile. Sie benötigen Administratorberechtigungen (manage_options), um auf diesen Bildschirm zuzugreifen, um sicherzustellen, dass die Styling-Einstellungen Ihrer Website sicher bleiben.
Legen Sie Ihre Shop- und Archivplatzierung fest
Öffnen Sie unter Shop-Seite das Dropdown-Menü Button-Platzierung. Diese eine Steuerung umfasst Ihre Haupt-Shop-Seite, Produktkategorie-Seiten und andere Produktarchive. Fünf Optionen sind dafür dokumentiert, dass sie gut mit den Produktkarten von Woostify funktionieren.
Advanced Coupons hat einen guten Faustregel in seinem Leitfaden zur Optimierung einer E-Commerce-Website: Können Sie den Button schon von der anderen Seite des Raumes aus erkennen?
- Oben rechts auf dem Produktbild: Das Stylesheet stapelt den Button über dem Bild.
- Oben links auf dem Produktbild: Gleiche Handhabung wie in der rechten Ecke. Wählen Sie jede Ecke, die Ihre Verkaufs-Badges nicht bereits verwenden.
- Über dem Produkttitel: Sitzt im Karteninhaltsbereich von Woostify und übernimmt Ihre Karten-Ausrichtung.
- Unter dem Produkttitel: Sitzt unter dem Titel, sodass lange Titel ihn nach unten verschieben, anstatt ihn zu überladen.
- Über dem Button „In den Warenkorb“: Hält die Speicheraktion neben der Kaufaktion, ohne mit ihr zu konkurrieren.
Die drei Platzierungen im Inhaltsbereich übernehmen automatisch die Ausrichtung von Woostify. Stellen Sie Ihre Produktkarten auf zentrierten Text ein, und der Button wird zentriert. Links und rechts ausgerichtete Karten verhalten sich genauso.
Legen Sie Ihre Platzierung für einzelne Produkte fest
Unter Produktseite finden Sie ein zweites Dropdown-Menü für die Button-Platzierung. Die beiden Einstellungen arbeiten unabhängig voneinander, sodass eine Änderung der einen keinen Einfluss auf die andere hat.
Vier Platzierungen sind als gut funktionierend auf Woostify-Produktseiten dokumentiert.
- Über dem Button „In den Warenkorb“: Platziert die Speicheroption vor den Käufern, bevor sie sich entscheiden.
- Unter dem Button „In den Warenkorb“: Der Standard der Einstellungsbildschirms selbst, und er übernimmt den oberen Rand von 12 Pixel.
- Über dem Produkttitel: Nützlich, wenn Ihre Produktzusammenfassung lang wird und Sie die Speicheraktion früh sichtbar haben möchten.
- Unter dem Produkttitel: Sitzt beim Titelblock und nicht bei den Kaufsteuerelementen.
Es gibt eine fünfte Option: Inline mit dem Button „In den Warenkorb“. Testen Sie diese Position gerne gegen Ihr benutzerdefiniertes Produktlayout, um zu sehen, ob sie zu Ihrem Theme-Design passt.
Beide Dropdown-Menüs enthalten auch die Option Nicht anzeigen. Die Auswahl dieser Option verhindert, dass der Rendering-Hook für den Button in diesem Kontext registriert wird. Das ist sauberer, als den Button mit CSS zu verstecken.
Wählen Sie, wie viel Styling geladen werden soll
Finden Sie auf demselben Bildschirm Frontend-Styling und die Einstellung mit der Bezeichnung Frontend CSS Loading. Sie wählt aus, welches Basis-Stylesheet geladen wird. Das Woostify-Stylesheet wird dann über das von Ihnen gewählte geladen.
- Vollständiges Styling: Verwendet die eigenen Farben und Schriftarten des Plugins. Dies ist der Standard des Herstellers.
- Minimales Styling: Lässt Ihr Theme Farben und Schriftarten überschreiben.
- Kein Styling: Lädt nur die Positionierung und übernimmt visuell alles von Woostify.
Haben Sie die Typografie und Farben von Woostify bereits abgestimmt? Dann ergibt Minimal oder Kein Styling normalerweise ein natürlicheres Ergebnis. Wichtig ist, dass die Woostify-Layoutregeln in allen drei Modi aktiv bleiben. Sie tauschen die Integration nicht gegen Theme-Farben ein.
Jeder Modus lädt eine andere Stylesheet-Datei, daher ändert Ihre Wahl auch, was der Browser herunterlädt. Wenn das Frontend-Gewicht für Sie wichtig ist, misst unser WooCommerce Wishlist Plugin Geschwindigkeitstest, was SaveTo Wishlist tatsächlich zu einer Seite hinzufügt.
Die beiden Platzierungen, die Sie bei Woostify vermeiden sollten
Um das sauberste Layout direkt nach der Installation zu gewährleisten, gibt es hier zwei Platzierungsoptionen, die Sie für Woostify umgehen möchten.
- Auf Shop- und Archivseiten vermeiden Sie "Unter dem Hinzufügen-zum-Warenkorb-Button". Woostify rendert diese Zeile in einem animierten Bereich mit fester Höhe auf Desktop-Produktkarten. Der Wunschlisten-Button kann dort abgeschnitten werden, wodurch er teilweise oder ganz verborgen wird.
- Auf einzelnen Produktseiten vermeiden Sie die beiden Platzierungen auf dem Bild. Woostify verwendet eine benutzerdefinierte Produktgalerie, und Buttons in der oberen Ecke werden darin nicht zuverlässig angezeigt.
Diese Empfehlungen sind kontextspezifisch. Bildecken sehen auf Shop-Karten gut aus, sind aber nicht ideal für Produktgalerien, während "Unter dem Hinzufügen-zum-Warenkorb-Button" auf einzelnen Produktseiten am besten funktioniert. Wenn Sie jeden Kontext unabhängig einstellen, bleiben Ihre Buttons über alle Vorlagen hinweg sauber.
⚙️ Wichtiger Einrichtungsschritt: SaveTo Wishlist Lite 1.1.1 wendet Platzierungsoptionen nach der Aktivierung nicht automatisch an. Wenn Sie diese unverändert lassen, verwenden beide Kontexte Standardwerte – Oben rechts auf dem Produktbild auf Produktseiten und Unter dem Hinzufügen-zum-Warenkorb-Button auf Shop-Seiten. Bei Woostify stellen Sie durch die Aktualisierung dieser Standardwerte sicher, dass Ihre Buttons perfekt zum Layout des Themes passen.
Die Korrektur dauert Sekunden: Öffnen Sie beide Platzierungs-Dropdowns, wählen Sie die empfohlenen Optionen und klicken Sie auf Speichern, auch wenn die Werte auf dem Bildschirm bereits korrekt aussehen. Das Speichern schreibt die Optionen in die Datenbank und beendet das Rätselraten.
So bestätigen Sie, dass die Woostify-Styles geladen werden
Da es keine Einstellung zum Überprüfen gibt, erfolgt die Verifizierung im Browser. Das dauert etwa eine Minute.
- Bestätigen Sie, dass Woostify oder ein Woostify-Child-Theme unter Darstellung → Themes aktiv ist.
- Laden Sie eine beliebige Frontend-Seite und öffnen Sie die Entwicklertools Ihres Browsers.
- Suchen Sie im Seitenquelltext nach
savetowishlist-woostify.css. Diese Datei ist die Integration. - Überprüfen Sie die Reihenfolge. Sie muss nach dem Haupt-Stylesheet für das SaveTo Wishlist-Frontend geladen werden, da sie davon abhängt.
- Untersuchen Sie einen Button. Bei einer Platzierung in der Ecke sollte der Container auf
z-index: 3aufgelöst werden. - In einer einzelnen Produktzusammenfassung sollte dieser Container einen oberen Rand von 12 Pixeln haben.
Wenn die Datei nicht angezeigt wird, überprüfen Sie Ihren Template-Identifier erneut. Die Erkennung stimmt exakt mit woostify überein, sodass ein Theme, das umbenannt wurde oder von diesem Identifier abweicht, das Stylesheet nicht auslöst.
Da die Erkennung leise im Hintergrund läuft, ohne Pop-ups für Administratoren, bestätigt eine schnelle Überprüfung in den Entwicklertools, dass Ihre Assets perfekt geladen werden.
Arbeiten Sie tiefer im Code? Unser Anleitungsleitfaden zur REST-API für Wunschlisten deckt den programmatischen Zugriff ab.
Gast-Wishlists sind wichtiger als das Styling
Eine Einstellung tut mehr für Ihre Speicherquote als jede Stilentscheidung. Es ist, ob abgemeldete Käufer den Button überhaupt nutzen können.
Die Steuerung ist Gäste-Wunschliste deaktivieren und sie ist standardmäßig deaktiviert. Das bedeutet, Gäste können speichern. Aktivieren Sie sie, und SaveTo Wishlist Lite hört auf, seine Shop- und Produkt-Button-Hooks für abgemeldete Besucher zu registrieren. Der Button erscheint überhaupt nicht.
Wir empfehlen dringend, diese Standardeinstellung aktiviert zu lassen. Baymards Benchmark für Produktseiten ergab, dass 89 % der Websites Speicherfunktionen für Gäste nicht leicht zugänglich machen, was bedeutet, dass Sie eine großartige Gelegenheit haben, sich abzuheben. Inzwischen sagen 21 % der befragten Käufer, dass sie sich auf Speicherfunktionen verlassen. Diese Lücke ist die Gelegenheit.
Die gleiche Logik treibt die WooCommerce-Gäste-Kaufabwicklung an: Wichtige Aktionen für Gäste nahtlos zu gestalten, fördert das Engagement und erhöht die Konversionen.
Die Woostify-Integration verzweigt nicht nach dem Anmeldestatus. Gäste und angemeldete Kunden erhalten die gleichen Platzierungen und die gleichen Layoutregeln. Es gibt keine separate Gästestilistik zu konfigurieren.
Geltungsbereich & Kompatibilitätsrichtlinien
Die Stylesheet zielt auf Standard-WooCommerce- und Woostify-Markup ab. Wo Ihr Shop von diesem Markup abweicht, hören die Regeln auf zu passen.
- Page Builder und Block-Produktgitter: Entwickelt für Standard-Woostify-Karten-Markup; benutzerdefinierte Blockgitter sollten per Augenprüfung überprüft werden.
- Schnellansicht-Oberflächen: Verwendet Standard-Button-Platzierung; überprüfen Sie Ihr Modal-Layout, um die richtige Ausrichtung sicherzustellen.
- Benutzerdefinierte Produkt-Loops: Ein Loop, der in einer benutzerdefinierten Vorlage erstellt wurde, liegt außerhalb des getesteten Umfangs.
- Woostify Premium-Module und Begleit-Plugins: Es wurde keine Kompatibilität für diese hergestellt.
- Warenkorb-Seitenverhalten: Warenkorb-Layouts werden separat behandelt und sind von dieser spezifischen Woostify-Integration nicht betroffen.
Dieses Stylesheet konzentriert sich speziell auf Kern-Wunschlisten-Layouts in SaveTo Wishlist Lite. Wenn Sie erweiterte Erweiterungen verwenden (wie WooCommerce Wishlist Pro oder Geschenkregister-Addon-Funktionen), stellt eine schnelle visuelle Überprüfung sicher, dass alles wie beabsichtigt gerendert wird.
Während Kernfunktionen kontinuierlich automatisiert getestet werden, wird die benutzerdefinierte Theme-Formatierung am besten mit einer schnellen visuellen Überprüfung in Ihrem Live-Shop verifiziert.
Benutzerdefinierte Layouts und spezielle Produkttypen (wie nicht vorrätige oder nicht käufliche Artikel) sind einfach eine schnelle visuelle Überprüfung in Ihrem Live-Shop wert, um sicherzustellen, dass der Button genau dort gerendert wird, wo Sie ihn haben möchten.
Lehnt sich Ihr Shop auf nicht abgedeckte Kontexte? Unser Integrationsleitfaden für Produkttabellen zeigt, wie ein anderer Layout-Kontext behandelt wird.
Häufig gestellte Fragen: SaveTo Wishlist und Woostify
Muss ich die Woostify-Integration aktivieren?
Nein. Es gibt keine Woostify-Einstellungsseite, keinen Schalter und keine Option, die das Stylesheet eigenständig steuert. SaveTo Wishlist Lite prüft die aktive Template-Kennung, wenn es Frontend-Assets lädt. Wenn es woostify liest, wird das Stylesheet automatisch eingebunden.
Funktioniert es mit einem Woostify-Child-Theme?
Ja. Die Erkennung betrachtet die Kennung des übergeordneten Templates, nicht die des Child-Themes selbst. Solange das übergeordnete Template woostify ist, wird das Kompatibilitäts-Stylesheet normal geladen.
Benötige ich SaveTo Wishlist Pro dafür?
Nein. Das Woostify-Kompatibilitäts-Stylesheet ist in SaveTo Wishlist Lite, der kostenlosen Version, ab Release 1.1.1 enthalten. Bezahlte Pläne fügen Wunschlisten-Analysen, Preisalarm-Benachrichtigungen und Benachrichtigungen bei Wiederverfügbarkeit hinzu. Keine davon ist für die Woostify-Layout-Unterstützung erforderlich.
Welche Woostify-Version wird unterstützt?
SaveTo Wishlist Lite unterstützt automatisch aktuelle Woostify-Versionen durch Template-Identifikation und bietet Ihnen volle Flexibilität bei Theme-Updates. Wir empfehlen immer, Ihre aktive Theme-Version bei der Anpassung von Layouts kurz visuell zu überprüfen.
Geben Sie der Speicher-Schaltfläche einen Platz zum Leben
Die Woostify-Integration ist schlank, schnell und mühelos konzipiert. Sie beseitigt Layout-Reibungen, sodass Ihre Speicher-Buttons wie ein natürlicher, integrierter Bestandteil Ihres Themes aussehen und leise im Hintergrund arbeiten, ohne unnötigen Ballast hinzuzufügen.
Alles, was übrig bleibt, ist die Auswahl der Platzierungen, die Ihre Produkte am besten hervorheben und zum Stil Ihres Shops passen.
- Bestätigen Sie die Anforderungen und dass Woostify das aktive Template ist (was Sie brauchen).
- Öffnen Sie beide Platzierungs-Dropdowns und speichern Sie sie explizit, auch wenn sie korrekt aussehen (wie man einrichtet).
- Wählen Sie empfohlene Layout-Positionen für Shop-Archive und einzelne Produktseiten (zu vermeidende Platzierungen).
- Stellen Sie sicher, dass das Kompatibilitäts-Stylesheet geladen wird, um Ihre Theme-Einrichtung zu überprüfen (wie man bestätigt).
- Halten Sie Gast-Wunschlisten aktiviert, um die Speicherungen der Käufer zu maximieren (Gast-Wunschlisten).
- Überprüfen Sie Page-Builder-Grids, Quick Views und benutzerdefinierte Schleifen auf Ihrer Live-Website (Einschränkungen).
Ihre Woostify Wunschlisten-Buttons sollten so aussehen, als wären sie zusammen mit Ihrem Theme entworfen worden, nicht nachträglich angebracht. Unser Woostify-Einrichtungsleitfaden führt Sie durch den Einstellungsbildschirm. Oder vergleichen Sie, was jeder Plan beinhaltet, auf der SaveTo Wishlist Preisübersicht.
