Mit dem Add To Cart Widget können Kunden Produkte zu ihrem virtuellen Warenkorb hinzufügen. Dies ist ein einzelnes Produktvorlagen-Widget. Sie können dieses Widget hinzufügen, um Ihre einzelne Produktseite mit ShopEngine zu gestalten.

Erfahren Sie, wie Sie das Add-to-Cart-Widget auf Ihrer WooCommerce-Site verwenden können:

Schritt 1: Aktivieren Sie das Widget #

Um das Widget zu aktivieren,

• Gehe zu: ShopEngine > Widgets > Add To Cart 
• Anmachen 
• Änderungen speichern

Notiz: Sie können den Produktbestand auch mit einer globalen Einstellung aktivieren aktiviert alle Widgets von ShopEngine gleichzeitig.

Schritt 2: Hinzufügen In den Warenkorb legen Widget #

Bevor Sie das Widget hinzufügen können, müssen Sie zunächst eine Einzelproduktvorlage erstellen. Schauen Sie sich die Dokumentation an So erstellen Sie eine einzelne Produktvorlage.

Hinzufügen In den Warenkorb legen:

• Gehe zu ShopEngine > Templates > Single Product Page Template
• Klicke auf Bearbeiten mit ElementoR

• Suchen für die Option „In den Warenkorb hinzufügen“ bei der Elementsuche
• Ziehen und ablegen das Widget 
• Klicke auf Aktualisieren um Änderungen zu speichern.

Schritt 3: Einstellungen zum Hinzufügen zum Warenkorb #

Gehe zu Klicken Sie auf „Inhalt“ > „Einstellungen“, um die folgenden Optionen anzupassen:

• Mengeneinstellungen:
  • Knopfstil: You can change the button style. You can set the increase (+) and decrease (-) buttons on both sides, both left, both right or you can leave it as default.  You also have the option to choose custom Plus-Symbol(+) Und Minus-Symbol (-).
• Aktie:
  • Lagerstatus anzeigen: Sie können den Lagerstatus anzeigen, indem Sie diese Option aktivieren.
• Variation:
  • Variationsbeschreibung: Aktivieren Sie diese Option, um die Beschreibung der Produktvariante anzuzeigen.
• Datenbestellung:
  • Bestellung aktivieren: Aktivieren Sie diese Option, um die Position von „Menge“, „In den Warenkorb“, „Schnellkauf“, „Wunschliste“ und „Vergleich“ anzupassen. Sie können den Wert „–“ für die Position verwenden. Der kleinere Wert (- 5) erhält mehr Priorität.
  • Mengenposition: Sie können diese Option für Gruppenprodukte nicht ändern. In diesem Fall steht diese Option immer an erster Stelle.

Geben Sie die restlichen Werte entsprechend der Reihenfolge ein, in der sie angezeigt werden sollen, und klicken Sie auf Aktualisieren speichern.

Schritt 4: Stileinstellungen von „In den Warenkorb“. #

Wechseln Sie zur Registerkarte „Stil“, um Zugriff auf alle Stiloptionen zu erhalten.

Erweitern Sie den Lagerstatus und bearbeiten Sie die folgenden Einstellungen:

• Typografie:  Hier können Sie die Schriftfamilie, die Schriftgröße, die Schriftstärke, die Transformation und die Zeilenhöhe für den Bestandsstatustext ändern.
• Ausrichtung: Sie können die Ausrichtung links, rechts oder mittig wählen.
• Vorrätige Farbe: Wählen Sie die Textfarbe, wenn das Produkt auf Lager ist.
• Nicht vorrätig. Farbe: Wählen Sie die Farbe für den Text, wenn das Produkt nicht vorrätig ist.

Expandieren Schaltfläche „In den Warenkorb hinzufügen“. um die folgenden Stiloptionen zu bearbeiten:

• Typografie:  Hier können Sie die Schriftfamilie, die Schriftgröße, die Schriftstärke, die Transformation und die Zeilenhöhe für die Schaltfläche „In den Warenkorb“ ändern.
• Normal/Hover: Ändern Sie die Farbe und Hintergrundfarbe sowohl für die Normal- als auch für die Hover-Ansicht.
• Randtyp: Als Rahmentyp können Sie „durchgezogen“, „gepunktet“, „doppelt gestrichelt“ oder „kein“ auswählen.
• Breite: Wählen Sie die obere, linke, rechte und untere Breite des Rahmens aus.
• Farbe: Wählen Sie eine Farbe für den Rand.
• Randradius: Geben Sie die oberen, rechten, unteren und linken Werte für den Radius ein.
• Polsterung: Passen Sie die obere, linke, rechte und untere Polsterung an.
• Marge: Wenn Sie möchten, geben Sie oben, links, rechts und unten einen Rand ein.

