So fügen Sie ein WooCommerce-Produkt in Elementor hinzu

Während Elementor eine Drag-and-Drop-Oberfläche bietet, führt WooCommerce E-Commerce-Funktionen in Ihren virtuellen Shop ein. Diese beiden Plugins bieten Ihnen Standardsteuerelemente zum Hinzufügen und Anpassen von WooCommerce-Produkten.

Mit diesen grundlegenden Steuerelementen und Einstellungen können Sie im E-Commerce-Rennen jedoch nicht die Nase vorn haben. Sie müssen nach einem anderen Add-On suchen, um die erweiterte WooCommerce-Anpassung zu unterstützen.

Hier spielt ShopEngine eine wichtige Rolle dabei, die Erstellung eines WooCommerce-Shops zum Kinderspiel zu machen. Es ermöglicht Ihnen, über die Grundlagen hinauszugehen und WooCommerce-Produkte in Elementor mit integrierten Vorlagen, Widgets und Modulen problemlos hinzuzufügen.

Dieser Blog beleuchtet So fügen Sie ein WooCommerce-Produkt in Elementor hinzu um Archive, einzelne Produkte und Shop-Seiten von Grund auf oder mit vorgefertigten Vorlagen zu erstellen. Bleiben Sie bis zum Ende dran, um die ultimative Shop-Erstellung mit ShopEngine zu enthüllen.

Mühelose Shoperstellung in Elementor mit ShopEngine

Erstellte WooCommerce-Seiten mit Standardfunktionen bieten ein allgemeines und grundlegendes Erscheinungsbild für alle. Mit diesem Standarderscheinungsbild kann Ihr Shop nicht überragend abschneiden.

Sie können jedoch bei der Website-Anpassung mit ShopEngine's hervorstechen 74+ Widgets Und Über 20 Module mit denen Sie Seiten in einer intuitiven Elementor-Oberfläche anpassen können. Sie können beispielsweise WooCommerce-Seiten anpassen, indem Sie die erforderlichen Widgets per Drag & Drop in den Elementor-Editor ziehen. Hier ist ein Beispiel dafür, wie nahtlos ein Shop mit den von ShopEngine bereitgestellten Widgets im Elementor-Editor erstellt werden kann:

Und dies ist eine abschließende Demo der erstellten einzelnen Produktseite für Ihren Shop:

So fügen Sie WooCommerce-Produkte in Elementor hinzu

ShopEngine bietet eine einfache Möglichkeit, WooCommerce-Produkte in Elementor hinzuzufügen und anzupassen. Um WooCommerce-Produkte mit ShopEngine in Elementor hinzuzufügen, müssen Sie nun einige einfache und schnelle Schritte befolgen.

Hier zeigen wir, wie Sie mit ShopEngine ein Archiv, ein einzelnes Produkt und eine Shop-Seite zu Ihrem WooCommerce-Shop hinzufügen. Schauen wir uns gleich die vollständige Anleitung an:

Erstellen und Anpassen einer Archivseite in Elementor

Das Erstellen einer benutzerdefinierten Archivseite mit ShopEngine erfordert drei Schritte. Führen Sie die folgenden Schritte aus, um problemlos eine Archivseite hinzuzufügen:

Schritt 1: Fügen Sie eine Archivseitenvorlage hinzu.

Um eine Archivseite hinzuzufügen, müssen Sie zuerst eine Archivseitenvorlage erstellen. Navigieren Sie zu ShopEngine >> Builder-Vorlagen Und Klicken Sie auf „Neu hinzufügen“. Taste.

Dadurch wird auf der rechten Seite ein neuer Tab geöffnet. Fügen Sie nun eine Archivvorlage hinzu, indem Sie Füllen Sie die folgenden Felder aus:

