So fügen Sie die Wunschlisten-Schaltfläche mit dem Elementor-Widget hinzu

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.
• SaveTo Wishlist Lite Version 1.1.6 oder neuer, wenn Sie den Button in den Produkt-Grids von Premium Addons for Elementor wünschen.
• 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

1. Öffnen Sie die Produktvorlage oder Seite, die Sie in Elementor bearbeiten möchten.
2. Suchen Sie im Widget-Panel nach Save to Wishlist.
3. Ziehen Sie das Widget per Drag & Drop an die Stelle in Ihrem Layout, an der der Button erscheinen soll.
4. 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.

1. 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.

1. Öffnen Sie den Abschnitt Layout auf der Registerkarte Stil.
2. 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.

Das Platzieren des Widgets innerhalb eines Loop-Elements deaktiviert nicht den eigenen Button der Shop-Platzierung. Wenn Ihre Shop-Button-Platzierung auf dieser Vorlage noch aktiv ist, zeigt die Karte beide an: den Button der Shop-Platzierung und den des Widgets. Damit das Widget der einzige Button auf der Karte ist, setzen Sie Ihre Shop-Button-Platzierung in Speichern in Wunschliste > Einstellungen > Button-Platzierung & Stile auf Nicht anzeigen.

Button in Premium Addons Produkt-Grids anzeigen

Wenn Sie Premium Addons for Elementor verwenden, erscheint der Wunschlisten-Button auf jeder Karte des WooCommerce-Produkt-Grids oder Carousel-Widgets. Sie fügen dafür kein Widget hinzu. Der Button erscheint von selbst, sobald SaveTo Wishlist Lite 1.1.6 oder neuer aktiv ist.

Der Button folgt Ihrer Einstellung Shop-Seite > Button-Platzierung in Speichern in Wunschliste > Einstellungen > Button-Platzierung & Stile:

• Über dem Produkttitel, Unter dem Produkttitel, Über dem „In den Warenkorb“-Button und Unter dem „In den Warenkorb“-Button platzieren Sie den Button an der entsprechenden Stelle auf der Karte. Wenn Ihr Grid diesen Teil der Karte ausblendet oder seinen „In den Warenkorb“-Button woanders anzeigt, erscheint der Button am Ende der Kartendetails.
• Oben rechts auf dem Produktbild und Oben links auf dem Produktbild zeigen den Button am oberen Rand des Detailbereichs der Karte anstelle auf dem Bild. Premium Addons hat keinen Platz innerhalb seines Bildbereichs für den Button.
• Nicht anzeigen blendet den Button auch in Premium Addons Grids aus.

Wenn Gäste-Wunschliste deaktivieren aktiviert ist, sehen abgemeldete Besucher den Button auch in diesen Grids nicht.

Wenn die Option Cache-Einstellungen des Grid-Widgets auf der Registerkarte Erweitert in Elementor auf Aktiv gesetzt ist, wird der Button nicht hinzugefügt. Dies verhindert, dass der Wunschlisten-Status eines Besuchers zwischengespeichert und allen angezeigt wird. Setzen Sie ihn auf Standard oder Inaktiv, um den Button anzuzeigen.

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.

Premium Addons Produkt-Grids benötigen überhaupt kein Widget. Der Button erscheint automatisch auf jeder Karte, wie im obigen Abschnitt beschrieben.

Fehlerbehebung

Der Button erscheint überhaupt nicht

Gehen Sie diese in der Reihenfolge durch.

1. 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.
2. 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.
3. 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.

Aktualisieren Sie auf SaveTo Wishlist Lite Version 1.1.5 oder neuer, um dies zu beheben. Die einzelne Wunschlistenansicht wird nun auf die Wunschlistenseite selbst aufgelöst, sodass eine Elementor Theme Builder Archivvorlage sie nicht mehr abgleicht. Rewrite-Regeln werden bei der Aktualisierung automatisch geleert, sodass in Permalinks nichts neu gespeichert werden muss.

Die Korrektur gilt in drei Setups nicht, daher ist die folgende Problemumgehung immer noch die Antwort, wenn Sie sich in einem davon befinden:

• Die Wunschlistenseite ist ein Entwurf oder wurde in den Papierkorb verschoben, anstatt veröffentlicht zu werden.
• Sie verwenden WPML und zwei Sprachversionen der Wunschlistenseite teilen sich denselben Slug.
• Die Wunschzettel-Seite ist auch als Beitragsseite unter Einstellungen > Lesen festgelegt.

Wenn Sie eine frühere Version verwenden oder Ihre Website einem der oben genannten Fälle entspricht, umgehen Sie sie stattdessen:

1. Öffnen Sie Vorlagen > Theme Builder und wählen Sie Ihre Archivvorlage aus.
2. Öffnen Sie die Anzeigebedingungen.
3. Entfernen Sie die Bedingung, die sich auf das Beitragsarchiv bezieht.
4. 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, aber die beiden Platzierungen stimmen nicht automatisch überall überein. Auf einer einzelnen Produktvorlage, die das Widget enthält, deaktiviert das Plugin seine eigene Platzierung für einzelne Produkte, sodass Sie eine Schaltfläche erhalten. Innerhalb eines Schleifenartikels deaktiviert die Platzierung des Widgets nicht die Shop-Platzierung. Wenn es noch aktiv ist, werden beide Schaltflächen gerendert. Setzen Sie Ihre Shop-Schaltflächenplatzierung auf Nicht anzeigen, wenn Sie möchten, dass das Widget die einzige Schaltfläche auf der Karte ist.

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?

• Premium-Benutzer: Support-Ticket eröffnen
• Kostenlose Benutzer: Besuchen Sie unser Community-Forum