So erstellen Sie benutzerdefinierte WooCommerce -Produktseiten mit Elementor

Heutzutage gehört Elementor zu den hochrangigen Seitenbauern. Es ist sehr einfach, eine Website mit den Funktionen der Seitenbauer zu erstellen.

Es bietet jedoch vorgefertigte Designs. Wenn Sie jedoch selbst erstellen möchten, macht es den Drag & Drop-Builder von Elementor jeden Vorgang sehr einfach. Es ist also eine Win-Win-Situation.

Übrigens finden sich Produktseiten auf fast jeder E -Commerce -Website, aber eine benutzerdefinierte WooCommerce -Produktseite wird erstellt, wenn der Site -Eigentümer ein Produkt anders anzeigen muss.

Beim Entwerfen der Website können Sie benutzerdefinierte WooCommerce -Seiten erstellen.

In diesem Blog werden wir sehen, wie Sie benutzerdefinierte WooCommerce -Produktseiten mit Elementor Page Builder auf einer WordPress -Website erstellen.

Welche Tools benötigen wir, um benutzerdefinierte WooCommerce -Produktseiten zu erstellen

In diesem Blog benötigen wir das Elementor -Plugin. Darüber hinaus benötigen wir auch Elemento -Addons.

Elementor erleichtert den Seitenaufbauprozess und das Elemento-Addon hilft dabei, die Leistung von Elementor zu erweitern, indem Widgets Widgets und zusätzliche Funktionen hinzugefügt werden.

Elemento Addons hat einige Widgets, die aufgrund ihres Betriebs und ihrer Glätte illegal sind.

Also fangen wir jetzt an, jetzt,

So erstellen Sie benutzerdefinierte WooCommerce -Produktseiten mit Elementor

Lassen Sie uns zunächst beide Plugins installieren.

Installieren von Elementor -Plugin

Schritt 1) ​​Öffnen Sie Ihr Dashboard

Melden Sie sich bei Ihrem WordPress -Dashboard an.

Schritt 2) Gehen Sie zu Plugins und klicken Sie auf neues Plugin hinzufügen

Im Armaturenbrett sehen Sie mehrere Menüs auf der linken Seite. Gehen Sie zu Plugins und klicken Sie auf neues Plugin hinzufügen.

Schritt 3) Gehen Sie zur Suchleiste und suchen Sie nach Elementor

Auf dieser Seite finden Sie die Plugins. Gehen Sie zur Suchleiste und suchen Sie nach dem Elementor.

Schritt 4) das Elementor installieren und aktivieren

Nach der Suche nach dem Elementor wird es in der Liste des Plugins angezeigt. Klicken Sie nach der Installation auf die Schaltfläche Installation, um auf die Schaltfläche "Aktivieren" zu aktivieren, um das Elementor -Plugin zu aktivieren.

Hochladen von Elemento Addons Plugin

Laden Sie zunächst die Elemento -Addons von themenhunk herunter.

Gehen Sie zur Seite Elemento Addons und kaufen Sie das Plugin. Sie können dieses Tutorial ansehen, wenn Sie eine helfende Hand benötigen, um die Elemento -Addons zu erhalten.

Schritt 1) ​​Öffnen Sie Ihr Dashboard und gehen Sie zur Seite des Plugins

Wiederholen Sie dieselben Schritte und erreichen Sie die Seite des Plugins.

Schritt 2) Klicken Sie auf Upload -Plugin

Gehen Sie nach links und klicken Sie auf Upload -Plugin.

Schritt 3) Laden Sie die Elemento -Addons hoch hoch

Klicken Sie jetzt auf Installieren und dann das Plugin aktivieren .

Beide Plugins sind installiert und jetzt können wir weiter fortfahren.

Erstellen Sie die benutzerdefinierte Produktseite von WooCommerce

Schritt 1) ​​Erstellen Sie eine neue Seite

Gehen Sie zum Dashboard und klicken Sie auf Seiten. Klicken Sie dann auf eine neue Seite hinzufügen.

Schritt 2) Klicken Sie auf 'Bearbeiten mit Elementor'

In der oberen Leiste finden Sie die Schaltfläche "mit Elementor" bearbeiten. Klicken Sie darauf.

Danach öffnet sich die Seite mit Elementor. Sie können auf diese Seite zugreifen und die Elementor -Widgets verwenden.

Wir benötigen zwei Fächer, also nehmen wir zuerst einen Behälter mit zwei Seiten.

Auf einer Produktseite ist das erste und eines der wichtigsten Dinge, die wir setzen werden, das Bild. Suchen Sie also das Bild -Widget und legen Sie es in den linken Behälter.

Stellen Sie nun das Bild des Produkts fest.

Jetzt komm zur rechten Seite. Suchen Sie nach der Überschrift und setzen Sie sie in den zweiten Container ein.

Geben Sie den Namen des Produkts in den Titel ein.

Auf die gleiche Weise schreiben wir die Preisgestaltung des Produkts. Um die Preise zu schreiben, fügen Sie ein Texteditor -Widget unter den Titel ein und schreiben Sie dort die Preisgestaltung des Produkts.

Auf den Produktseiten gibt es eine kurze Beschreibung des Produkts. Fügen Sie den Texteditor erneut ein und schreiben Sie eine kurze Beschreibung des Produkts.