• Name: Geben Sie Ihrer Vorlage einen Namen, beispielsweise eine Archivseite.
• Typ: Wählen Sie „Archiv“ aus dem Dropdown-Menü.
• Anwendbare Kategorie: Wählen Sie eine Kategorie.
• Aktiv: Schalten Sie den Umschaltknopf ein, um es zu aktivieren.
• Beispieldesign: Wählen Sie die leere Vorlage. Sie können auch eine vorgefertigte Vorlage auswählen, wenn Sie nicht alles von Grund auf neu machen möchten.

Nachdem Sie alle oben genannten Felder ausgefüllt haben, Klicken Sie auf „Mit Elementor bearbeiten“. Schaltfläche. Jetzt werden Sie zum Elementor-Editor weitergeleitet, von wo aus Sie mithilfe verschiedener Archivseiten-Widgets eine Archivseite erstellt haben.

Schritt 2: Entwerfen und passen Sie eine Archivseite an.

Im zweiten Schritt müssen Sie Wählen Sie eine Struktur aus für Ihr WooCommerce Elementor-Produktlayout.

Erstellen Sie jetzt eine Archivseite durch Ziehen und Ablegen von Kategorien, Archivtitel, Anzahl der Archivergebnisse, Archivprodukte, usw. Neben dem Erstellen einer Archivseite müssen Sie jeden Abschnitt Ihrer Archivseite anpassen, indem Sie auf diese Abschnitte klicken.

Wenn Sie beispielsweise Passen Sie den Abschnitt Kategorien an, drücken Sie darauf, und auf der linken Seite sehen Sie alle Optionen zur Inhaltsbearbeitung. Was Kategorien betrifft, erhalten Sie alle Optionen zum Passen Sie die folgenden Felder an unter der Registerkarte „Inhalt“:

• Titel: Titel für Kategorien einfügen.
• Sortieren nach: Wählen Sie die Reihenfolge aus, in der Ihre Kategorieelemente angezeigt werden sollen.
• Als Dropdown anzeigen: Aktivieren Sie diese Option, um Kategorieelemente im Dropdown-Format anzuzeigen.
• Produktanzahl anzeigen: Aktivieren Sie diesen Umschaltknopf, um die Produktanzahl zusammen mit den Artikeln anzuzeigen.
• Hierarchie anzeigen: Zeigen Sie die Hierarchie an, indem Sie sie aktivieren.
• Leere Kategorien ausblenden: Aktivieren Sie diese Option, um leere Kategorien auszublenden.
• Maximale Tiefe: Sie können auch die maximale Tiefe auswählen, um Ihre Elementor WooCommerce-Produktkategorie zu präsentieren.

Dann, Wechseln Sie zur Registerkarte „Stil“ Und Farbe, Typografie, Ränder, Polsterung, Rahmentyp, Rahmenbreite, Rahmenfarbe anpassen, usw. für Ihre Titel, Kategorienliste und globale SchriftartSo können Sie Ihre WooCommerce-Produktanzeige in Elementor durch Styling und Inhaltsbearbeitung ändern.

Schritt 3: Veröffentlichen Sie die Archivseite.

Im letzten Schritt Klicken Sie auf die Schaltfläche „Aktualisieren“ um Ihre Archivseite auf Ihrer Site live zu schalten.

So sieht Ihre Archivseite endgültig im Frontend aus:

Erstellen und Anpassen einer einzelnen Produktseite in Elementor

Nachdem Sie eine Archivseite hinzugefügt haben, müssen Sie eine einzelne Produktseite erstellen und dabei ähnliche Schritte wie bei der Archivseite ausführen. Lassen Sie uns dennoch im Detail lernen, wie Sie mit ShopEngine eine einzelne Produktseite hinzufügen:

Schritt 1: Erstellen Sie eine einzelne Produktseitenvorlage.

Fügen Sie, ähnlich wie bei der Archivseite, eine einzelne Produktseitenvorlage hinzu, indem Sie Besuchen Sie Builder-Vorlagen >> Neu hinzufügen und füllen Sie alle folgenden Felder der Vorlageneinstellungen:

