Überprüft von Sie installieren ein Wunschlisten-Plugin in Ihrem Woostify-Shop und laden die Shop-Seite. Der Button sitzt irgendwo komisch. Er drängt sich auf den "In den Warenkorb"-Button oder kollidiert mit den eigenen Steuerelementen des Themes. Auf manchen Layouts wird er innerhalb der Produktkarte abgeschnitten.
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 für Produktlisten ergab, dass 80 % der E-Commerce-Websites ernsthafte Probleme mit ihren Produktlisten haben. Ein klares, durchdachtes Layout ist eine einfache Möglichkeit, sich abzuheben.
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 ist eine Kompatibilitäts-Stylesheet, die eigenständig geladen wird. Es gibt keinen Einrichtungsschritt und keinen Einstellungsbildschirm, nach dem man suchen müsste.
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 prüft, ob WooCommerce aktiv ist, bevor es startet. Wenn WooCommerce nicht aktiv ist, zeigt das Plugin eine Fehlermeldung in Ihrem Dashboard an und lädt seinen Hauptcontroller nicht.
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.
Die Kehrseite ist, dass für diese Integration keine Woostify-Version deklariert oder getestet wurde. Die Erkennung basiert allein auf dem Theme-Identifikator. Werfen Sie also einen kurzen Blick auf Ihre Seiten, egal welche Woostify-Version Sie verwenden, und erneut, nachdem Sie sie aktualisiert haben.
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 Administratorzugriff (manage_options), um ihn zu öffnen.
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 vom Produktbild: Gleiche Handhabung wie in der rechten Ecke. Wählen Sie jede Ecke, die in Ihrem Kartendesign frei ist.
- Ü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 "In den Warenkorb"-Button: Platziert die Speicheraktion direkt über der Kaufaktion.
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 "In den Warenkorb"-Button. Die Dokumentation empfiehlt sie nicht für Woostify und schließt sie auch nicht aus. Testen Sie sie mit Ihrem eigenen Produktlayout, bevor Sie sich dafür entscheiden.
Beide Dropdowns bieten auch die Option Nicht anzeigen. Die Wahl dieser Option verhindert, dass der Button-Rendering-Hook in diesem Kontext registriert wird. Der Button wird von vornherein nicht erstellt, anstatt erstellt und dann versteckt zu werden.
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.
Beachten Sie, dass sich die Ratschläge zwischen den beiden Kontexten umkehren. Die Bildecken werden auf Shop- und Archivseiten empfohlen, auf einzelnen Produktseiten jedoch abgeraten. Unter dem "In den Warenkorb"-Button ist es umgekehrt. Genau deshalb sind die beiden Dropdowns getrennt, also stellen Sie jeden einzeln ein.
⚙️ Wichtiger Einrichtungsschritt: SaveTo Wishlist Lite 1.1.1 speichert die Optionen für Shop- und Produktplatzierung nicht, wenn Sie es aktivieren. Das lässt zwei verschiedene Antworten auf die Frage „Was ist der Standard?“ übrig. Der Einstellungsbildschirm zeigt für beide Kontexte Unter dem Button „In den Warenkorb“ an. Aber während die Option noch nicht gespeichert ist, greift das Frontend für beide auf Oben rechts vom Produktbild zurück. Auf Woostify ist einer dieser beiden Werte eine zu vermeidende Platzierung in jedem Kontext, also gehen Sie nicht davon aus, dass der Einstellungsbildschirm Ihnen zeigt, was die Käufer tatsächlich sehen.
Die Korrektur dauert Sekunden: Öffnen Sie beide Platzierungs-Dropdowns, wählen Sie die gewünschte Platzierung aus und drücken Sie auf Speichern, auch wenn der Wert auf dem Bildschirm bereits richtig aussieht. Das Speichern schreibt die Option in die Datenbank, und von da an stimmen der Bildschirm und das Frontend überein.
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.
- Überprüfen Sie auf einer Shop- oder Archivseite, die eine Eckplatzierung verwendet, den Button. Sein Container sollte 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.
Ein fehlgeschlagenes Match ist völlig lautlos. Keine Fehlermeldung, keine Warnung, keine Admin-Benachrichtigung. Die Entwicklertools sind der einzige Ort, an dem es angezeigt wird, weshalb diese Überprüfung eine Minute Ihrer Zeit wert ist.
Arbeiten Sie tiefer im Code? Unser Leitfaden zur WooCommerce REST API für Wunschlisten behandelt den programmatischen Zugriff.
Gast-Wishlists sind wichtiger als das Styling
Eine Einstellung wirkt sich mehr auf Ihre Speicherquote aus 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, dass Gäste speichern können. Schalten Sie sie ein, 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 würden sie deaktiviert lassen. Baymards Benchmark für Produktseiten ergab, dass 89 % der untersuchten Websites Speicherfunktionen nicht einfach zugänglich und nutzbar machen. In einer separaten Umfrage unter 1.193 Käufern gaben 21 % an, dass sie sich auf Speicherfunktionen verlassen. Diese Lücke ist Ihre Chance.
Die gleiche Logik treibt die WooCommerce Gast-Checkout-Funktion 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 Gast-Formatierung 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.
- Seitenersteller und Block-Produktgitter: Die Regeln zielen auf Standard-Woostify-Karten-Markup ab. Gitter, die in einem Seitenersteller erstellt oder aus Produktblöcken zusammengestellt werden, fallen darunter, also überprüfen Sie sie visuell.
- Schnellansicht-Oberflächen: Es gibt keine Woostify-spezifische Handhabung für Schnellansicht-Modals, also überprüfen Sie Ihre visuell.
- Benutzerdefinierte Produkt-Loops: Eine Schleife, die in einer benutzerdefinierten Vorlage erstellt wurde, liegt außerhalb des getesteten Umfangs.
- Woostify Premium-Module und Begleit-Plugins: Für diese wurde keine Kompatibilität hergestellt.
- Warenkorb-Seitenverhalten: Die Warenkorb-Seite ist von dieser Integration ausgenommen. Kein Woostify-spezifischer Warenkorb-Code ist Teil davon.
Die Dokumentation behandelt SaveTo Wishlist Lite. Sie stellt keine Woostify-Kompatibilität für SaveTo Wishlist Pro oder das Geschenkkorb-Addon her, daher sollten Sie diese visuell überprüfen, wenn Sie sie verwenden.
Eine weitere wissenswerte Sache: Kein automatisierter Test in der Plugin-Suite aktiviert Woostify oder überprüft diese Kompatibilitätsregeln. Die allgemeinen Button-Tests laufen mit einem Standard-Theme. Das Woostify-Layout wird durch visuelle Inspektion bestätigt.
Benutzerdefinierte Layouts und spezielle Produkttypen (wie z. B. 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 angezeigt wird, wo Sie ihn haben möchten.
Lehnt sich Ihr Shop auf ungedeckte Kontexte? Unsere Integrationsanleitung 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?
Das Plugin prüft überhaupt keine Woostify-Version. Es prüft nur, ob der Theme-Identifikator woostify lautet. Daher wird keine Mindest-, Höchst- oder getestete Version für diese Integration deklariert. Das sorgt dafür, dass es auch bei Theme-Updates funktioniert, und deshalb ist eine schnelle visuelle Überprüfung nach einem Update lohnenswert.
Geben Sie der Speicher-Schaltfläche einen Platz zum Leben
Die Woostify-Integration ist bewusst klein gehalten. Ein Stylesheet, kein JavaScript, keine REST-Endpunkte, keine Datenbankeinträge, keine Einstellungsseite. Sie kümmert sich um das Layout, damit Ihr Speicher-Button wie ein Teil Ihres Themes aussieht und nicht wie etwas, das nachträglich angebracht wurde.
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.
