Verwendung von Vorlagen zum Gestalten von Wunschlisten-Buttons

Benötigt Ihr Geschäft eine Design-Auffrischung, aber Sie haben keine Zeit, jedes einzelne Pixel manuell anzupassen? Die Wahl des richtigen Looks für Ihre „Zur Wunschliste hinzufügen“-Buttons sollte keine zeitaufwändige Aufgabe sein.

Mit den Einstellungen im Konfigurationsmodus von SaveTo Wishlist können Sie Ihre Wunschlisten-Buttons professionell in Sekundenschnelle gestalten. Egal, ob Sie sofort einsatzbereite Stil-Voreinstellungen verwenden oder sich in die Benutzerdefinierten Einstellungen vertiefen möchten, Sie haben jetzt die volle Kontrolle darüber, wie Ihre Buttons auf Produkt-, Shop- und Warenkorbseiten angezeigt werden.

Am Ende dieser Anleitung wissen Sie, wie Sie zwischen Design-Modi wechseln und Ihrem Geschäft ein zusammenhängendes, professionelles Aussehen verleihen, das perfekt zu Ihrer Marke passt.

Voraussetzungen

• SaveTo Wishlist Lite installiert und aktiv.
• Administratorzugriff auf Ihr WordPress-Dashboard.
• WooCommerce installiert und konfiguriert.

Warum Button-Stil-Vorlagen verwenden?

Geschwindigkeit und Konsistenz sind für jedes wachsende WooCommerce-Geschäft unerlässlich. Wenn Ihre Buttons auf allen Seiten großartig aussehen und identisch funktionieren, schafft das Vertrauen bei Ihren Käufern.

Vorlagen sparen Zeit. Sie können Button-Designs sofort austauschen, ohne manuelles CSS oder Farbauswahl. Und da jeder Seitenstandort unabhängig ist, können Sie verschiedene Designs separat für die Seiten Produkt, Shop und Warenkorb anwenden.

💡 Tipp:
Wenn Sie einen völlig einzigartigen Look bevorzugen, können Sie eine Voreinstellung immer noch als „Basis“ verwenden und dann die Farben nachträglich anpassen!

1. Greifen Sie auf die Tabs für den Button-Stil zu

Wir haben die Einstellungen in leicht zu verwaltende Kategorien unterteilt, damit Sie jeden Teil Ihres Geschäfts individuell gestalten können.

1. Navigieren Sie zu SaveTo Wishlist → Einstellungen.
2. Gehen Sie zur Registerkarte Button-Platzierung & Stile.
3. Drei Abschnitte erscheinen: Produkt, Shop und Warenkorb. Klicken Sie auf den, den Sie bearbeiten möchten.

2. Wählen Sie Ihren Konfigurationsmodus

Jeder Standort verfügt über eine Radio-Schaltfläche für den Konfigurationsmodus. Hier entscheiden Sie, wie viel Kontrolle Sie haben möchten:

1. Wählen Sie Voreinstellungen verwenden, um die Galerie der Wunschlisten-Button-Vorlagen anzuzeigen.
2. Wählen Sie alternativ Benutzerdefinierte Einstellungen, wenn Sie die Vorlagen überspringen und die manuellen Farbwähler verwenden möchten.

3. Wenden Sie eine Vorlage an

Wählen Sie in jedem Abschnitt die Registerkarte Voreinstellungen verwenden unter der Option Konfigurationsmodus.

1. Durchsuchen Sie die verfügbaren Voreinstellungen (z. B. „Klassisches Rot“, „Minimalistisch Dunkel“ oder „Modernes Lila“).
2. Klicken Sie auf eine Voreinstellung, um sie anzuwenden. Das Tool aktualisiert automatisch die Form, den Rand und das Standardlayout des Buttons.

4. Passen Sie Ihre Farben an

Wenn Sie Benutzerdefinierte Einstellungen wählen, wird der Voreinstellungs-Auswähler durch einzelne Design-Steuerelemente ersetzt. Verwenden Sie diese, um Ihren Button von Grund auf neu zu erstellen oder eine Voreinstellungs-„Basis“ anzupassen.