• Name: Geben Sie „Einzelne Produktseite“ in das Feld „Name“ ein.
• Typ: Wählen Sie „Einzeln“ aus der Dropdown-Option.
• Anwendbare Kategorie: Geben Sie eine Kategorie für Ihre einzelne Produktseite ein.
• Aktiv: Aktivieren Sie den Umschaltknopf.
• Beispieldesigns: Wählen Sie eine leere Vorlage aus, um alles von vorne zu beginnen.

Danach, Klicken Sie auf „Mit Elementor bearbeiten“. Schaltfläche, um zum Elementor-Editor weitergeleitet zu werden.

Schritt 2: Richten Sie eine einzelne Produktseite mit integrierten Vorlagen ein.

In diesem Schritt müssen Sie Ihre WooCommerce-Einzelproduktseite in Elementor von Grund auf neu erstellen, indem Sie Ziehen und Ablegen von Produkttitel, Produktpreis, In den Warenkorb, Produktbildern, usw.

Nachdem Sie alle Widgets hinzugefügt haben, Passen Sie Ihre WooCommerce-Produktanzeige in Elementor an indem Sie Inhalt und Stil auf der linken Seite bearbeiten.

Schritt 3: Veröffentlichen Sie eine benutzerdefinierte einzelne Produktseite.

Im dritten Schritt müssen Sie „Aktualisieren“ oder „Veröffentlichen“ Ihre benutzerdefinierte WooCommerce-Einzelproduktseite in Elementor. Nach der Aktualisierung wird Ihre einzelne WooCommerce-Produktseite ungefähr so aussehen:

➡️ Überprüfen Sie, um Popup-Checkout-Seite in WooCommerce erstellen.

Fügen Sie in Elementor eine benutzerdefinierte Shop-Seite hinzu

Zuletzt müssen Sie eine benutzerdefinierte WooCommerce-Shopseite mit ShopEngine-Widgets hinzufügen, indem Sie der unten beschriebenen Anleitung folgen:

Schritt 1: Fügen Sie eine Shop-Seitenvorlage hinzu.

Sie können Ihrem Shop eine Shop-Seite hinzufügen, indem Sie Archiv- und einzelne Produktseiten erstellen. Um eine Vorlage hinzuzufügen, folgen Sie den vorherigen Schritten, z. B. navigieren Sie zu ShopEngine >> Builder-Vorlagen Und Klicken Sie auf „Neu hinzufügen“ Taste.

Füllen Sie dann die unten aufgeführten Felder aus:

• Name: Füllen Sie dieses Namensfeld mit „Shop-Seite“.
• Typ: Wählen Sie „Shop“ als Vorlagentyp aus.
• Aktiv: Aktivieren Sie den Umschaltknopf.
• Beispieldesigns: Wählen Sie ein leeres Design für Ihre Shop-Seite.

Nachdem Sie alle Felder ausgefüllt haben, Klicken Sie auf „Mit Elementor bearbeiten“ Taste.

Schritt 2: Gestalten Sie eine Shop-Seite mit Widgets und einer Vorlage.

Neben dem Hinzufügen einer Vorlage müssen Sie in Elementor verschiedene WooCommerce-Produkt-Widgets per Drag & Drop hinzufügen. Jetzt Archivtitel, Produktfilter, Archivprodukt pro Seitenfilter, Archivprodukte, Archivergebnisanzahl hinzufügen, usw. Widget nacheinander.

Nachdem Sie alle erforderlichen Widgets hinzugefügt haben, Führen Sie eine Elementor WooCommerce-Shopseitenanpassung durch über die Registerkarten „Inhalt“, „Stil“ und „Erweitert“.

Schritt 3: Veröffentlichen Sie die angepasste Shop-Seite. 

Im letzten Schritt Klicken Sie auf die Schaltfläche „Aktualisieren“ um die angepasste Shop-Seite live zu schalten. Diese Shop-Seite zeigt dynamische WooCommerce-Produkte in Ihrem Elementor-Shop und so sieht sie aus:

