In den Warenkorb legen

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 > In den Warenkorb legen 
  • Anmachen 
  • Änderungen speichern
Find and enable add to cart from widgets

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 > Vorlagen > Einzelproduktseitenvorlage
  • Klicke auf Bearbeiten mit ElementoR
Bearbeiten Sie eine einzelne Produktvorlage
  • 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.
Drag-and-Drop-Widget zum Hinzufügen zum Warenkorb

Schritt 3: Einstellungen zum Hinzufügen zum Warenkorb #

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

Settings ShopEngine Add to cart widget
  • Mengeneinstellungen:
    • Knopfstil: Sie können den Schaltflächenstil ändern. Sie können die Schaltflächen zum Erhöhen (+) und Verringern (-) auf beiden Seiten einstellen, sowohl links als auch rechts, oder Sie können es als Standard belassen. Sie haben auch die Möglichkeit, benutzerdefiniert zu wählen 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:
    • Hide Buy Button – Removes the main purchase button; users can’t buy directly.
    • Hide Wishlist Button – Removes Add to Wishlist; users can’t save the item.
    • Hide Add to Cart – Removes in den Warenkorb legen; item can’t be added to the cart.
    • Hide Compare Button – Removes Compare; users can’t compare products.
    • Hide Quantity Button – Removes quantity selector; users can’t change order amount.
    • Bestellung aktivieren: Enable this option to customize the Data Ordering List wie zum Beispiel:
      • Quantify: Wählen Sie das number of items to buy.
      • In den Warenkorb legen: Puts the product into the shopping cart.
      • Buy Now/Quick Checkout: Skips the cart to go straight to payment.
      • Wunschzettel: Saves the product für später.
      • Comparison: Compares features of multiple products.
      • Teilzahlung: Allows paying a deposit or installment now.

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:

Style stock status
  • 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:

„Zum Warenkorb hinzufügen“-Schaltflächenstil
  • 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:

quantity_input_style_settings
  • 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:

Variationen-Stileinstellungen
  • 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:

Stileinstellungen für Variationsfelder
  • 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:

Einstellungen für den Wunschliste-Stil des Widgets „Zum Warenkorb hinzufügen“.
  • 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.

Expandieren Compare um die folgenden Stiloptionen zu bearbeiten:

Style compare
  • Symbolgröße: The physical dimensions (width and height) of the comparison icon.
  • Farbe: The color of the icon itself (e.g., the actual image or symbol).
  • Hintergrundfarbe: The color behind the icon or button area.
  • Randtyp: The style of the line around the button (e.g., solid, dashed, dotted).
  • Rahmenbreite: The thickness of the line around the button.
  • Randfarbe: The color of the line around the button.
  • Randradius: How rounded the corners of the button/border are.
  • Polsterung: Inner spacing between the icon/text and the border.
  • Marge: Outer spacing between the button and other elements on the page.

Klicke auf Aktualisieren um alle vorgenommenen Änderungen zu speichern.

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

Vorschau des Widgets „Zum Warenkorb hinzufügen“.

Was sind deine Gefühle?

Updated on Oktober 5, 2025