So passen Sie die WooCommerce-Produktseite einfach ohne Codierung an

Customize WooCommerce Product Page

Wenn Sie wissen möchten, wie Sie die WooCommerce-Produktseite einfach und ohne Codierung anpassen können.

Möchten Sie die beste Produktseite erstellen, ohne dafür zu bezahlen? $$$$ an Entwickler oder Agenturen.

Dann in diesem Tutorial, Wir zeigen Ihnen die einfachste und beste Methode, um die Produktseite nach Ihren Wünschen anzupassen.

Sie können es in anpassen 3 Wege, mit diesen Methoden:-

  1. Elementor Pro
  2. GloriousThemes Services
  3. Woolentor

Offenlegung: Ich kann für einige der untenstehenden Links eine Affiliate-Vergütung erhalten, die für Sie kostenlos ist, wenn Sie sich für den Kauf eines kostenpflichtigen Plans entscheiden. Sie können unsere Affiliate-Offenlegung in unserem lesenDatenschutz-Bestimmungen.

1. Verwenden von Elementor Pro

Sie können die WooCommerce-Produktseite vollständig anpassen, ohne sie zu codieren, und sie nach Ihren Wünschen gestalten Elementor Pro Plugin.

Elementor ist ein Drag & Drop-Plugin für den Seitenersteller, das derzeit das ist #1 WordPress Page Builder Plugin.

Es kommt herein 2 Varianten:- Kostenlos und Pro.

elementor pro customize woocommerce product page

Die kostenlose Version eignet sich sehr gut für die normale Seitenerstellung, es fehlen jedoch die Funktionen, die Sie zum Anpassen der Produktseite in WooCommerce benötigen.

So, Elementor Pro ist erforderlich. Dies ist das einzige Plugin, das Sie kaufen müssen, um die Produktseite zu gestalten.

So, Lass uns anfangen.

Sie können Ihre Zeit sparen, indem Sie sich das Video-Tutorial ansehen

Schritt 1: Laden Sie das Plugin herunter

Der erste Schritt ist das Herunterladen des Plugins. Sie müssen kaufen Elementor Pro von der offiziellen Website, die Sie besuchen können, indem Sie hier klicken –> Offizielle Website von Elementor.

Sobald Sie die gekauft haben Premium-Version des Plugins und haben den Lizenzschlüssel. Sie müssen das Plugin in Ihrem WordPress installieren.

elementor-page-builder-astra

Gehen Sie zum Admin-Bereich Ihrer WordPress-Website:-

  • Gehen Sie zu www.yourwebsite.com/wp-admin
  • Melden Sie sich an und navigieren Sie zu Plugins > Neue hinzufügen > Suche
  • Suche nach Elementor, Klicken Sie auf Installieren und aktivieren.
  • Nun wieder, Gehe zu Plugins > Neue hinzufügen > Hochladen.
  • Laden Sie die Premium-Version von Elementor hoch und aktivieren Sie sie.

Sie haben das Elementor Pro-Plugin nun erfolgreich installiert und aktiviert und sind einsatzbereit.

Im nächsten Schritt, wir werden Erstellen Sie die neue Produktseite für WooCommerce mit Elementor.

Schritt 2: Produktseite erstellen

Der nächste Schritt besteht darin, die Produktseite mit Elementor Pro zu erstellen. Jetzt hängt es von Ihnen ab, welche Art von Produktseite Sie erstellen möchten.

Es gibt 2 Arten von Produktseite:-

  • Produktseite archivieren
  • Einzelne Produktseite
woocommerce product page 1

Produktseite archivieren: Auf dieser Seite werden alle Produkte von woocommerce angezeigt. Genau wie die Shop-Seite.

Einzelne Produktseite: Auf dieser Seite wird ein einzelnes Produkt angezeigt. Beispiel: https://GloriousThemes.com/themes/nihal .

Der Vorgang auf beiden Seiten ist der gleiche. Also in diesem Tutorial, Wir erstellen eine einzelne Produktseite, um unser Produkt in einem anderen Stil anzuzeigen.

So erstellen Sie eine Produktseite:

  • Gehe zu /wp-admin.
  • Navigieren Sie dann zu Vorlagen > Theme Builder.
  • Von der linken Seite der Seitenleiste.
  • Weiter Wählen Sie die Single ( Von Registerkarten ) und einen Namen setzen.
  • Ich schlage vor “Produkt Single” und erstellen Sie dann die Seite.