Expandieren Mengeneingabe um die folgenden Stiloptionen zu bearbeiten:

• Typografie:  Sie können die Schriftfamilie, die Schriftgröße, die Schriftstärke, die Transformation und die Zeilenhöhe für die Mengeneingabeoption ändern.
• Farbe: Wählen Sie eine Farbe für den Mengentext.
• Hintergrundfarbe: Wenn Sie möchten, können Sie hier die Hintergrundfarbe ändern.
• Plus-Minus-Taste:
  • Symbolgröße: SWählen Sie die Größe der Plus-Minus-Schaltfläche.
  • Farbe und Hintergrund: Ändern Sie die Farbe und Hintergrundfarbe sowohl für die Normal- als auch für die Hover-Ansicht.
• Tastenpolsterung: Geben Sie einen Füllwert um die Schaltfläche herum an.
• Eingabeauffüllung: Geben Sie einen Füllwert um das Eingabefeld herum an.
• Randtyp: Als Rahmentyp können Sie „durchgezogen“, „gepunktet“, „doppelt gestrichelt“ oder „kein“ auswählen.
• Breite: Wählen Sie die obere, linke, rechte und untere Breite des Rahmens aus.
• Farbe: Wählen Sie eine Farbe für den Rand.
• Randradius: Geben Sie die oberen, rechten, unteren und linken Werte für den Radius ein.
• Wickelrand: Geben Sie einen oberen, rechten, linken und unteren Wert für den Rand an.

Expandieren Variationen um die folgenden Stiloptionen zu bearbeiten:

• Ausrichtung: Sie können die Ausrichtung links, rechts oder mittig wählen.
• Etikett/Beschreibung/Preis: Wechseln Sie die Registerkarten und bearbeiten Sie Typografie, Farbe, Anzeigestil des Etiketts, Beschreibung und Preis.
• Etikettenbreite:  Wählen Sie hier die Breite des Etiketts in Pixel aus.
• Variationsartikel-Marge (px): Wählen Sie hier den Abstand zwischen Variationselementen aus.
• Variations-Wrap-Rand: Geben Sie die oberen, linken, rechten und unteren Werte für den Variations-Umbruchrand an.
• Variations-Dropdown: Wählen Sie hier die Dropdown-Farbe.
• Randtyp: Als Rahmentyp können Sie „durchgezogen“, „gepunktet“, „doppelt gestrichelt“ oder „kein“ auswählen.
• Breite: Wählen Sie die obere, linke, rechte und untere Breite des Rahmens aus.
• Farbe: Wählen Sie eine Farbe für den Rand.
• Randradius: Geben Sie die oberen, rechten, unteren und linken Werte für den Radius ein.

Expandieren Variationsmuster um die folgenden Stiloptionen im Zusammenhang mit Variationsfeldern zu bearbeiten:

• Farbe/Bild/Beschriftung: Wechseln Sie zu den einzelnen Registerkarten, um die Farbfeldbreite, die Farbfeldhöhe und den Rahmenradius für Farbe, Bild und Beschriftung festzulegen.
• Randtyp: Sie können als Rahmentyp „durchgezogen“, „gepunktet“, „doppelt gestrichelt“ oder „kein“ wählen.
• Breite: Wählen Sie die obere, linke, rechte und untere Breite des Rahmens aus.
• Farbe: Wählen Sie eine Farbe für den Rand.
• Ausgewählte Randfarbe: Wählen Sie eine Rahmenfarbe für die ausgewählten Elemente.

Expandieren Wunschzettel um die folgenden Stiloptionen im Zusammenhang mit Wunschlisten zu bearbeiten:

• Symbolgröße: Wählen Sie die Symbolgröße für die Wunschliste aus.
• Normal/Hover: Wählen Sie die Farbe und Hintergrundfarbe sowohl für die Normal- als auch für die Hover-Ansicht.
• Randtyp: Sie können als Rahmentyp „durchgezogen“, „gepunktet“, „doppelt gestrichelt“ oder „kein“ wählen.
• Breite: Wählen Sie die obere, linke, rechte und untere Breite des Rahmens aus.
• Farbe: Wählen Sie eine Farbe für den Rand.
• Randradius: Geben Sie die oberen, rechten, unteren und linken Werte für den Radius ein.
• Polsterung: Passen Sie die obere, linke, rechte und untere Polsterung an.
• Marge: Wenn Sie möchten, geben Sie oben, links, rechts und unten einen Rand ein.

Klicke auf Aktualisieren um alle vorgenommenen Änderungen zu speichern.

Hier ist eine Vorschau des Widgets „In den Warenkorb“: