So erstellen Sie eine WooCommerce-Produktliste mit Elementor Pro

Im vorherigen Tutorial haben wir gelernt, wie man die Startseite des WooCommerce-Shops mit Elementor Pro erstellt.

In diesem Tutorial werden wir sehen, wie wir es mit der Produktdatei unseres Shops machen können, die mit WooCommerce erstellt wurde.

Genau wie bei der Store-Seite erstellen wir zunächst eine Vorlage.

Dazu gehen wir zu Elementor -> Meine Vorlagen -> Einzelprodukt -> Neues Einzelprodukt hinzufügen:

Vorlage für einzelne Produktelemente
Vorlage für einzelne Produktelemente

Jetzt haben wir zwei Möglichkeiten:

  • Wählen Sie eine vordefinierte Vorlage
  • Erstellen Sie unser Produktblatt von Grund auf neu

Wählen Sie eine vordefinierte Vorlage

So einfach wie die Auswahl einer Vorlage unter den angezeigten:

einzelne Produktvorlagen
einzelne Produktvorlagen

Nach der Auswahl betreten wir den visuellen Editor von Elementor mit dem ausgewählten vordefinierten Design:

visueller Editor visuelles Element woocommerce
visueller Editor visuelles Element woocommerce

Wenn wir auf unser Design veröffentlichen klicken, haben wir die Möglichkeit, die Bedingung hinzuzufügen, damit die Vorlage, die wir erstellen, diejenige ist, die in den Produkten verwendet wird:

Elementor-Vorlagenprodukte
Elementor-Vorlagenprodukte

Und voila, wenn wir jetzt ein Produkt öffnen, hat es das neue Design, das wir mit der Vorlage generiert haben:

Ergebnis neue Elementregisterkarte
Ergebnis neue Elementregisterkarte

Erstellen Sie unser Produktblatt von Grund auf neu

So wie wir eine vordefinierte Vorlage verwenden können, um unser Produktblatt zu erstellen, können wir es komplett von Grund auf neu erstellen.

Dazu gehen wir zu Elementor -> Meine Vorlagen -> Einzelprodukt -> Neues Einzelprodukt hinzufügen und schließen jetzt, anstatt eine Vorlage auszuwählen, die Vorlagenseite und gelangen zum visuellen Konstruktor, aber diesmal ist er leer.

einzelnes Produktblatt von Grund auf neu
einzelnes Produktblatt von Grund auf neu

Wenn wir uns das vorherige Bild ansehen, sehen wir links alle Felder, die wir zu unserem Produktblatt hinzufügen können.

Bevor wir Felder hinzufügen, erstellen wir die Struktur unseres Produktblatts, dh wie viele Spalten möchten wir, in diesem Fall füge ich 2 Spalten hinzu, um das vorgestellte Bild des Produkts auf einer Seite zu platzieren und die Textfelder auf der anderen Seite.

Spalten Registerkartenstruktur
Spalten Registerkartenstruktur

Sobald wir die gewünschten Spalten ausgewählt haben, können wir ihre Breite ändern, indem wir einfach an den Ecken ziehen und die Größe auf die gewünschte Größe anpassen.

Jetzt müssen wir nur noch die gewünschten Felder von links an die Stelle ziehen, an der wir sie platzieren möchten:

Registerkartenfelder hinzufügen
Registerkartenfelder hinzufügen

Die Produktfelder, die wir unserer Datei hinzufügen können, sind:

  • WooCommerce-Breadcrumbs: Sie sind die Brotkrumen, um die navigierbare Route des Produkts zu haben
  • Produktname: Der Produkttitel
  • Artikelbild: Das vorgestellte Bild und die Fotogalerie unseres Produkts
  • Produktpreis: Produktpreis
  • In den Warenkorb legen: Button zum Hinzufügen zum Warenkorb
  • Produktbewertung: Kunden-Produkt-Feedback
  • Aktie: Anzahl der Produkte auf Lager
  • Produktziel: Daten wie SKU oder Produktkategorie
  • Kurzbeschreibung: Kurze Beschreibung des Produkts
  • Registerkarten für Produktdaten: Registerkarten mit Produktinformationen. Hier ist die lange Beschreibung und das Kundenfeedback
  • Zusätzliche Information: Zusätzliche Informationen
  • Produktbezogen: Produkte, die sich auf das Produkt auf dem Blatt beziehen
  • Upselling: Produkte, die in der Option für verknüpfte Produkte ausgewählt wurden

Im folgenden Video können Sie sehen, wie jede der oben genannten Optionen funktioniert:

Suscríbete a mi Kanal:  

Ich hoffe, dir hat das Tutorial gefallen 🙂

Hinterlassen Sie einen Kommentar