So bearbeiten Sie die WooCommerce-Produktseite mit Elementor Free

Veröffentlicht: 2023-12-28

Möchten Sie die WooCommerce-Produktseite mit Elementor kostenlos bearbeiten? Wenn Sie eine umfassende Anleitung benötigen, lesen Sie diesen Artikel weiter. Hier finden Sie eine Schritt-für-Schritt-Anleitung zum ordnungsgemäßen Bearbeiten Ihrer WooCommerce-Archivseite.

Während WooCommerce eine einfache Möglichkeit ist, Online-Shops zu erstellen, hängt das Design der Website von Ihrem aktiven Theme ab. Einige Leute verwenden spezielle WooCommerce-Themes auf ihrer Website, während andere auf ein Page Builder-Plugin angewiesen sind.

Mit einem Page Builder-Plugin können Sie mühelos beeindruckende WooCommerce-Shop-Designs erstellen.

Aber schauen wir uns zunächst an, was Elementor ist und warum Sie es verwenden sollten.

Was ist Elementor und warum wird es verwendet?

Elementor

Wenn Sie schon länger in der Blogging- und WordPress-Branche tätig sind, kennen Sie Elementor. Es ist eines der besten WordPress-Seitenerstellungs-Plugins, mit dem Sie problemlos beeindruckende Landingpages erstellen können.

Es handelt sich um ein Freemium-Plugin, was bedeutet, dass Sie mit der kostenlosen Version nur eingeschränkten Zugriff auf seine einzigartigen Funktionen haben und mit der Premium-Version das volle Potenzial des Plugins freigeschaltet werden. Wenn Sie ein Anfänger sind oder die Angebote von Elementor kennenlernen möchten, ist die Lite-Version genau das Richtige für Sie.

Wenn Sie hingegen ohne Einschränkungen einzigartige Seitendesigns erstellen müssen, entscheiden Sie sich für die Premium-Version. Einige der besonderen Funktionen des Elementor-Plugins sind:

  • Seitenbearbeitung per Drag-and-Drop
  • Funktioniert mit jedem Thema
  • Kompatibel mit Plugins von Drittanbietern
  • Optimierung der Seitengeschwindigkeit
  • Optimiert für WooCommerce
  • Anpassung der Kopf- und Fußzeile
  • Benutzerdefinierte Popups
  • Hochflexibel

Jetzt wissen Sie, was Elementor ist und warum Sie es verwenden sollten. Sehen wir uns als Nächstes an, wie Sie die WooCommerce-Produktseite mit der kostenlosen Elementor-Version bearbeiten.

So bearbeiten Sie die WooCommerce-Produktseite mit Elementor Free

Das erste, was Sie herausfinden müssen, ist die Elementor-Kompatibilität Ihres WooCommerce-Themes. Es gibt so viele hochgradig anpassbare WooCommerce-Themen. Einige der beliebtesten sind:

  • Blockig
  • Astra
  • GeneratePress
  • Neve
  • OceanWP
  • Divi
  • Hestia pro

Und so weiter.

Für dieses Tutorial verwenden wir das Astra-Theme. Es ist eines der besten WooCommerce-Themen, um den perfekten Online-Shop zu betreiben. Hier sind die wichtigsten Schritte, die Sie unternehmen sollten:

  1. Installieren und aktivieren Sie Elementor
  2. Konfigurieren Sie es
  3. Passen Sie die Produktseite an
  4. Veröffentlichen Sie die Änderungen

Schauen wir uns die Schritte etwas genauer an.

1. Installieren und aktivieren Sie Elementor

Als Erstes sollten Sie Elementor Lite in Ihrem WooCommerce-Shop installieren und aktivieren. Wenn Sie das Plugin bereits auf Ihrer Website verwenden, können Sie diesen Schritt überspringen und mit dem nächsten fortfahren.

Sie können das Plugin direkt über das WordPress-Plugin-Repository installieren.

Elementor installieren

Nachdem Sie die Aktivierung abgeschlossen haben, sollten Sie einige Dinge tun, bevor Sie das Elenmentor-Plugin zum Erstellen von Seiten verwenden.

2. Elementor konfigurieren

Der Einrichtungsprozess ist einfach. Direkt nach der Aktivierung sehen Sie einen Einrichtungsassistenten. Sie können es durchgehen und die grundlegenden Optionen einrichten.

Gehen Sie als Nächstes zu den Elementor-Einstellungen. Sie können es auf der linken Seite der Seite sehen.

Elementor-Einstellungen

Sie können den API-Schlüssel eingeben, um Google Maps in Ihre Website einzubetten.

Google Maps-API

Ebenso können Sie im Abschnitt „Funktionen“ die Optionen zur Optimierung der Leistung von Elementor sehen.

Elementor-Funktionen

Wenn Sie diese direkt nach der Aktivierung konfigurieren, können Sie die Leistung Ihrer Website optimieren. Sobald Sie die Konfiguration abgeschlossen haben, können wir die WooCommerce-Produktseite bearbeiten.

3. Passen Sie die Produktseite an

