Erstellen Sie ein Produktkarussell mit dem WooCommerce-Produktkarussell-Widget auf der Elementor-Website

Veröffentlicht: 2021-07-31

Das Erstellen eines WooCommerce-Shops kann eine großartige Möglichkeit sein, Ihr E-Commerce-Geschäft zu starten. Beim Erstellen einer E-Commerce-Website müssen Sie sich auf das Ladendesign konzentrieren. Es verbessert die Benutzererfahrung und trägt letztendlich dazu bei, Ihren Umsatz zu steigern.

WooCommerce + Elementor + Happy Addons = Eine großartige Kombination, um in wenigen Minuten eine E-Commerce-Website zu entwerfen.

In Happy Addons Pro erhalten Sie exklusive erweiterte WooCommerce-Widgets und -Funktionen, die Ihnen helfen, Ihren Traum-Online-Shop zu erstellen.

Hier möchten wir Ihnen nun das Produktkarussell-Widget von Happy Addons Pro vorstellen, mit dem Sie ein schönes Produktkarussell für Ihre Elementor-Website entwerfen können. Lassen Sie uns untersuchen, wie dieses praktische Widget funktioniert.

So verwenden Sie das WooCommerce-Produktkarussell-Widget von Happy Addons, um ein atemberaubendes Karussell zu erstellen

Das Erstellen eines Karussells zum Anzeigen der Produkte Ihres Online-Shops auf der Elementor-Website ist keine schwierige Aufgabe mehr.

Mit dem WooCommerce-Produktkarussell-Widget von Happy Addons können Sie exklusive Produktkarussells für Ihre Elementor-Website erstellen, indem Sie 3 einfachen Schritten folgen . Bevor Sie mit diesen Schritten beginnen, zeigen wir Ihnen zunächst die Liste der Voraussetzungen.

Voraussetzungen

Um dieses coole WooCommerce-Produktkarussell-Widget zu verwenden, benötigen Sie die folgenden Dinge:

  • WooCommerce (kostenlos)
  • Elementar (kostenlos)
  • Glückliche Add-ons (kostenlos)
  • Glückliche Addons Pro

Lass uns anfangen:

Schritt eins – Fügen Sie das Produktkarussell-Widget von Happy Addons hinzu

Suchen Sie zuerst das Produktkarussell-Widget in der Suchleiste und wählen Sie das Widget aus dem Menü auf der linken Seite aus. Ziehen Sie es dann per Drag & Drop auf den Arbeitsbereich.

Add Product Carousel Widget

Schritt Zwei – Inhalte zum Produktkarussell hinzufügen

Im Inhaltsbereich erhalten Sie die notwendigen Optionen zum Hinzufügen von Inhalten zum Karussell. Die Optionen sind.

  1. Layout
  2. Anfrage
  3. Karussell-Einstellungen
Content Product Carousel

Lassen Sie uns jede Option einzeln untersuchen.

1. Anordnung

Im Layout –> Skin können Sie Ihr Karussell-Skin-Design Classic & Modern einstellen. Sehen Sie sich das Bild unten an, um zu verstehen, wie das Skin-Design funktioniert.

Layout Skin

Sie können den Layoutinhalt auch mit den folgenden Einstellungen anpassen.

  • Bildgröße: Sie können die Bildgröße Ihres Produkts nach Bedarf ändern.
  • Sonderangebotsabzeichen anzeigen: Sie können das Verkaufsabzeichen auch ein- und ausblenden.
  • Bewertungen anzeigen: Wenn Sie die Produktbewertung anzeigen möchten, können Sie dies hier tun.
  • Zum Warenkorb hinzufügen anzeigen: Die Schaltfläche „In den Warenkorb“ kann je nach Zweck auch ein- und ausgeblendet werden.
  • Schnellansicht anzeigen: Wenn Sie Ihr individuelles Produkt anzeigen möchten, müssen Sie Schnellansicht anzeigen aktivieren.
  • Inhaltsausrichtung : Sie können auch die Inhaltsausrichtung wie Links, Mitte und Rechts definieren.
Layout Content

2. Abfrage

