Zum Hauptinhalt springen

Erfahren Sie, wie Sie Ihre WooCommerce-Produktseitenvorlagen mithilfe von Elementor visuell anpassen können.

Holen Sie sich den besten WooCommerce-Builder und beginnen Sie mit der Gestaltung Ihres Traumgeschäfts

Damit Ihr E-Commerce-Shop auffällt und Ihren Kunden ein einzigartiges Erlebnis bietet, müssen Sie in der Lage sein, Ihre Produktseite anzupassen. Darüber hinaus ist die Möglichkeit, Ihre Produktseite visuell anzupassen, entscheidend, um einen einzigartigen Stil in Ihrem gesamten Online-Shop beizubehalten.

Sie möchten also Ihre WooCommerce-Produktseiten anpassen? Na du hast Glück!

Elementor erleichtert das visuelle Ziehen und Ablegen verschiedener Elemente von einzelnen Produktseiten erheblich und passt das Layout nach Ihren Wünschen an.

In der Vergangenheit umfassten diese Arten von WooCommerce-Design-Tutorials Dutzende von Codezeilen.

Glücklicherweise sind diese Tage dank vorbei Elementor WooCommerce Builder.

igraal_de-de

Mit Elementor Pro erhalten Sie jetzt die volle Kontrolle über Ihr Layout und das Layout Ihrer Produktseite. Sie müssen weder Aktionen noch Hooks einbinden oder in verschiedene PHP-Dateien graben. Jede Designanpassung erfolgt in der Benutzeroberfläche direkt vom Elementorpage Builder.

WooCommerce-Produktvorlage

Die WooCommerce-Basisproduktseite sieht folgendermaßen aus:

feature-1-1024x488-9326140-7396029-2468146

Mit Elementor können Sie mit dem Design der Produktseitenvorlage herumspielen, wie Sie möchten. In diesem Handbuch erfahren Sie, wie Sie dieses Produktseitenlayout erstellen:

3-Vorlage-des-Produkts-1024x554-9084436-1834935-4906292

Da Sie die einzelne Produktvorlage von Elementor verwenden, können Sie sie nach Abschluss der Erstellung auf alle Ihre Produkte sowie auf bestimmte Kategorien oder andere Bedingungen anwenden.

Ersteinrichtung

In diesem Tutorial liegt der Schwerpunkt auf dem Anpassen der Produktseite. Daher überspringen wir das grundlegende WooCommerce-Setup und das Hinzufügen neuer Produkte. Kinsta hat eine tolles Tutorial in der Sache, wenn Sie Hilfe dabei brauchen.

Nach dem Setup müssen Sie WooCommerce installiert und einige verwandte Produkte zu Ihrer Site hinzugefügt haben.

Sie müssen auch Elementor und Elementor Pro installiert haben, um die visuellen Entwurfsfunktionen zu erhalten.

Hinweis! Wenn Sie WooCommerce nicht aktiviert haben, können Sie nicht auf die Produktvorlagen von Elementor zugreifen.

Schritt 1: Erstellen Sie die eindeutige Produktvorlage

dauwp4j-1024x620-7232335-2661093-8547093

Um mit dem Entwerfen der einzelnen Produktvorlage in Elementor zu beginnen, gehen wir ähnlich vor wie beim Erstellen der normalen einzelnen Vorlage.

Schritt 2: Wählen Sie eine vorgefertigte Produktseitenvorlage aus oder erstellen Sie eine von Grund auf neu

rhplp2v-1024x682-2354286-2079144-3181990

Der einfachste Weg, um loszulegen, besteht darin, eine der vorgefertigten Produktseitenvorlagen zu verwenden und sie an Ihre Website anzupassen. Es stehen verschiedene Arten von Produktseiten zur Auswahl.

Bevor Sie mit dem Hinzufügen von Widgets beginnen, können Sie sicherstellen, dass Sie an einer Produktseite in voller Breite arbeiten und zu einer Vorlage in voller Breite wechseln (Informationen dazu finden Sie hier).

Mit Elementor haben Sie die vollständige Anpassungssteuerung für das Layout und den Stil der Produktseite.

Die andere Möglichkeit besteht darin, es von Grund auf neu zu erstellen. Im Bearbeitungsfeld sehen Sie die speziellen Widgets für das Produkt.

Schritt 3: Fügen Sie die Produkt-Widgets hinzu, aus denen Ihre Seite besteht

woo-685x1024-2043988-2410399-9333766