Jetzt wird Ihre Produktseite erstellt, Aber es ist leer und hat kein Design oder Funktionalität. Wir werden die Seite gestalten und die Widgets hinzufügen, um den Titel Ihres Produkts anzuzeigen, Preis und alle notwendigen Dinge.

Apropos, Wenn Sie beim Entwerfen Ihrer Produktseite auf ein Problem stoßen. Sie können GloriousThemes.com WordPress Services mieten und sie erledigen die ganze Arbeit so, wie Sie es möchten.

Schritt 3: Seite gestalten

Das Entwerfen der Seite mit Elementor Drag & Drop ist wirklich einfach und unkompliziert. Sie müssen lediglich die Elemente für Ihre Seite nach Ihren Wünschen ziehen.

Fügen Sie die Farben und den Seitenstil hinzu oder verwenden Sie eine Vorlage vorab erstellt für Elementor Pro Benutzer.

edit woocommerce product page layout

Der nächste Schritt ist das Hinzufügen der Woocommerce-Widgets aus Elementor Blocks.

In Elementor, Sie finden die Registerkarten für den Woocommerce-Block, Dies sind die Widgets, mit denen wir unserer Produktseite Funktionen hinzufügen. Mit diesem Widget können Sie das Layout der Woocommerce-Produktseite einfach per Drag & Drop anpassen.

[optin-monster-shortcode id =”a9hjmpjcuohk0eabddi5″]

Das Anpassen der Woocommerce-Produktseitenvorlage oder das Entwerfen einer Produktseite ist ähnlich. Der einzige Unterschied besteht darin, dass beim Anpassen der Produktseitenvorlage, Sie müssen es per Code tun oder von vorne beginnen.

Aber beim Entwerfen, Sie können mit elementor so oft bearbeiten, wie Sie möchten.

Schritt 4: Widgets hinzufügen

Die Elementor WooCommerce Block-Bibliothek verfügt über alle Funktionen und Widgets, die Sie für Ihre Produktseite benötigen.

Wie jetzt haben Sie die Seite entworfen, die Sie als Produktseite verwenden möchten, Ziehen Sie nun die Widgets wie die per Drag & Drop:-

  • Produktname
  • Produktkategorie
  • Produktbeschreibung
  • Produktpreis
  • Produktbilder & Galerie
  • Produktregisterkarten
  • Produkt Brotkrumen
  • Produktbewertungen
  • Produkt Kurzbeschreibung
  • in den Warenkorb legen
  • Produkte im Zusammenhang
  • Upsells

Sobald Sie alle Widgets an der richtigen Stelle hinzugefügt haben. Klicke auf Änderungen speicherns.

customize woocommerce product page

Schritt 5: Vorschau der Seite mit einem anderen Produkt

Beim Entwerfen und Hinzufügen der Widgets, Elementor wählt standardmäßig ein Produkt aus dem Woocommerce aus und zeigt Ihnen die Ausgabe an.

customize woocommerce product page

Jetzt werden wir das Produkt ändern. Und das zu tun, wir werden es in tun 4 Schritte:-

  1. Klicken Sie auf Einstellungen “das Zahnradsymbol“.
  2. Wählen Sie die Vorschaueinstellungen
  3. Wählen Sie WooCommerce.
  4. Wählen Sie ein anderes WooCommerce-Produkt aus.

Auf diese Weise möchten Sie das Produkt für die Anzeige ändern, wenn Ihre Produktseite einwandfrei funktioniert.

Schritt 6: Stellen Sie die Bedingungen ein

Durch Einstellen der Seitenbedingung, Sie werden Woocommerce dazu bringen, diese neue Seite zu verwenden, die Sie für Ihre einzelnen Produkte erstellt haben.

Um den Zustand der Seite festzulegen, klicken Sie auf das Pfeilsymbol, in der Nähe der Schaltfläche "Veröffentlichen".

edit woocommerce product page

Als nächstes wählen Sie die Anzeigebedingungen aus dem Popup.

edit woocommerce product page

Sie erhalten ein Popup, dann klick “Bedingung hinzufügen” Wählen Sie dann aus, wo diese Produktseitenvorlage automatisch bereitgestellt werden soll.

customize woocommerce product template

Nachdem Sie auf die Bedingung Hinzufügen geklickt haben, Sie erhalten die Option mit “einschließen” oder “Ausschließen”. Mit diesen Optionen können Sie vollständig steuern, wo diese neue Vorlage bereitgestellt werden soll und wo nicht.