Die Abfrageoption hilft bei der Abfrage Ihrer Shop-Produkte, damit Sie sie im Karussell anzeigen können.

Hier können Sie Produkte wie „ Empfohlene Produkte“, „Neu eingetroffene Produkte“, „Best Selling Products “ und mehr ein- und ausschließen.

Sie können die Produkte auch mit Titel, ID, Datum, Menüreihenfolge und Zufällig bestellen . Und in der Lage, die Reihenfolge wie ASC & DSC zu definieren.

Content Query of Carousel

3. Karusselleinstellungen

Hier in den Karusselleinstellungen können Sie Animationsgeschwindigkeit, Autoplay, Autoplay-Geschwindigkeit und Endlosschleife Ihres Produktkarussells einstellen.

Content Carousel Settings

Hinweis: Die Geschwindigkeit der Animationsfolie und die Autoplay-Geschwindigkeit wird in Millisekunden definiert.

Karusselleinstellungen Navigation und anzuzeigende Folien

Sie können den Navigationsstil wie Pfeil, Punkte und Pfeil & Punkte im Karussell-Einstellungsbereich festlegen. Hier können Sie auch verwalten, wie viele Folien im Karussell angezeigt werden sollen.

Content Carousel Settings Navigation

Schritt drei – Gestalten Sie Ihr WooCommerce-Produktkarussell

Im Abschnitt Stil finden Sie die wesentlichen Gestaltungsoptionen, um Inhalte an das Karussell anzupassen. Hier sind die verfügbaren Optionen.

  1. Karussellartikel
  2. Bild & Abzeichen
  3. Inhalt
  4. Schaltfläche zum Warenkorb hinzufügen
  5. Navigation – Pfeil
  6. Navigation – Punkte
  7. Schnellansicht-Schaltfläche
  8. Schnellansicht Modal
Style Product Carousel

1. Karussellartikel

Unter Stil -> Karussellelemente können Sie den gesamten Inhalt des Karussells anpassen : Höhe, Abstand zwischen den Elementen, Randtyp , Randradius, Rahmenschatten und Hintergrundtyp .

Style Carousel Items

2. Bild & Abzeichen

Wenn Sie das Produktbild und das Abzeichen neu gestalten möchten, können Sie dies hier in der Option Bild & Abzeichen tun.

Bild

Sie können die Bildbreite , -höhe, den Randradius und den Rahmenschatten festlegen .

Style Carousel Image
Abzeichen

Außerdem können Sie die Badge -Position, die Polsterung, den Randradius, den Rahmenschatten, die Typografie, die Hintergrundfarbe und die Farbe auf Ihre eigene Weise ändern.

Style Carousel Badge

3. Inhalt

Sie können den Inhalt von Name, Preis und Bewertung gestalten, indem Sie zum Bereich Stil –> Inhalt gehen.

Style Content

4. Schaltfläche „In den Warenkorb“.

Je nach Bedarf können Sie das Design der Schaltfläche „In den Warenkorb “ anpassen. Hier können Sie den Abstand, die Polsterung, den Randradius, den Randtyp und die Typografie der Warenkorbschaltfläche verwalten.

Style Add to Cart Button

5. Navigationspfeil

Der Produktkarussell- Navigationspfeil kann auch anpassbar sein. Um es stilvoller zu gestalten, müssen Sie zum Bereich Stil -> Navigationspfeil gehen. Hier erhalten Sie die Gestaltungsoptionen für die Navigation.

Style Navigation Arrow

6. Navigationspunkte

Wie beim Navigationspfeil können Sie auch die vertikale Position, den Abstand, die Ausrichtung und die Farbe der Navigationspunkte neu gestalten.

Style Navigation Dots

7. Schnellansicht-Schaltfläche

Bei Bedarf können Sie die Polsterung, den Randradius, die Typografie, die Farbe und die Hintergrundfarbe der Schnellansichtsschaltfläche ändern.

Style Quick View Button

8. Schnellansicht Modal

Sie können sogar die modalen Inhalte der Schnellansicht wie Titel, Bewertung, Preis, Zusammenfassung und Zur Kategorie hinzufügen in Ihrem eigenen Stil gestalten.

