Erfahren Sie, wie Sie Ihre WooCommerce-Produktseitenvorlagen mithilfe von Elementor visuell anpassen können.
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 hace que Sein mucho más fácil arrastrar y soltar visualmente diferentes elementos de las páginas de un solo producto, personalizando el diseño como desee.
In der Vergangenheit umfassten diese Arten von WooCommerce-Design-Tutorials Dutzende von Codezeilen.
Glücklicherweise sind diese Tage dank vorbei Elementor WooCommerce Builder.
Ahora, obtiene el control total sobre su diseño y el diseño de la página del producto con el poder de Elementor Pro. No es necesario incorporar acciones o ganchos, ni profundizar en los distintos archivos PHP. Cada personalización de diseño se realiza en la interfaz, directamente desde el constructor de Elementorpage.
WooCommerce-Produktvorlage
Die WooCommerce-Basisproduktseite sieht folgendermaßen aus:
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:
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
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
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.
Antes de comenzar a agregar Widgets, puede asegurarse de que está trabajando en una página de producto de ancho completo, cambiando a una plantilla de ancho completo (aprenda cómo hacerlo aquí).
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
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
- Widget Woo Semmelbrösel
- 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.
Puede utilizar cualquier otro widget para hacer que la página de su producto sea más eficaz y atractiva. Compartir botones, widgets de llamada a la acción, imagen destacada, menús desplegables … Incluso se pueden agregar campos personalizados a la plantilla utilizando la función de Inhalt dinámico.
Schritt 4: Zeigen Sie eine Vorschau der Produktseite mit einem anderen Produkt an
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
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
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.
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.