customize woocommerce product template

Da wir eine benutzerdefinierte Produktseite für unseren WooCommerce erstellen. Wir werden die wählen “Produkte” Option aus der Dropdown-Liste als “Einschließen“.

Und das ist es, Klicken Sie jetzt auf “sparen & Schließen“.

Sie haben die Bedingung "Seitenanzeige" erfolgreich erstellt und Ihre Seite kann bereitgestellt und als neue Produktseite verwendet werden.

Schritt 7: Veröffentlichung der Seite

 Dies ist der letzte Schritt zum Erstellen Ihrer benutzerdefinierten Produktseite. Alles, was Sie getan haben, funktioniert nicht, wenn Sie die Seite nicht veröffentlichen und der Öffentlichkeit zugänglich machen.

Elementor Single Product publish

Klicken Sie auf die Schaltfläche Veröffentlichen, und Sie haben Ihre benutzerdefinierte Produktseitenvorlage erfolgreich abgeschlossen.

Abonnieren Sie unseren WooCommerce Guide von GloriousThemes, Hier können Sie exklusive Video-Tutorials und kostenlose Hilfe von Experten genießen.

[optin-monster-shortcode id =”a9hjmpjcuohk0eabddi5″]

2. Verwenden von GloriousThemes

Wir wissen, dass das Entwerfen von WordPress-Designs und -Vorlagen nicht für alle einfach ist. Wenn Sie nach einer guten Vorlage oder einem WordPress-Dienst suchen, der diese Aufgabe für Sie erledigen kann.

Dann GloriousThemes hat eine großartige Liste von WordPress-Diensten, die eine erstaunliche Unterstützung bieten, und ein Expertenteam, das Ihnen bei der Lösung Ihres Problems hilft.

Sie sind bekannt und beliebt für ihre Arbeiten und haben mehrere Arbeiten zum Anpassen und Reparieren von WordPress ausgeführt.

wordpress services

Methode A.: Bestellung ihrer WordPress Services

Diese Methode ist wirklich einfach und kinderleicht. Ja, Ich meine es so, Es ist sehr leicht.

Gehe zu GloriousThemes.com/services und bestellen Sie ihr Service Pack. Sie müssen das WooCommerce Design Customization Pack bestellen.

Nach der Bestellung, Sie erhalten eine E-Mail von ihrem Team, das Sie kontaktiert und Sie nach allen Anforderungen fragt, die Sie für Ihre WooCommerce-Anpassung benötigen.

Wenn Sie ein Bild für das Design haben, oder ein Modell oder möchten so etwas wie die Website Ihres Konkurrenten. Geben Sie ihnen einfach diese Details.

gloriousthemes wordpress services

Ihr Team beginnt mit der Arbeit in der Entwicklungsumgebung und aktualisiert Sie durch Bereitstellung einer Live-URL, auf die Sie zugreifen können, um das Design und seine Änderungen zu sehen.

Sobald Sie mit dem Design zufrieden sind. Sie werden es auf Ihrer Live-Website bereitstellen und testen 100% Sicherheit, wie ihr Ziel ist zu haben 100% Kundenzufriedenheit.

Nachdem sie sichergestellt haben, dass alles gut funktioniert. Sie werden Sie um Ihr Feedback bitten und die Aufgabe als erledigt markieren.

Das ist es. Sie müssen sich nicht um die Programmierung oder das Entwerfen von Problemen kümmern.

Methode B.: Kaufen eines Themas oder einer Vorlage von GloriousThemes

GloriousThemes hat mehrere Vorlagen und Designs für WordPress und WooCommerce und sie erstellen auch benutzerdefinierte WordPress-Designs.

Sie können entweder auf der Website kaufen oder eine benutzerdefinierte Vorlage oder ein benutzerdefiniertes Thema für Ihre Website bestellen.

Mit den WordPress-Diensten von GloriousThemes kann jeder ganz einfach die günstigsten WordPress-Dienste und ein Team von WordPress-Experten in seinen Händen halten.

3. Mit Woolentor

Woolentor ist ein Elementor + Builder für Woocommerce Addons. Es ist dasselbe wie Elementor Pro Blocks, mit dem Sie das Layout der Woocommerce-Produktseite bearbeiten und die Woocommerce-Produktseite nach Ihren Wünschen anpassen können.