Style Quick View Modal

Die endgültige Vorschau des WooCommerce-Produktkarussell-Widgets

Wenn Sie alle obigen Anweisungen befolgen, sieht die endgültige Ausgabe Ihres Produktkarussells wie im folgenden Bild aus.

Final Preview Of WooCommerce Product Carousel Widget

Weitere Informationen finden Sie in der Dokumentation des Produktkarussell-Widgets von Happy Addons.

Lesen Sie die Dokumentation zum Produktkarussell!

Happy Addons Andere WooCommerce-Widgets, die Sie für die Gestaltung Ihres Online-Shops in Betracht ziehen können

HappyAddons WooCommerce Widgets

Happy Addons Pro enthält 7 praktische WooCommerce-Widgets, einschließlich der Produktkarussell-Widgets. Diese wesentlichen Widgets helfen dabei, eine E-Commerce-Website besser organisiert zu erstellen. Lassen Sie uns nacheinander über die anderen hilfreichen WooCommerce-Widgets sprechen.

1. Product Grid (Pro) : Product Grid ist ein erstaunliches Widget, mit dem Sie Ihre WooCommer-Produkte in einer perfekten Rasterausrichtung präsentieren können. Jetzt können Sie Ihre zahlreichen Produkte ganz einfach in den verschiedenen Teilen Ihres Elementor WooCommerce-Shops anzeigen.

2. Produktkategorieraster (Pro) : Sie müssen Ihre E-Commerce-Produkte häufig kategorieweise für bestimmte Zielkunden anzeigen. Mit diesem neuen Produktkategorie-Raster-Widget von Happy Addons können Sie Ihre WooCommerce-Shop-Produkte ganz einfach basierend auf der Kategorie anzeigen.

3. Produktkategorie-Karussell (Pro) : Mit dem modernen Produktkategorie-Karussell-Widget können Sie kategorieweise Produkte in einem Karussell-Schieberegler hinzufügen.

4. Einzelprodukt (Pro) : Mit dem Einzelprodukt-Widget können Sie jedes Produkt in Ihrem eigenen Stil dekorieren.

5. Mini-Warenkorb (Pro) : Mit einem neuen und effektiven Mini-Warenkorb-Widget fügen Sie einer E-Commerce-Website eine Warenkorb-Funktion hinzu. Jetzt können Ihre Kunden die Bestellung in ihrem Warenkorb richtig verwalten.

6. Warenkorb (Pro) : Wenn Sie die standardmäßige WooCommerce-Warenkorbseite in Ihrem Traumstil anpassen und neu gestalten möchten, probieren Sie das praktische Warenkorb-Widget von Happy Addons aus und verleihen Sie Ihrer Warenkorbseite ein atemberaubendes Aussehen.

7. Checkout (Pro) : Wie die Warenkorbseite können Sie auch die standardmäßige WooCommerce-Checkout-Seite mithilfe des Checkout-Widgets von Happy Addons auf organisierte Weise anpassen.

Sie können auch mehr als 85 HappyAddons-Widgets auf einen Blick erkunden (Pro & Free)

Sind Sie bereit, das Produktkarussell-Widget von Happy Addons zu verwenden?

Es ist wichtig, Ihrer E-Commerce-Website ein atemberaubendes Aussehen zu verleihen. Und versuchen Sie immer, es eingängiger zu machen, damit die Benutzer mit Ihrem WooCommerce-Shop interagieren können.

In der Anleitung haben wir gezeigt, wie Sie mit dem praktischen WooCommerce-Produktkarussell-Widget von Happy Addons ein erstaunliches Produktkarussell auf Ihrer Elementor-Website erstellen.

Wenn Sie noch Fragen zum Blog haben, können Sie uns gerne kommentieren.

Bitte teilen Sie diesen Artikel auf Ihren sozialen Kanälen, damit andere davon erfahren können. Und abonnieren Sie unseren Newsletter, um das kommende Elementor- und WordPress-Tutorial zu erhalten. Es ist kostenlos!