Erstellen und gestalten Sie eine erstaunliche WooCommerce-Produktseite mit Elementor

Sie müssen Ihre Produktseite ändern, um Ihren E-Commerce-Shop von der Konkurrenz abzuheben und Ihren Kunden ein einzigartiges Erlebnis zu bieten. Darüber hinaus ist die Möglichkeit, Ihre Produktseite ästhetisch zu personalisieren, entscheidend für die Aufrechterhaltung eines einheitlichen visuellen Designs in Ihrem gesamten Online-Shop.

Elementor ist einer der führenden WordPress-Website-Builder auf dem Markt, aber wussten Sie auch, dass Sie damit WooCommerce-Shops erstellen können?

Viele integrierte Elementor WooCommerce-Module ermöglichen es Ihnen, WooCommerce-Inhalte oder Funktionsblöcke einzufügen oder mit dem Elementor-Builder zu gestalten. Ziemlich toll, oder?

Das Styling und Anpassen von WooCommerce erforderte früher PHP und CSS für jede winzige Änderung, aber da Tools wie Elementor verbessert und komplexer werden, stehen immer mehr Optionen zur Verfügung, um die Kontrolle über das Aussehen und die Funktionsweise Ihres Shops zu übernehmen.

Lass uns anfangen.

• Erstellen einer Elementor-Vorlage
• Building Elementor Produktbild oder Galerie
• WooCommerce-Produkttitel, Preis und in den Warenkorb legen
• Einrichten von Elementor-Produktregisterkarten
• Kurzbeschreibung des Elementor-Produkts
• Elementor- und WooCommerce-Produkt-Upsells
• Fazit – Elementor Produktseitenersteller

Erstellen einer Elementor-Vorlage

Der erste Schritt des Verfahrens besteht darin, eine neue Elementor-Vorlage zu erstellen, indem Sie im WordPress-Dashboard zu Vorlagen navigieren. Klicken Sie auf „Neu erstellen“ und wählen Sie dann Einzelprodukt als Vorlage aus, die Sie erstellen möchten.

Da wir diese Vorlage von Grund auf neu entwickeln, müssen keine Blöcke eingefügt werden. verlassen Sie das nächste Feld, bis Sie den üblichen Elementor-Builder-Bildschirm für eine neue Seite erreichen.

Building Elementor Produktbild oder Galerie

Jedes WooCommerce-Produkt hat ein Produktbild oder eine Bildergalerie, die den Kunden die Fotos des Produkts zeigt. Elementor bietet ein integriertes Modul für Produktbilder, mit dem wir dies in unsere Vorlage einfügen können.

Erstellen Sie eine einfache zweispaltige Zeile und geben Sie das Modul Produktbilder in die linke Spalte ein; Dies sieht praktisch aus und erfüllt die Aufgabe, aber lassen Sie uns das Verkaufsabzeichen so anpassen, dass es dem für diesen Artikel verwendeten Elementor Hello Theme entspricht. Dazu müssen wir eine kleine Zeile mit benutzerdefiniertem CSS anwenden, die eingeführt werden kann, indem Sie zu Erweitert> Benutzerdefiniertes CSS gehen und den folgenden Code einfügen.