Jetzt ist es an der Zeit, die Elemente zu erstellen, aus denen Ihre Produktseite besteht. Die vollständige Liste der Produkt-Widgets finden Sie in unserer Dokumentation zu diesem Thema. Für dieses Tutorial verwenden Sie die folgenden Elementor-Widgets und keine anderen Plugins:

  • Produkttitel-Widget
  • Woo Breadcrumbs Widget
  • Produktbild-Widget
  • Produktbewertungs-Widget
  • Kurzbeschreibungs-Widget
  • Produktpreis-Widget
  • Widget zum Warenkorb hinzufügen
  • Produkt-Meta-Widget
  • Registerkarten für Produktdaten
  • Ähnliches Produkt
  • Upsell-Widget

Wie Sie im Video sehen können, haben Sie die völlige Freiheit, mit dem Layout zu spielen und Elemente zu verschieben.

Sie können jedes andere Widget verwenden, um Ihre Produktseite effektiver und attraktiver zu gestalten. Freigabeschaltflächen, Handlungsaufforderungen, ausgewählte Bilder, Dropdown-Menüs ... Mit der Funktion für dynamischen Inhalt können Sie der Vorlage sogar benutzerdefinierte Felder hinzufügen.

Schritt 4: Zeigen Sie eine Vorschau der Produktseite mit einem anderen Produkt an

3-Vorlage-des-Produkts-1024x554-9084436-1834935-4906292

Um sicherzustellen, dass Ihre Produktvorlage das richtige Layout hat, wird empfohlen, dass Sie eine Vorschau mit mehreren verschiedenen Produkten anzeigen.

Klicken Sie auf das Augensymbol unten links und dann auf Einstellungen. Wählen Sie unter Vorschaueinstellungen das Produkt aus, das Sie anzeigen möchten. Bewerben Sie sich jetzt und prüfen Sie, wie es aussieht.

Schritt 5: Stellen Sie die Bedingungen ein

fk2beyl-1024x682-2739854-1541419-3543605

In dieser Phase legen Sie die Bedingungen fest, unter denen Ihre Produktvorlage angezeigt wird. Standardmäßig wirkt sich die Vorlage auf alle Produktseiten Ihrer Website aus. Sie können auch eine bestimmte Produktkategorie auswählen.

Klicken Sie auf Veröffentlichen, und Ihr einziges Produkt ist aktiv!

Bonus: Passen Sie Ihre Product Store-Seite an

gdlxt34-1024x577-1164043-9690682-7461600

Entwerfen Sie zum Ausführen der Aufgabe eine Produktkatalogseite, die sich auf alle Produkte auf der Website oder nach Kategorie auswirkt. Gehen Sie also zuerst zurück zu Elementor> Meine Vorlagen und erstellen Sie eine Produktdateivorlage.

Wählen Sie dann eine vorhandene Vorlage aus oder erstellen Sie eine.

Fügen Sie das Widget "Stock Products" und den Dateititel hinzu und passen Sie Ihr Layout an.

Verwenden Sie die Kopierstilfunktion, die zwischen den Seiten funktioniert, um sie an das Layout anzupassen, das Sie bereits in Ihrer einzelnen Produktvorlage erstellt haben. Gehen Sie zurück zur Produktseite und klicken Sie mit der rechten Maustaste auf Kopieren. Klicken Sie im Standardprodukt mit der rechten Maustaste auf Stil einfügen.

Wählen Sie in den Einstellungen für Lagerprodukte unter Abfrage> Quellen die Option Neueste Produkte. Dann wählen Sie unter Produktkategorie Ringe. Auf diese Weise wird nur die Kategorie des Rings angezeigt.

Streichen Sie über Paginierung, wenn Sie eine lange Liste von Produkten für die Kategorie haben.

Auf der Registerkarte Stil können Sie den Abstand zwischen den Spalten und den Zeilen festlegen. Passen Sie Farben, Schriftarten und mehr an.

Wählen Sie vor dem Veröffentlichen die Bedingungen aus, um zu bestimmen, wo die Datei angezeigt wird, genau wie Sie es für die einzelne Produktvorlage getan haben.

Klicken Sie auf "Veröffentlichen" und Ihre Archivseite wird aktiv.

Erstellen Sie mit der Leistung von #Elementor einfallsreiche WordPress-Produktseiten

Fazit

Der WooCommerce Builder von Elementor bietet Ihnen die Designflexibilität, um Ihre Produktseiten visuell zu erstellen und anzupassen. Dies spart Ihnen Zeit und reduziert die Zeit, die erforderlich ist, um von einer Idee zu einem voll funktionsfähigen Live-WooCommerce-Online-Shop zu gelangen, erheblich.

Sie werden viele andere kostenlose WooCommerce-Vorlagen unter entdecken Envato-Elemente, das mehr als 2000 verschiedene Vorlagen bietet, von denen sich viele auf E-Commerce-Websites beziehen. Es gibt auch zahlreiche WooCommerce-Themen, die Sie wie die in unserem Artikel erwähnten überprüfen können.

Error: Beachtung: Geschützter Inhalt.