Jetzt müssen Sie zu dem Produkt gehen, das Sie anpassen möchten. Oben sehen Sie die Schaltfläche „Produkt bearbeiten“.

Produkt bearbeiten

Sie müssen auf die Schaltfläche klicken. Auf der nächsten Seite haben Sie die Möglichkeit, die Seite mit dem Elementor-Plugin zu bearbeiten.

mit Elementor bearbeiten

Bald werden Sie zur Elementor-Editorseite weitergeleitet.

Elementor-Editor

Auf der linken Seite sehen Sie alle Elemente, die Sie der Seite hinzufügen können. Auf der rechten Seite wird Ihnen die Live-Vorschau der Seite angezeigt.

Da es sich um eine kostenlose Version des Plugins handelt, sind die verfügbaren Optionen begrenzt. Wenn Sie leistungsfähigere Felder benötigen, sollten Sie sich für die Premium-Version entscheiden. Wählen Sie eine Option an der Seite aus und legen Sie sie im Container ab, um ein neues Feld hinzuzufügen.

In diesem Fall haben wir der Seite eine neue Überschrift hinzugefügt.

Überschrift zur Seite hinzufügen

Auf diese Weise können Sie den Seiten benutzerdefinierte Dateien hinzufügen und sie einzigartig machen. Sie können atemberaubende Produktseiten ohne Programmierung erstellen, indem Sie 10–20 Minuten damit verbringen. Da alle Ihre Änderungen auf ein einziges Produkt angewendet werden, können Sie sicherstellen, dass andere Produktseiten nicht beeinträchtigt werden.

Auf diese Weise können Sie jeder Shop-Seite einzigartige Inhalte hinzufügen, um mehr Benutzer anzulocken und die Konversionsraten zu steigern.

Das ist es! So können Sie mit Elementor Lite eine benutzerdefinierte Produktseite erstellen.

4. Veröffentlichen Sie jede Änderung

Sobald Sie fertig sind, können Sie die Änderungen veröffentlichen. Das ist es!

So können Sie die WooCommerce-Produktseite mit Elementor bearbeiten.

Bonus: So erstellen Sie problemlos benutzerdefinierte Shop-Archivseiten

Das Ändern der Shop-Archivseite kann eine Herausforderung sein, wenn Sie das Design Ihrer Website verbessern müssen. Wenn Sie Hilfe bei diesem Prozess benötigen, schauen Sie sich das ShopBuilder-Plugin an. Es enthält vorgefertigte Vorlagen für Ihren Warenkorb/Shop oder Ihre Produktseiten.

In diesem Abschnitt erfahren Sie, wie Sie mit dem Plugin problemlos eine benutzerdefinierte Elementor-Seite importieren können.

Gehen Sie zur Einstellungsseite, nachdem Sie das ShopBuilder-Plugin installiert und aktiviert haben.

Shopbuilder-Einstellungen

Von dort aus können Sie anpassen, wie das Plugin funktionieren muss. Gehen Sie nun zum WooCommerce-Vorlagen-Builder und erstellen Sie ein neues.

Neue Vorlage hinzufügen – WooCommerce-Produktseite bearbeiten

Sie müssen eine Vorlage auswählen

  • Name
  • Typ
  • Editortyp

Vorlageneinstellungen

Sobald dies erledigt ist, müssen Sie nach unten scrollen. Dort sehen Sie mehrere vorgefertigte Vorlagen.

Alle Vorlagen – WooCommerce-Produktseite bearbeiten

Einige Vorlagen sind kostenlos, während andere [Premium] sind. Da wir die kostenlose Version des Plugins verwenden, können wir nur die kostenlosen Vorlagen auswählen. Wählen Sie eine Vorlage nach Ihren Wünschen. Sie können die Vorlage entweder in der Vorschau anzeigen oder importieren.

Importvorlage – WooCommerce-Produktseite bearbeiten

Wenn Sie die Vorlage anpassen müssen, können Sie das Elementor-Plugin verwenden. Anschließend veröffentlichen Sie die Änderungen.

Vorlage aktualisieren – WooCommerce-Produktseite bearbeiten

Das ist es. Auf diese Weise können Sie das ShopBuilder-Plugin verwenden, um das Design des WooCommerce-Shops zu verbessern.

Abschluss

Eine einzigartige Produktseite hilft Ihnen dabei, mehr über das Produkt zu erzählen, das sich der Kunde ansieht. Standardmäßig verfügt das WooCommerce-Plugin über eingeschränkte Funktionen. Mit einem Plugin wie Elementor können Sie es ändern.

Wie Sie in diesem Tutorial sehen können, können Sie die Produktseite mit Elementor nach Ihren Wünschen ändern. Die kostenlose Version von Elementor verfügt über eingeschränkte Funktionen und Felder. Aber für Anfänger ist es eine praktikable Option.

Ebenso können Sie die Produktseite auch mit einem Plugin wie ShopBuilder bearbeiten. ShopBuilder wird mit vorgefertigten Vorlagen geliefert, sodass Sie nur minimale Anpassungen vornehmen müssen.

Wie planen Sie die Bearbeitung Ihrer Produktseite?

Lass es uns in den Kommentaren wissen.