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

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

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

• 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.

Expandieren Compare um die folgenden Stiloptionen zu bearbeiten:

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