Woolentor eignet sich am besten für diejenigen, die Elementor Pro nicht verwenden möchten und zusätzliche Funktionen für den Woocommerce wünschen.

woolentor

Woolentor kommt herein 2 Varianten:

  1. WooLentor Kostenlose Version – Begrenzte Ressourcen ( Wesentliche Funktionen nicht verfügbar ).
  2. Woolentor Pro Version – ( Komplette Funktion zum Erstellen einer robusten Woocommerce-Website ).

Woolentor Pro bietet all diese Funktionen für eine WooCommerce-Website

  • Produkt-Tab
  • universal Product
  • In Banner
  • Produktarchiv
  • Produktname
  • Ähnliches Produkt
  • In Warenkorb-Knopf
  • zusätzliche Information
  • Produktdaten Tab
  • Produktbeschreibung
  • Mein Konto Bestell
  • Thankyou Bestellen
  • Thankyou Kundenadresse
  • Produkt Kurzbeschreibung
  • Produkt Social Share
  • Produktpreis
  • Produktbewertung
  • Produktrezensionen
  • Artikelbild
  • Produkt Upsell
  • Produkt Lagerstatus
  • Produkt-Meta-Info
  • Artikel-Archiv-Layout
  • Produkt Wagen Tabelle
  • Registrierungsformular
  • Ihr Konto Logout
  • Thankyou Order Details
  • Verfügbar Stock Progress Bar Neu
  • Produkt Warenkorb Total
  • Produkt-Cross-Selling
  • Kasse Weitere Informationen
  • Kasse Billing Form
  • Kasse Versandkosten-Formular
  • Kasse Zahlung
  • Kasse Bestell-Bewertung
  • Mein Benutzerkonto Übersicht
  • Ihr Konto herunterladen
  • Mein Konto
  • Mein Konto Anschrift
  • Login Formular
  • Voraus Product Image
Abonnieren Sie meinen YouTube-Kanal

Schritt 1: Laden Sie das Plugin herunter

Vollständiges Anpassen des Woocommerce-Produktseitenlayouts, Wir brauchen die Pro-Version von Woolentor.

https://wordpress.org/plugins/woolentor-addons/

Woolentor hat eine kostenlose Version, aber ich würde Ihnen empfehlen, die Pro-Version zu kaufen.

So laden Sie die Woolentor Pro-Version herunter, Klicken Sie auf die Schaltfläche unten:-

Nachdem Sie den Woolentor Pro gekauft und heruntergeladen haben. Sie müssen Woolentor installieren.

  • Gehen Sie zu www.yourwebsite.com/wp-admin
  • Melden Sie sich an und navigieren Sie zu Plugins > Neue hinzufügen > Hochladen
  • Wählen Sie die ZIP-Datei Woolentor Pro aus, Klicken Sie auf Hochladen.
  • Klicken Sie auf Aktivieren.

Also jetzt, Ihr Woolentor ist einsatzbereit, Aber Sie brauchen Elementor, damit es funktioniert. Also installiere elementor free version.

  • Gehen Sie zu www.yourwebsite.com/wp-admin
  • Navigieren Sie zu Plugins > Neue hinzufügen > Suche
  • Geben Sie elementor ein
  • Klicken Sie auf Installieren,
  • Klicken Sie dann auf Aktivieren.

Der Schritt:1 ist fertig,

Schritt 2: Seite erstellen

Erstellen Sie eine Produktseite, die auch als Woocommerce-Produktvorlage bezeichnet wird. So erstellen Sie eine Seite für Ihr Woocommerce-Produkt, Sie müssen diese paar Schritte befolgen.

  1. Gehen Sie zu Ihrem /wp-admin
  2. Navigieren Sie zu Vorlagen> Theme Builder> Produkt
  3. Erstellen Sie eine neue Seite und benennen Sie sie – einzelnes Produkt
  4. sparen Die Veränderungen.
  5. Wie du das machst, Es öffnet sich die Seite in der Elementor bearbeitetr.

So, Jetzt wird die Seite erstellt, Sie müssen die Seite entwerfen und die Widgets zur Seite hinzufügen.

[optin-monster-shortcode id =”a9hjmpjcuohk0eabddi5″]

Schritt 3: Entwerfen der Seite und Hinzufügen der Widgets

Wenn Sie Elementor Pro haben, Dann haben Sie die Möglichkeit, die vorgefertigten Vorlagen mit einem Klick auf eine Schaltfläche zu importieren.