1. Typografie & Größe: Legen Sie die genaue Textgröße und Symbolgröße fest.
2. Farbauswahl: Wählen Sie manuell Ihre Hintergrundfarbe, Textfarbe und Symbolfarbe.
3. Rahmen & Form: Passen Sie die Rahmenbreite, -farbe und die Rundung der Ecken an.
4. Button-Symbol: Wählen Sie die Glyphe, die der Button verwendet. Die Auswahlmöglichkeiten sind Herz, Stern, Lesezeichen, Plus und Benutzerdefiniertes Bild. Herz ist die Standardeinstellung, und der Button-Typ steuert weiterhin Layout und Gewicht, sodass dies nur die Form ändert.
5. Benutzerdefiniertes Button-Symbol: Erscheint, sobald Sie Benutzerdefiniertes Bild auswählen, und ermöglicht Ihnen den Upload Ihrer eigenen Glyphe. Die Auswahl von Benutzerdefiniertes Bild blendet auch die Einstellungen für die Symbolfarbe aus, da diese nicht auf ein hochgeladenes Bild angewendet werden können. Der Button zeigt weiterhin ein Herz an, bis Sie tatsächlich ein Bild auswählen. Laden Sie also eines hoch, um die Änderung abzuschließen.
6. Die Farbauswahl bleibt geöffnet, während Sie arbeiten. So können Sie schneller verschiedene Farbtöne vergleichen, ohne das Menü wiederholt schließen zu müssen.

5. Wenden Sie unabhängige Stile an

Denken Sie daran, dass Sie Stile für verschiedene Kontexte mischen und anpassen können!

1. Verwenden Sie einen großen Benutzerdefinierten Button auf Ihrer Produktseite, um ihn zur primären Handlungsaufforderung zu machen.
2. Wenden Sie das Minimale Preset auf Ihrer Shop-Seite an, um Ihr Produktgitter sauber und übersichtlich zu halten.
3. Wählen Sie das Moderne Preset auf der Warenkorbseite, um Kunden zu ermutigen, Artikel für später zu speichern, anstatt sie zu löschen.

6. Speichern und überprüfen Sie Ihre Änderungen

1. Klicken Sie unten auf der Seite auf Änderungen speichern.
2. Besuchen Sie Ihren Shop und eine Produktseite, um Ihre neuen Button-Stile in Aktion zu sehen!

Fehlerbehebung bei häufigen Problemen

⚠︎ Das Preset hat meine Button-Farbe nicht geändert.
Presets steuern hauptsächlich die Struktur und das Template des Buttons. Wenn Sie zuvor eine „Benutzerdefinierte Farbe“ festgelegt haben, wird diese Farbe ersetzt. Aktualisieren Sie die Einstellungen der Farbauswahl direkt im Unter-Tab Benutzerdefinierte Einstellungen, um sicherzustellen, dass Ihre Markenfarben auf das neue Template angewendet werden.

⚠︎ Der Button sieht auf meinem Handy anders aus.
Einige WordPress-Themes haben sehr starke „Globale Stile“, die versuchen, Plugin-Buttons zu überschreiben. Wenn Ihr Button „eingekastelt“ aussieht oder die Schriftart zu klein ist, versuchen Sie ein anderes Preset oder überprüfen Sie die Button-Einstellungen Ihres Themes.

Wenn sich das Layout Ihrer Seite nach dem Speichern nicht aktualisiert, leeren Sie den Cache Ihrer Website. Weitere Informationen hierzu finden Sie im offiziellen WooCommerce-Leitfaden zum Leeren von Caches.

Häufig gestellte Fragen

Wann sollte ich den Vorlagenmodus anstelle des benutzerdefinierten Modus verwenden?
Verwenden Sie den Vorlagen-Modus, wenn Sie schnell ein garantiertes „gutes“ Design wünschen. Verwenden Sie den Benutzerdefinierten Modus, wenn Ihre Marke nicht standardmäßige Farben verwendet oder wenn Sie benötigen, dass der Button eine sehr spezifische Größe hat.

Beeinflusst die Änderung der Vorlage für die Shop-Seite die Produkt-Seite?
Nein. Jeder Seitenstandort (Produkt, Shop, Warenkorb) ist 100 % unabhängig, sodass Sie jeden Bereich Ihres Shops separat anpassen können.

Löscht die Auswahl einer neuen Vorlage meine vorherigen benutzerdefinierten Farben?
Ja, wenn Sie die Änderung bestätigen, werden Ihre aktuellen Einstellungen durch die Standardstile der ausgewählten Vorlage ersetzt. Nach dem Anwenden der Vorlage können Sie die Farben immer noch im Unter-Tab Benutzerdefinierte Einstellungen aktualisieren.

Was als Nächstes zu tun ist

Vorlagen halten das Button-Styling in Ihrem gesamten Shop konsistent, ohne Farben manuell bearbeiten zu müssen, und jeder Seitenstandort bleibt unabhängig, sodass Sie ihn separat anpassen können.

Sobald die Buttons richtig aussehen, können Sie ändern, was passiert, wenn ein Kunde darauf klickt. Legen Sie die Button-Aktion im Abschnitt Wunschlisten-Aktion des Tabs Allgemein fest, wie in Anleitung zum Aktivieren von „In den Warenkorb“-Fade-Benachrichtigungen beschrieben.