Selektor .onsale { \sbackground-color: #cc3366 ; \S}

WooCommerce- Produkttitel, Preis und In den Warenkorb

Wir werden die Elementor-Module für Produkttitel, Produktpreis und In den Warenkorb in der rechten Spalte hinzufügen .

Suchen Sie im Elementor-Konstruktor nach diesen drei Modulen und ziehen Sie sie dann per Drag & Drop, um sie in der oben angegebenen Reihenfolge anzuordnen; Dies ist voll funktionsfähig, aber wir möchten es an das Styling wie im obigen Abschnitt Hello Elementor-Theme anpassen. Das Styling von Modulen mit Elementor ist einfach, Sie müssen nur auf das Modul klicken und der Editor sollte die Styling-Optionen auf der linken Seite öffnen.

Der Inhalt dieser Module ist hervorragend. Daher werden wir unter der Registerkarte Stil arbeiten. Lassen Sie uns zunächst die Schriftart und Farbe des Produkttitels aktualisieren, damit sie mit denen übereinstimmen, die im Hello Elementor-Design verwendet werden.

Dasselbe müssen wir dann für die Module Produktpreis und In den Warenkorb tun, indem wir auf jedes Modul klicken und die Textfarbe ändern. Für den Produktpreis verwende ich ein dunkles Grau als Kontrast zur Überschrift, also geben Sie diesen Hex-Code ein, wenn Sie folgen – #54595f

Als nächstes werden wir im Modul In den Warenkorb einige Dinge aktualisieren. Die Hintergrundfarbe der Schaltfläche und der Umrandungsradius der Schaltfläche mit den folgenden Einstellungen:

• Setzen Sie den Inhalt auf "In den Warenkorb".
• Setzen Sie die Hintergrundfarbe auf '#cc3366'
• Setzen Sie den Randradius auf 0

Ich habe den Randradius der Mengenauswahl auf 0 geändert, was Sie auf der Registerkarte Stil für Menge tun können.

Einrichten von Elementor-Produktregisterkarten

Jedes Produkt muss einige grundlegende Informationen wie eine Produktbeschreibung und Bewertungen anzeigen, falls verfügbar; Dies wird normalerweise über Produktregisterkarten abgewickelt.

Bitte erstellen Sie eine neue Zeile unter dem oberen Abschnitt und ziehen Sie das Modul Produktdaten-Registerkarten aus dem Elementor-Builder in die Zeile, um es einzufügen. Hier ist nicht viel Styling erforderlich, da es einige Stile vom Hello Elementor-Theme erbt. Lassen Sie uns jedoch den Stil der Schaltfläche zum Senden der Überprüfung ändern.

Dazu benötigen wir wieder ein wenig benutzerdefiniertes CSS. Beginnen Sie mit der Bearbeitung der Produktdaten-Registerkarten, klicken Sie dann auf die Registerkarte Erweitert und scrollen Sie nach unten zu Custom CSS. Geben Sie das unten stehende CSS ein und Sie können die Farben an Ihr Design anpassen.

.woocommerce #review form #reply .form-submit input { background-color: #cc3366; Farbe: #fff; Randradius: 0px; }

Elementor Produktkurzbeschreibung

Okay, wir haben bisher ein anständiges, einfach aussehendes Design, aber es sieht etwas spärlich aus. Das Hinzufügen eines Produktkurzbeschreibungsmoduls zum oberen Teil kann helfen, dies auszufüllen und mehr Kontext hinzuzufügen.

Bitte suchen Sie nach dem WooCommerce Short Description-Modul und ziehen Sie es dann per Drag & Drop unter den Produktpreis und über das Add To Cart-Modul.

Hier ist noch kein Styling erforderlich, da es die Stile von Hello Elementor geerbt hat.

Elementor- und WooCommerce- Produkt-Upsells

Die Erhöhung Ihres durchschnittlichen Warenkorbwerts ist für jede WooCommerce-Site von entscheidender Bedeutung. Daher ist es schön, dass Elementor ein Produkt-Upsells-Modul enthält, mit dem Sie problemlos Anpassungen in Ihren Shop integrieren können.

Bitte suchen Sie im Elementor-Builder nach dem Produkt-Upsells-Modul und fügen Sie es in eine neue Zeile hinter den Produktdaten-Registerkarten ein.

Wie Sie sehen, erfordert dies ein wenig Anpassung, um den Rest unseres Stils zu ergänzen. Beginnen Sie mit der Modifikation des Moduls und nehmen Sie die folgenden Änderungen vor:

• Setzen Sie die Titelfarbe auf – #cc3366
• Setzen Sie die Überschriftsfarbe auf – #cc3366
• Setzen Sie die Preisfarbe auf – #54595f
• Setzen Sie die Hintergrundfarbe der Schaltfläche auf – #cc3366
• Setzen Sie die Schaltflächenfarbe auf – #fff
• Legen Sie den Radius der Schaltflächengrenze auf t0 – 0 . fest

Das fertige Produkt wird wie oben aussehen. Sie können den Farb-Hex-Code nach Belieben anpassen, wenn Sie diese Anleitung als Ausgangspunkt für Ihre Vorlage verwenden.

Sobald Sie fertig sind, veröffentlichen Sie Ihre Vorlage. Im nächsten Fenster sehen Sie die Frage „Wo möchten Sie Ihre Vorlage anzeigen?“. Klicken Sie auf „Bedingung hinzufügen“, um festzulegen, wann diese Vorlage verwendet werden soll. Sie können „Alle Produkte“ auswählen, um die Vorlage auf allen Ihren Produktseiten zu verwenden. Sie können diese Vorlage auch nur für Produkte verwenden, die in eine bestimmte Kategorie fallen oder denen ein bestimmtes Tag zugeordnet ist.

Fazit Produktseitenersteller von Elementor

Einige Benutzer können Schwierigkeiten haben, ihre benutzerdefinierten Designeinstellungen wie Schriftfarbe und Typografie anzuzeigen, wenn sie Elementor verwenden. Das Erscheinungsbild Ihres WooCommerce-Shops kann beeinträchtigt werden, wenn Sie ein WordPress-Theme verwenden, das das Erscheinungsbild Ihres Shops steuern kann. Wenn dieses Problem auftritt, denken Sie daran, dass Ihr Artikel in einigen Fällen Ihre benutzerdefinierten Seiteneinstellungen überschreiben kann.

Sie können auch eine leere Seite auswählen und mithilfe der Produkt-Widgets von Grund auf eine erstellen, um ein vollständig individuelles Erscheinungsbild zu erzielen. Verwenden Sie eine leere Seite, schließen Sie das Popup-Fenster der Vorlagenbibliothek, wenn es angezeigt wird, und beginnen Sie mit dem Aufbau auf der neu erstellten Seite. Die benutzerdefinierte Schaltfläche "In den Warenkorb", "Produktpreis", "Produktbild" und "Produkttitel und -beschreibung" sind nur einige der WooCommerce-Widgets, mit denen Sie Ihre Produktseite anpassen können. Auf dieser Seite können Sie sich alle derzeit verfügbaren Widgets ansehen. Wenn Sie möchten, können Sie die Widgets beliebig im Seitenlayout anordnen und ihre Stile an Ihr gewünschtes Erscheinungsbild anpassen.

Sie müssen Ihre Produktseite ändern, um Ihren E-Commerce-Shop von der Konkurrenz abzuheben und Ihren Kunden ein einzigartiges Erlebnis zu bieten. Darüber hinaus ist die Möglichkeit, Ihre Produktseite ästhetisch zu personalisieren, entscheidend für die Aufrechterhaltung eines einheitlichen visuellen Designs in Ihrem gesamten Online-Shop. Elementor ist ein fantastisches Tool zum Anpassen der Seiten Ihres WooCommerce-Shops und wird dringend empfohlen. Der Page Builder ist nicht nur einfach zu bedienen, sondern enthält auch alle notwendigen Widgets und Styling-Optionen, um Sie bei der Erstellung benutzerdefinierter Produktseiten zu unterstützen. Wir hoffen, dass Sie dieses Tutorial informativ fanden und Ihnen die Informationen zur Verfügung gestellt haben, die Sie benötigen, um Ihr WooCommerce-Produkt und Ihre Produktarchivseiten mit Elementor anzupassen. Haben Sie in der Vergangenheit Elementor verwendet, um WooCommerce-Seiten zu erstellen? Gerne können Sie Ihre Gedanken im Kommentarbereich mitteilen. Wir schauen gerne rein.