So bearbeiten Sie die WooCommerce-Shop-Seite mit Elementor

Veröffentlicht: 2022-01-26

Wenn Sie einen WooCommerce-Shop haben und Ihr Geschäft ausbauen möchten, sind wir hier, um Ihnen zu zeigen, wie Sie die WooCommerce-Shop-Seite mit Elementor bearbeiten.

In diesem Artikel zeigen wir Ihnen in wenigen einfachen Schritten den Prozess zum Bearbeiten der WooCommerce-Shopseite. Sie müssen bis zum Ende bei uns sein, um den Prozess zu lernen.

Ich gehe davon aus, dass Sie WooCommerce installiert und eine Shop-Seite für Ihr Unternehmen eingerichtet haben. Lassen Sie uns Ihnen den Prozess der Bearbeitung dieser Seite zeigen.

Es gibt ein paar einfache Schritte, um die Shop-Seite zu bearbeiten. Sie müssen sich darüber keine Sorgen machen.

Die Schritte sind unten angegeben:

Schritt 1: Erstellen Sie die Einzelproduktvorlage

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

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

Schritt 4: Vorschau der Produktseite mit einem anderen Produkt

Schritt 5: Legen Sie die Bedingungen fest

Lass uns anfangen!

Schritt 1: Erstellen Sie die Einzelproduktvorlage

Beginnen Sie mit dem Entwerfen der Einzelproduktvorlage in Elementor und folgen Sie einem ähnlichen Verfahren wie beim Erstellen der regulären Einzelvorlage.

Dazu müssen Sie zum WordPress-Dashboard > Vorlage > Neu hinzufügen gehen. Dann müssen Sie Einzelseite aus den Vorlagenoptionen auswählen und auf die Schaltfläche Erstellen klicken.

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

Folgen Sie dem einfachsten Weg, um loszulegen. Verwenden Sie eine der vorgefertigten Produktseitenvorlagen und passen Sie sie an Ihre Website an. Sie können verschiedene Stile auswählen, da Sie aus mehreren verschiedenen Stilen von Produktseiten auswählen können.

Stellen Sie vor dem Hinzufügen von Widgets sicher, dass Sie an einer Produktseite in voller Breite arbeiten, indem Sie zu einer Vorlage in voller Breite wechseln.

Verwenden Sie Elementor, um die vollständige Anpassungskontrolle über das Layout und den Stil der Produktseite zu erhalten.

Es gibt eine andere Möglichkeit, es von Grund auf neu zu erstellen. Im Bearbeitungsbereich sehen Sie die speziellen Widgets für das Produkt.

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

Jetzt ist es an der Zeit, die Elemente zu erstellen, aus denen Ihre Produktseite bestehen wird. 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
Produktbild-Widget
Woo Breadcrumbs-Widget
Kurzbeschreibungs-Widget
Produktbewertungs-Widget
Produktpreis-Widget
Produkt-Meta-Widget
Widget zum Warenkorb hinzufügen
Produktbezogen
Registerkarten für Produktdaten
Upsell-Widget

Sie haben völlige Freiheit, mit dem Layout herumzuspielen und Elemente zu verschieben.

Sie haben die Möglichkeit, jedes andere Widget zu verwenden, um Ihre Produktseite effektiver und ansprechender zu gestalten. Mit der Funktion für dynamische Inhalte können Sie der Vorlage Schaltflächen zum Teilen, Call-to-Action-Widgets, ausgewählte Bilder, Dropdown-Menüs und sogar benutzerdefinierte Felder hinzufügen.

Schritt 4: Vorschau der Produktseite mit einem anderen Produkt

Wir empfehlen, dass Sie es mit mehreren verschiedenen Produkten in der Vorschau anzeigen, um sicherzustellen, dass Ihre Produktvorlage das richtige Design hat.

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

Schritt 5: Legen Sie die Bedingungen fest

Dies ist die letzte Phase, in der Sie die Bedingungen festlegen, um zu bestimmen, wo 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 Einzelprodukt ist live!

Alles erledigt! Sie haben Ihre WooCommerce-Shopseite erfolgreich mit wsdgets bearbeitet. Jetzt können Sie mit mehr Besuchern auf Ihrer Website rechnen als je zuvor.

Fazit

Mit dem WooCommerce Builder von Elementor, der Ihnen die Möglichkeit gibt, erhalten Sie die Designflexibilität, um Ihre Produktseiten visuell zu erstellen und zu optimieren. Dies hilft Ihnen, Zeit zu sparen, und verkürzt die Zeit, die Sie benötigen, um von einer Idee, die Sie haben, zu einem aktiven und voll funktionsfähigen Online-WooCommerce-Shop zu gelangen, erheblich.

Es gibt zahlreiche WooCommerce-Themen, die Sie sich ansehen und diese Beispiele von WooCommerce-Websites zur Inspiration ansehen können.

Danke, dass Sie bei uns sind. Einen schönen Tag noch.