So fügen Sie WooCommerce-Produktseiten in Elementor mit integrierten Vorlagen hinzu

ShopEngine ermöglicht es Ihnen auch, WooCommerce-Produkte in Elementor mit integrierten Vorlagen anzuzeigen. Der Vorgang ähnelt dem Erstellen von Seiten von Grund auf. Hier müssen Sie, ohne eine leere Vorlage auszuwählen, eine vorgefertigte Vorlage auswählen, nachdem Sie zu ShopEngine >> Builder-Vorlagen Und Klicken Sie auf „Neue Vorlage hinzufügen“ Taste.

Endlich, Klicken Sie auf „Mit Elementor bearbeiten“. Klicken Sie nach Abschluss der Vorlagenauswahl auf die Schaltfläche. Somit gelangen Sie zu einer fertigen Shop-Seite, die mit der Vorlage erstellt wurde.

✅ Bonus-Anleitung: So fügen Sie WooCommerce eine benutzerdefinierte Dankesseite hinzu.

Tipps zur Optimierung von WooCommerce-Seiten in Elementor

Eine nicht optimierte WooCommerce-Seite kann die Website-Leistung durch langsame Ladegeschwindigkeit, Checkout-Prozess und Unzuverlässigkeit drastisch beeinträchtigen. In einer Studie wurde festgestellt, dass, wenn Ihre Website 1 bis 3s bis laden dann wird die Möglichkeit, dass Ihre Besucher auf Ihrer Website abspringen, Erhöhung um 32%.

Diese Absprungrate kann mit zunehmender Ladezeit deutlich ansteigen. Auch ein langwieriges Checkout-System und unzuverlässige WooCommerce-Seiten können die Abbruchrate erhöhen. Sie müssen also Ihre WooCommerce-Seiten optimieren, um diese Krisen zu vermeiden.

Hier sind einige Tipps zur Optimierung Ihrer WooCommerce-Seiten in Elementor:

• Stets Komprimieren Sie Ihre Bilder und Dateien bevor Sie sie auf Ihre Site hochladen. Unkomprimierte oder nicht optimierte Bilder oder Dateien erhöhen die Ladegeschwindigkeit der Site.
• Bauen Sie die Glaubwürdigkeit Ihrer WooCommerce-Website auf, indem Sie Integration sozialer Beweise wie Rezensionen, Feedback, Bewertungen usw.
• Entfernen Sie unnötige Widgets und Spalten die die Leistung Ihrer Website durch langsame Ladegeschwindigkeit beeinträchtigen.
• Minimieren Sie die Abbruchrate von Einkaufswagen, indem Sie Ihre Checkout-Seite kurz und prägnant halten.
• Optimieren Sie Ihre WooCommerce-Seiten für Mobilgeräte wie 601 TTP6T des Datenverkehrs sind mobile Besucher.
• Verwenden Sie auf Ihren WooCommerce-Seiten mit Bedacht Bilder, Videos und CTAs.
• Angebot Exit-Intent-Rabatte Und Gutscheine um ein Gefühl der Dringlichkeit zu erzeugen.
• Sorgen Sie dafür, dass Ihre WooCommerce-Website navigationsfreundlich bleibt, indem Sie Integration von Breadcrumbs.

⭐️ Erfahren Sie Tipps zu Steigern Sie die Conversion-Rate Ihrer WooCommerce-Produktseite.

Zusammenfassen

Jetzt sind Sie also nur noch einen Schritt von Ihrem nächsten Online-Projekt entfernt. Egal, ob Sie WooCommerce-Produkte lieber von Grund auf in Elementor hinzufügen oder eine integrierte Vorlage verwenden möchten, dieser Leitfaden deckt alles ab. Mit den professionellen Vorlagen oder flexiblen Designkontrollen von ShopEngine können Sie die Einschränkungen der standardmäßigen WooCommerce-Funktionen überwinden und im Handumdrehen vollständig anpassbare WooCommerce-Produktseiten erstellen.