Jetzt ist es Zeit, die Karren -Taste hinzuzufügen. Dieses Mal verwenden wir das CART -Widget der Elemento -Addons, da es über mehr Funktionen und Funktionen verfügt.

Suchen Sie nach dem Hinzufügen zum Warenkorb und setzen Sie ihn in den Container ein.

Suchen Sie in den Einstellungen für die Schaltfläche von Karren nach dem Produktnamen und wählen Sie das Produkt im Abschnitt Produkte aus. Wenn der Benutzer danach auf die Schaltfläche CART klickt, wird er direkt zum Karren hinzugefügt.

Wenn Sie die SKU -ID hinzufügen möchten, können Sie dies genauso tun, wie wir ein anderes Widget hinzugefügt haben. Fügen Sie hier den Texteditor ein und schreiben Sie die SKU des Produkts.

Einer der wichtigsten Teile einer Produktseite ist die soziale Aktienschaltflächen. Sie können dieser Seite auch die Schaltfläche "Social Share" hinzufügen.

Suchen Sie nach den sozialen Symbolen und setzen Sie sie auf die Seite.

Wenn Sie weitere Schaltflächen für soziale Griffe hinzufügen möchten, klicken Sie auf Neu hinzufügen und die neue Schaltfläche hinzufügen. Sie können mehrere Änderungen vornehmen, z. B. das Ändern des Symbols und das Bearbeiten des Links und der Farbe.

Auf die gleiche Weise können Sie das andere hier hinzufügen.

Wenn Sie auch eine Hauptbeschreibung geben möchten, fügen Sie auch den Texteditor hinzu und schreiben Sie die Beschreibung.

Ich habe die Hauptbeschreibung außerhalb des Behälters hinzugefügt, der organisiert und systematisch aussieht.

Wenn Benutzer eine Produktseite besuchen, können Sie verwandte Produkte anzeigen, damit sie sie auch überprüfen können.

Fügen Sie also zuerst das zugehörige Produkt hinzu und suchen Sie nach dem Produktschieberegler in Elemento -Addons.

So können Sie die benutzerdefinierte WooCommerce -Produktseite hinzufügen. Jetzt ist es Zeit, die Vorschau der Seite zu sehen.

Ich muss Ihnen sagen, dass auch in wenigen einfachen Schritten eine Produktseite durchgeführt werden kann. Dafür benötigen wir das Elemento Addons Widget.

Mal sehen, wie es gemacht wird.

Verwenden Sie benutzerdefinierte Produktseite

Gehen Sie nach dem Klicken mit Elementor auf die linke Seite, wo Sie die Elementor -Widgets finden.

Scrollen Sie nach unten und erhalten Sie Elemento Addons .

Finden Sie Themenvoraberprodukte, ziehen Sie das Widget und lassen Sie sich auf die Seite fallen.

Wenn Sie das Widget fallen lassen, wird die Anpassungseinstellung in der linken Balken angezeigt. Sie können die Einstellungen und das Aussehen des Addon bearbeiten.

Wenn Sie jedoch das Erscheinungsbild der Site ändern möchten, klicken Sie auf den Stil neben dem Inhalt.

Der Stilabschnitt ermöglicht das Ändern der Farben, der Typografie und anderer Einstellungen des Add-Ons.

Nachdem Sie alle Änderungen vorgenommen und die Seite eingerichtet haben, klicken Sie auf Veröffentlichung.

Nehmen Sie nun Ihre Website vor .

Hier können Sie auf der kundenspezifischen WooCommerce -Produktseite die Produkte mithilfe von Elemento Addons 'Produkt -Widget hinzugefügt.

Die Produkte sind auf der Seite angezeigt. Lassen Sie uns die einzelne Produktseite vorschauen.

Das war's, die benutzerdefinierte WooCommerce -Produktseite ist erstellt.

FAQ

Abschluss

Wir haben also gelernt, wie Sie die benutzerdefinierte WooCommerce -Produktseite mit Elementor hinzufügen. Da wir auch das Elemento Addons -Plugin verwendeten, machte es es super einfach, Produkte hinzuzufügen und sie auf der Seite anzuzeigen.

Die Elemento Addons verfügen über so viele Addons für die Website -Erstellung. Es ist nicht nur für die Widgets, sondern auch für die Funktionen der Widgets bekannt.

Custom WooCommerce -Produktseiten können benötigt werden, um bestimmte Funktionen zu fördern. Normalerweise haben Vorlagen keine solchen Seiten, so dass es notwendig ist, die Seite selbst zu erstellen.

Ich hoffe, dieser Blog wird Ihnen helfen. Wenn Sie jedoch Fragen oder Vorschläge haben, lassen Sie es mich im Kommentarbereich wissen.
Sie können unseren YouTube -Kanal abonnieren, wir laden auch großartige Inhalte hoch und folgen uns auch auf Facebook und Twitter .

Weitere Artikel entdecken

• So ändern Sie in einfachen Schritten die WordPress -Anmelde -URL (benutzerdefinierte URL)
• So erstellen Sie eine benutzerdefinierte 404 -Fehlerseite in WordPress (Easy Guide)
• So fügen Sie WooCommerce eine benutzerdefinierte Suchleiste hinzu, um die Produkterkennung zu erleichtern