Der Upsells-Block verbessert Ihre WooCommerce-Vorlage für einzelne Produkte, indem er automatisch empfohlene Upsell-Produkte unter dem aktuellen Produkt anzeigt. Dabei handelt es sich um Produkte, die Sie in WooCommerce manuell als Upsells festgelegt haben. So können Sie Kunden gezielt zu ergänzenden oder höherwertigen Artikeln führen.
Bevor Sie diesen Block hinzufügen, stellen Sie sicher, dass Ihre Upsell-Produkte bereits in WooCommerce konfiguriert sind, indem Sie zur Registerkarte „Verbundene Produkte” jedes Produkts navigieren und Artikel zum Feld „Upsells” hinzufügen. Sobald dies geschehen ist, übernimmt der Block die Anzeige – mit vollständiger Kontrolle über Spalten, Reihenfolge, Typografie, Schaltflächenstil und Bilddarstellung.
Hinzufügen des Upsells-Blocks zu Ihrer Einzelproduktvorlage
Befolgen Sie diese Schritte, um einen Upsells-Block zu Ihrer SeedProd-Vorlage für einzelne Produkte hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter „WooCommerce-Vorlagen-Tags“ den Block „Upsells“ per Drag & Drop in den gewünschten Abschnitt Ihrer Einzelproduktvorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Nach dem Hinzufügen klicken Sie auf den Block „Upsells“, um dessen Einstellungen zu öffnen. Auf der Registerkarte „Inhalt“ können Sie die folgenden Anzeigeoptionen anpassen:
- Spalten: Legen Sie die Anzahl der Spalten fest, die zur Anzeige von Upselling-Produkten im Raster verwendet werden sollen.
- Beiträge pro Seite: Legen Sie die maximale Anzahl der anzuzeigenden Upsell-Produkte fest. Verwenden Sie
-1alle verfügbaren Upsells anzeigen. - Sortieren nach: Wählen Sie das Feld, nach dem Upselling-Produkte sortiert werden sollen – Datum, ID, Menüfolge, Beliebtheit, Zufällig, Bewertung oder Titel.
- Reihenfolge: Legen Sie die Sortierreihenfolge fest – ASC (aufsteigend) oder DESC (absteigend).
Schritt 3: Design anpassen
Auf der Registerkarte „Erweitert“ können Sie das Erscheinungsbild Ihres Upsells-Blocks anpassen.
Stile:
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Upsell-Produktrasters fest – links, mittig oder rechts – mit gerätespezifischen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Titeltypografie: Legen Sie die Schriftfamilie, Größe, Stärke, Stil, Zeilenhöhe, Buchstabenabstand und Groß-/Kleinschreibung für Produkttitel fest.
- Beschreibung Typografie: Legen Sie die typografischen Eigenschaften für den Produktbeschreibungstext fest.
- Preistypografie: Legen Sie die typografischen Eigenschaften für den Produktpreis-Text fest.
- Preis Farbe: Legen Sie die Farbe für reguläre Produktpreise fest.
- Farbe des Verkaufsabzeichens: Legen Sie die Farbe für den Verkaufspreis oder das Verkaufsabzeichen fest.
Schaltfläche:
- Schaltflächentypografie: Legen Sie die Schriftart, Größe, Schriftstärke, den Stil und andere typografische Eigenschaften für den Text der Schaltfläche „Zum Warenkorb hinzufügen“ fest.
- Schaltflächenstil: Wählen Sie den visuellen Stil der Schaltfläche „Zum Warenkorb hinzufügen“ – Flach, 2D, Vintage, Ghost oder Link.
- Schaltflächenfarbe: Legen Sie die Hintergrundfarbe der Schaltfläche fest.
- Knopfgröße: Wählen Sie die Knopfgröße – Klein, Mittel, Groß, Extra groß oder 2X Groß.
- Border Radius: Runden Sie die Ecken der Schaltfläche mithilfe eines Schiebereglers ab.
Bild:
- Schatten: Wenden Sie einen Schatten auf Produktbilder an, indem Sie voreingestellte Größen verwenden – Keine, Haarlinie, Klein, Mittel, Groß, X Groß, 2X Groß oder Unterer Schlagschatten.
- Rahmenstil: Wählen Sie einen Rahmenstil für Produktbilder – durchgehend, gepunktet oder gestrichelt.
- Bildrahmenfarbe: Legen Sie die Farbe des Produktbildrahmens fest.
- Bildrandbreite: Legen Sie individuelle Randbreiten für jede Seite des Produktbildes fest – oben, rechts, unten und links.
- Bild-Weißraum-Abstand: Fügen Sie einen inneren Abstand zwischen dem Produktbild und seinem Rand hinzu.
Abstand:
- Rand: Legen Sie den äußeren Abstand um den Block herum auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Abstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers an allen vier Seiten fest, mit gerätespezifischen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen hinzu, um ein gezieltes Styling zu erzielen.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese ID verwenden, um den Block in benutzerdefiniertem CSS oder JavaScript zu referenzieren.
- Benutzerdefinierte Attribute: Fügen Sie dem Block-Wrapper-Element benutzerdefinierte HTML-Attribute hinzu. Geben Sie jedes Attribut in einer neuen Zeile im Format Schlüssel|Wert ein.
Geräte-Sichtbarkeit:
- Auf dem Desktop ausblenden: Umschalten, um den Block bei der Anzeige auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block bei der Anzeige auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Schalten Sie diese Option ein, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scroll-Effekt: Wende eine scroll-gesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Viewport-Offset.
- Mouse Effect: Wende einen durch Mausbewegungen gesteuerten Parallax-Effekt auf den Block an.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Upsells-Blocks und die Anpassung seines Erscheinungsbilds abgeschlossen haben, speichern Sie Ihre Arbeit.
Sie haben erfolgreich einen Upsells-Block zu Ihrer Einzelproduktvorlage hinzugefügt! Strategisch platzierte Upsell-Empfehlungen sind eine der effektivsten Methoden, um den durchschnittlichen Bestellwert in WooCommerce zu steigern. Experimentieren Sie mit Spaltenlayout, Schaltflächenstilen und Bilddarstellung, um einen Produktempfehlungsbereich zu erstellen, der sich nahtlos in das Design Ihres Shops einfügt.