Der Upsells-Block erweitert Ihre WooCommerce Single Product-Vorlage, indem er automatisch empfohlene Upsell-Produkte unter dem aktuellen Produkt anzeigt. Dies sind Produkte, die Sie in WooCommerce manuell als Upsells festgelegt haben. So können Sie Kunden auf kuratierte Weise zu ergänzenden oder höherwertigen Artikeln führen.
Stellen Sie sicher, dass Ihre Upsell-Produkte bereits in WooCommerce konfiguriert sind, indem Sie zum Tab Verknüpfte Produkte jedes Produkts navigieren und Artikel zum Feld Upsells hinzufügen, bevor Sie diesen Block hinzufügen. Sobald sie vorhanden sind, übernimmt der Block die Anzeige – mit voller Kontrolle über Spalten, Sortierung, Typografie, Button-Stil und Bilddarstellung.
Hinzufügen des Upsells-Blocks zu Ihrer Single Product-Vorlage
Befolgen Sie diese Schritte, um einen Upsells-Block zu Ihrer SeedProd Single Product-Vorlage hinzuzufügen:
Schritt 1: Block hinzufügen
Ziehen Sie unter WooCommerce Template Tags den Upsells-Block per Drag & Drop in den gewünschten Bereich Ihrer Single Product-Vorlage.
Schritt 2: Inhaltseinstellungen konfigurieren
Klicken Sie nach dem Hinzufügen auf den Upsells-Block, um seine Einstellungen zu öffnen. Im Tab Inhalt können Sie die folgenden Anzeigeoptionen anpassen:
- Spalten: Legen Sie die Anzahl der Spalten fest, die zur Anzeige von Upsell-Produkten im Raster verwendet werden.
- Beiträge pro Seite: Legen Sie die maximale Anzahl der anzuzeigenden Upsell-Produkte fest. Verwenden Sie
-1, um alle verfügbaren Upsells anzuzeigen. - Sortieren nach: Wählen Sie das Feld, nach dem die Upsell-Produkte sortiert werden sollen – Datum, ID, Menüreihenfolge, Beliebtheit, Zufällig, Bewertung oder Titel.
- Reihenfolge: Legen Sie die Sortierrichtung fest – ASC (aufsteigend) oder DESC (absteigend).
Schritt 3: Design anpassen
Im Tab Erweitert können Sie das visuelle Erscheinungsbild Ihres Upsells-Blocks anpassen.
Stile:
- Ausrichtung: Legen Sie die horizontale Ausrichtung des Upsell-Produkt-Rasters fest – Links, Mitte oder Rechts – mit gerätespezifischen Steuerelementen für Desktop, Tablet und Mobilgeräte.
- Typografie Titel: Legen Sie Schriftfamilie, Größe, Stärke, Stil, Zeilenhöhe, Zeichenabstand und Groß-/Kleinschreibung für Produkttitel fest.
- Typografie Beschreibung: Legen Sie die typografischen Eigenschaften für den Text der Produktbeschreibung fest.
- Typografie Preis: Legen Sie die typografischen Eigenschaften für den Text des Produktpreises fest.
- Farbe Preis: Legen Sie die Farbe für reguläre Produktpreise fest.
- Farbe Sale-Badge: Legen Sie die Farbe für den Verkaufspreis oder das Sale-Badge fest.
Schaltfläche:
- Typografie Button: Legen Sie Schriftfamilie, Größe, Stärke, Stil und andere typografische Eigenschaften für den Text des „In den Warenkorb“-Buttons fest.
- Stil Button: Wählen Sie den visuellen Stil des „In den Warenkorb“-Buttons – Flat, 2D, Vintage, Ghost oder Link.
- Farbe Button: Legen Sie die Hintergrundfarbe des Buttons fest.
- Schaltflächengröße: Wählen Sie die Schaltflächengröße – Klein, Mittel, Groß, X-Groß oder 2X-Groß.
- Radius: Runden Sie die Ecken der Schaltfläche mit einem Schieberegler ab.
Bild:
- Schatten: Wenden Sie einen Schatten auf Produktbilder an, indem Sie vordefinierte Größen verwenden – Keine, Haarlin, Klein, Mittel, Groß, X-Groß, 2X-Groß oder Schatten unten.
- Rahmenstil: Wählen Sie einen Rahmenstil für Produktbilder – Durchgezogen, Gepunktet oder Gestrichelt.
- Bildrahmenfarbe: Legen Sie die Farbe des Produktbildrahmens fest.
- Bildrahmenbreite: Legen Sie individuelle Rahmenbreiten für jede Seite des Produktbilds fest – Oben, Rechts, Unten und Links.
- Bild-Leerzeichen-Abstand: Fügen Sie Innenabstand zwischen dem Produktbild und seinem Rahmen hinzu.
Abstand:
- Abstand: Legen Sie den äußeren Abstand um den Block auf allen vier Seiten fest, mit unabhängigen Steuerelementen für Desktop, Tablet und Mobilgerät.
- Innenabstand: Legen Sie den inneren Abstand innerhalb des Block-Wrappers auf allen vier Seiten fest, mit geräteabhängigen Steuerelementen.
Attribute:
- Benutzerdefinierte Klasse: Fügen Sie dem Block-Wrapper eine oder mehrere benutzerdefinierte CSS-Klassen für gezieltes Styling hinzu.
- CSS-ID: SeedProd generiert automatisch eine eindeutige CSS-ID für diesen Block. Sie können diese 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 Schlüssel|Wert-Format ein.
Gerätesichtbarkeit:
- Auf Desktop ausblenden: Umschalten, um den Block auf Desktop-Bildschirmen auszublenden.
- Auf Tablet ausblenden: Umschalten, um den Block auf Tablet-Bildschirmen auszublenden.
- Auf Mobilgeräten ausblenden: Umschalten, um den Block auf Mobilgeräten auszublenden.
Animationseffekte:
- Scrolleffekt: Wenden Sie eine scrollgesteuerte Animation auf den Block an, einschließlich Optionen für vertikales und horizontales Scrollen mit Steuerelementen für Richtung, Geschwindigkeit und Ansichtsfensterversatz.
- Mauseffekt: Wenden Sie einen Parallax-Effekt auf den Block an, der durch Mausbewegungen gesteuert wird.
Schritt 4: Speichern Sie Ihre Änderungen
Wenn Sie die Konfiguration des Upsells-Blocks abgeschlossen und sein Aussehen angepasst haben, stellen Sie sicher, dass Sie Ihre Arbeit speichern.
Sie haben erfolgreich einen Upsells-Block zu Ihrer Single Product-Vorlage hinzugefügt! Strategisch platzierte Upsell-Empfehlungen sind eine der effektivsten Methoden, um den durchschnittlichen Bestellwert in WooCommerce zu erhöhen. Experimentieren Sie mit Spaltenlayouts, Schaltflächenstilen und Bildpräsentationen, um einen Produktempfehlungsbereich zu erstellen, der sich nahtlos in das Design Ihres Shops einfügt.