Erstellen Sie Ihre Produktseiten in Elementor und der Wunschzettel-Button lässt sich nicht dort platzieren, wo Sie ihn haben möchten? SaveTo Wishlist bietet ein natives Elementor-Widget, sodass Sie den Button genau dort platzieren können, wo er hingehört, anstatt sich auf die automatische Platzierung des Plugins zu verlassen. Diese Anleitung behandelt das Hinzufügen des Widgets, dessen Styling, die Verwendung in Produkt-Grids und die Behebung der häufigsten Probleme.
Was Sie benötigen
- Elementor, kostenlos oder Pro.
- SaveTo Wishlist Lite Version 1.1.3 oder neuer. Frühere Versionen enthalten das Widget nicht.
- WooCommerce, mit mindestens einem veröffentlichten Produkt.
- Eine Vorlage oder Seite, die ein Produkt zum Arbeiten enthält, wie z. B. eine einzelne Produktvorlage oder eine Produkt-Schleife.
Das Widget liest Ihre vorhandenen Wunschzettel-Einstellungen, sodass nichts zuerst eingerichtet werden muss. Ziehen Sie es auf eine Vorlage und es rendert denselben Button, den Ihr Shop bereits anzeigt.
Fügen Sie das Widget zu einer Produktvorlage hinzu
- Öffnen Sie die Produktvorlage oder Seite, die Sie in Elementor bearbeiten möchten.
- Suchen Sie im Widget-Panel nach Save to Wishlist.
- Ziehen Sie das Widget per Drag & Drop an die Stelle in Ihrem Layout, an der der Button erscheinen soll.
- Klicken Sie auf Aktualisieren, um zu speichern.
Der Button erscheint sowohl unter den Kategorien WooCommerce als auch Allgemein im Panel, sodass beide funktionieren, wenn Sie lieber stöbern als suchen.
Der Button wird sofort mit Ihren aktuellen Wunschzettel-Einstellungen gerendert. Wenn nichts angezeigt wird, siehe den Fehlerbehebungsabschnitt unten.
Wählen Sie den Button-Typ
Öffnen Sie den Abschnitt Wishlist Button auf der Registerkarte Content. Er enthält eine Einstellung.
- Stellen Sie Button Type auf den gewünschten Stil ein.
- Standardmäßig wird der Stil Ihres Produktbuttons in den Wunschzettel-Einstellungen verwendet.
- Eine Änderung hier wirkt sich nur auf dieses Widget aus, nicht auf den Rest Ihres Shops.
Zehn Stile sind verfügbar:
- 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
Die Pill-Varianten verwenden vollständig abgerundete Ecken. Solid füllt die Icon-Form aus und Minimal verwendet eine leichtere Umrandung.
Ausrichtung festlegen
Die Ausrichtung befindet sich auf der Registerkarte Stil, wo Elementor die Ausrichtung für seine eigenen Widgets beibehält.
- Öffnen Sie den Abschnitt Layout auf der Registerkarte Stil.
- Stellen Sie die Ausrichtung auf Links, Mitte oder Rechts.
Die Ausrichtung ist standardmäßig auf Links eingestellt.
Ändern Sie die Button-Farben
Öffnen Sie den Abschnitt Farben auf der Registerkarte Stil. Sie erhalten acht Farbsteuerungen, jede mit einem normalen und einem Hover-Zustand:
- Textfarbe und Textfarbe (Hover)
- Hintergrundfarbe und Hintergrundfarbe (Hover)
- Rahmenfarbe und Rahmenfarbe (Hover)
- Icon-Farbe und Icon-Farbe (Hover)
Jede beginnt mit der Farbe, die bereits in Ihren Wunschlisten-Einstellungen gespeichert ist, sodass ein unberührtes Widget genau wie der Rest Ihres Shops aussieht. Ändern Sie eine, überschreibt dies diese Farbe nur für dieses Widget.
Farben sind das Einzige, was das Widget überschreibt. Button-Größe, Abstände, Rahmenbreite und Icon-Form werden weiterhin aus Ihren Wunschlisten-Einstellungen übernommen. Ändern Sie diese also unter SaveTo Wishlist > Einstellungen > Button-Platzierung & Stile.
Die Farbwähler akzeptieren nur Vollfarben. Es gibt keinen Transparenzregler und keine Registerkarte für globale Farben, da der Wunschlisten-Button einfache Hex-Farben speichert.
Button im Loop Grid und Loop Carousel anzeigen
Wenn Sie Elementor Pro verwenden, funktioniert der Wunschlisten-Button auch innerhalb der Widgets Loop Grid und Loop Carousel. Sie haben zwei Möglichkeiten, ihn dort einzufügen.
Überlassen Sie es dem Plugin. Die Platzierung Ihres Shop-Buttons gilt bereits für Loop-Karten, sodass der Button auf jeder Karte erscheint, ohne dass Sie etwas hinzufügen müssen.
Platzieren Sie ihn selbst. Bearbeiten Sie die Loop-Item-Vorlage und fügen Sie dann das Widget Speichern in Wunschliste zum Kartenlayout hinzu. Dies gibt Ihnen die Kontrolle darüber, wo genau auf der Karte der Button platziert wird.
Wenn Sie das Widget selbst in einem Loop-Element platzieren, stoppt das Plugin die automatische Anzeige seines eigenen Buttons auf diesen Karten, sodass Sie einen Button pro Karte erhalten und nicht zwei. Die einzige Ausnahme ist, wenn Ihre Shop-Button-Platzierung auf Nicht anzeigen eingestellt ist. In diesem Fall belässt das Plugin die Karten unverändert, da das Entfernen des automatischen Buttons, ohne einen neuen hinzuzufügen, ein Rückschritt wäre.
Welche Methode sollten Sie verwenden?
SaveTo Wishlist bietet Ihnen drei Möglichkeiten, Wunschlistenfunktionen auf einer Seite anzuzeigen, und diese erfüllen unterschiedliche Aufgaben. Der wichtigste Unterschied: Das Elementor-Widget platziert den Button auf einem Produkt, während der Shortcode und der Block die Wunschliste selbst anzeigen. Die meisten Shops verwenden beides.
Das Elementor-Widget platziert den Button „In die Wunschliste speichern“ überall dort, wo Sie ihn ablegen. Verwenden Sie es, wenn Sie Produktvorlagen in Elementor erstellen. Es ist das einzige der drei mit eigenen Stilkontrollen.
Der [saveto_wishlist] Shortcode zeigt die Wunschliste eines Kunden an. Verwenden Sie ihn, wenn die Wunschliste außerhalb eines Elementor-Layouts erscheinen soll, z. B. auf einer klassischen Editor-Seite, in einem Text-Widget oder in einem Builder ohne natives Element. Siehe Verwendung des Wunschlisten-Shortcodes.
Der Wunschlisten-Block erledigt die gleiche Aufgabe wie der Shortcode im WordPress-Block-Editor. Verwenden Sie ihn, wenn Sie Seiten mit Blöcken anstelle eines Seitenerstellers bearbeiten. Siehe Verwendung des Wunschlisten-Gutenberg-Blocks.
Fehlerbehebung
Der Button erscheint überhaupt nicht
Gehen Sie diese in der Reihenfolge durch.
- Kein Produkt im Kontext. Das Widget wird nur dort gerendert, wo WooCommerce ein Produkt zum Arbeiten hat. Eine einfache Seite oder eine Vorlage, die nicht mit einem Produkt verknüpft ist, gibt ihm nichts zum Rendern, sodass sie leer bleibt. Platzieren Sie es auf einer einzelnen Produktvorlage, einer Loop-Artikelvorlage oder einer Seite, die ein Produkt festlegt.
- Gäste-Wunschlisten sind deaktiviert. Wenn Gäste-Wunschliste deaktivieren in Ihren Wunschlisteneinstellungen aktiviert ist und Sie die Website abgemeldet aufrufen, wird der Button absichtlich ausgeblendet. Melden Sie sich an oder deaktivieren Sie diese Einstellung, um ihn zu sehen.
- SaveTo Wishlist ist älter als 1.1.3. Das Widget existiert in früheren Versionen nicht. Aktualisieren Sie das Plugin.
Zwei Wunschlisten-Buttons erscheinen auf der Produktseite
Dies löst sich normalerweise von selbst. Wenn Ihre Elementor-Produktvorlage das Widget enthält, registriert das Plugin seine eigene Platzierung für einzelne Produkte neu, sodass nur der von Ihnen platzierte Button gerendert wird.
Zugehörige Produkte, Upsells und Cross-Sells werden bewusst unberührt gelassen, da diese Karten durch die Shop-Platzierung gerendert werden. Wenn Sie auf diesen eine zweite Schaltfläche sehen, ist dies die Shop-Platzierung, die ihre Arbeit tut. Ändern Sie dies unter SaveTo Wishlist > Einstellungen > Button-Platzierung & Stile.
Die Farbwähler haben keine Auswirkung
Zwei Einstellungen schalten die Farbsteuerungen aus, und jede zeigt eine Meldung im Panel an, die erklärt, warum.
Wenn Ihr Produktbutton-Modus auf Theme-Standard eingestellt ist, erbt der Button die Button-Stile Ihres Themes und das Plugin wendet keine eigene Farbe an. Wechseln Sie den Produktbutton-Modus in Ihren Wunschlisteneinstellungen auf Voreinstellung, um Farben zu steuern.
Wenn Ihr Wunschlistensymbol ein benutzerdefiniertes hochgeladenes Bild ist, haben Icon-Farbe und Icon-Farbe (Hover) keine Funktion, da ein hochgeladenes Bild nicht eingefärbt werden kann. Tauschen Sie es in Ihren Wunschlisteneinstellungen gegen eine integrierte Symbolform aus, wenn Sie Farbkontrolle wünschen.
Ein Blog-Layout erscheint anstelle der Wunschliste
Wenn Sie einen Wunschlisten-Link öffnen und das Design Ihres Beitragsarchivs anstelle der Wunschliste sehen, übernimmt eine Archivvorlage des Elementor Theme Builders die Seite. Dies geschieht, wenn die Anzeigebedingung dieser Vorlage auf das Beitragsarchiv abzielt, was auch einzelne Wunschlistenansichten abdeckt.
Um dies zu umgehen:
- Öffnen Sie Vorlagen > Theme Builder und wählen Sie Ihre Archivvorlage aus.
- Öffnen Sie die Anzeigebedingungen.
- Entfernen Sie die Bedingung, die sich auf das Beitragsarchiv bezieht.
- Erstellen Sie Ihr Beitragsarchiv als eigenständige Seite anstelle einer Theme Builder-Vorlage.
Häufig gestellte Fragen
Benötige ich Elementor Pro, um das Widget zu verwenden?
Nein. Das Save to Wishlist-Widget funktioniert mit dem kostenlosen Elementor. Elementor Pro wird nur für die Widgets Loop Grid und Loop Carousel sowie für Theme Builder-Vorlagen benötigt.
Überschreibt das Widget meine Wunschlisten-Einstellungen?
Nur die acht Farben und nur für dieses eine Widget. Der Button-Typ und die Ausrichtung sind ebenfalls pro Widget. Alles andere, einschließlich Größe, Abstände, Rahmenbreite und Symbolform, stammt weiterhin von Ihren Wunschlisten-Einstellungen.
Kann ich das Widget und die automatische Platzierung zusammen verwenden?
Ja. Das Plugin kümmert sich um die Überlappung. Auf einer Produktvorlage, die das Widget enthält, deaktiviert es seine eigene Platzierung für einzelne Produkte, und innerhalb von Loop-Elementen steht es still, sodass jede Karte einen Button anzeigt.
Warum gibt es keinen Transparenzregler bei den Farbwählern?
Der Wunschlisten-Button speichert nur durchgehende Hex-Farben. Eine transparente oder globale Farbe würde im Editor korrekt angezeigt und dann auf der Live-Seite auf die gespeicherte Farbe zurückfallen. Daher sind diese Optionen deaktiviert, anstatt Sie irrezuleiten.
Brauchen Sie Hilfe?
Wenn Sie eine Frage haben oder auf Probleme stoßen, sind wir für Sie da.
- Premium-Benutzer: Support-Ticket eröffnen
- Kostenlose Benutzer: Besuchen Sie unser Community-Forum