Aber wenn Sie die kostenlose Version von Elementor verwenden, Dann müssen Sie die Seite von Grund auf neu gestalten und die Widgets an ihrer jeweiligen Position hinzufügen.

customize woocommerce product pag

Sie erhalten auch neue Blockbibliotheken von Woolentor. Es wird Ihnen helfen, neue Funktionen hinzuzufügen, Widgets, und benutzerdefinierte Post-Abfragen.

Im Elementor-Editor, Sie haben ein Suchfeld, Hier können Sie schnell nach Widgets suchen.

Geben Sie Woolentor ein und suchen Sie nach allen Widgets. Sie können jedes Widget ziehen und ablegen, um Ihre benutzerdefinierte WooCommerce-Produktseite zu entwerfen und zu erstellen.

Sehen Sie sich unser Video zur Verwendung des Woolentor WooCommerce Plugins an.

Schritt 5: Vorschau der Seite mit einem anderen Produkt

Nachdem Sie die Widgets hinzugefügt und die Seite wie gewünscht gestaltet haben. Sie müssen die Kompatibilität mit anderen Produkten testen, um sicherzustellen, dass es genau so funktioniert, wie es sein sollte.

Produkt ändern, Sie müssen auf das Zahnradsymbol klicken. Wie auf dem Foto gezeigt.

customize woocommerce product pag

Klicken Sie dann auf Vorschaueinstellungen, und wählen Sie den ersten Schritt als “Produkt” In der zweiten Option können Sie ein anderes Produkt für die Vorschau auswählen.

Klicke auf Anwenden & Vorschau.

Jetzt, Das Produkt wird geändert, Überprüfen Sie, ob alle von Ihnen hinzugefügten Widgets und das Design ordnungsgemäß funktionieren.

Sie können die erforderlichen Anpassungen vornehmen und die Woocommerce-Produktseite bearbeiten, wenn Ihre Seite nicht ordnungsgemäß funktioniert. Aber wenn alles gut funktioniert, weiter zu Schritt 6.

Schritt 6: Legen Sie die Bedingungen fest und veröffentlichen Sie die Seite

Der letzte Schritt besteht nun darin, den Zustand der Seite festzulegen. Es bedeutet, wo diese Seite automatisch angezeigt werden und funktionieren soll.

Normalerweise, wenn Sie eine Produktseite erstellt haben, Sie möchten, dass diese Seite Ihre alte Produktseite ersetzt und als neue Produktseite für alle Ihre Woocommerce-Produkte fungiert.

So legen Sie den Zustand der Seite fest.

Drücke den Zahnrad-Symbol von der Elementor Editor Seite.

Wähle aus Anzeigebedingungen,

Dies öffnet ein neues Popup-Fenster.

customize woocommerce product page
customize woocommerce product page layout

Klicke auf Bedingung hinzufügen, und wählen Sie Produkte.

customize woocommerce product page layout

Auf diese Weise können Sie das Layout der Woocommerce-Produktseite mithilfe von elementor problemlos anpassen, ohne eine Codezeile schreiben zu müssen.

Öffnen Sie Ihre Website in einem neuen Inkognito-Tab und öffnen Sie ein Seite und testen Sie, ob das neue Woocommerce-Produkt angepasst wird Seite funktioniert einwandfrei.

Fazit

Wenn Sie die Kundenerfahrung regelmäßig ändern und aktualisieren möchten, indem Sie die Woocommerce-Produktseite anpassen. Ich würde Ihnen empfehlen, Elementor Pro zu kaufen.

Elementor Pro ist ein fantastisches Plugin für den Seitenersteller, das derzeit das ist #1 Seitenersteller für WordPress.

Elementor erhält regelmäßige Updates und der Entwickler fügt ständig neue Funktionen und Communitys hinzu, die am häufigsten nachgefragt werden, und das Beste daran ist, dass es auch WooCommerce out of box unterstützt.

Dies bedeutet, dass Sie kein anderes Plugin für Ihren Woocommerce-Shop benötigen.

Das ist alles.

jedoch, Ihre Bedürfnisse können sich von meinen unterscheiden. Welches Plugin ist dein Favorit, und verwenden Sie es derzeit auf Ihrer Website?? Haben Sie weitere Empfehlungen hinzuzufügen?? Bitte äußern Sie Ihre Gedanken in den Kommentaren unten!

Du kannst auch Abonniere unser YouTube und Like und folge uns weiter Facebook, zwitschern, und instagram.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

3 Kommentare