Erstellen und gestalten Sie mit Elementor eine fantastische WooCommerce-Produktseite

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 sie mit dem Elementor-Builder zu gestalten. Ziemlich toll, oder?

Früher waren für die Gestaltung und Anpassung von WooCommerce PHP und CSS für jede noch so kleine Änderung erforderlich. Da Tools wie Elementor jedoch verbessert und komplexer werden, stehen immer mehr Optionen zur Verfügung, mit denen Sie die Kontrolle über das Erscheinungsbild und die Funktionsweise Ihres Shops übernehmen können.

Lass uns anfangen.

• Erstellen einer Elementor-Vorlage
• Erstellen Sie ein Elementor-Produktbild oder eine Galerie
• WooCommerce-Produkttitel, Preis und zum Warenkorb hinzufügen
• Einrichten von Elementor-Produktregisterkarten
• Kurzbeschreibung des Elementor-Produkts
• Upselling von Elementor- und WooCommerce-Produkten
• 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 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.

Erstellen Sie ein Elementor-Produktbild oder eine Galerie

Jedes WooCommerce-Produkt verfügt über ein Produktbild oder eine Bildergalerie, die den Kunden die Fotos des Produkts präsentiert. Elementor bietet ein integriertes Produktbildmodul, mit dem wir diese in unsere Vorlage einfügen können.

Erstellen Sie eine einfache zweispaltige Zeile und geben Sie in der linken Spalte das Modul „Produktbilder“ ein. Das sieht praktisch aus und erfüllt seinen Zweck, aber passen wir das Verkaufsabzeichen so an, dass es zum Elementor Hello Theme passt, das für diesen Artikel verwendet wird. Dazu müssen wir eine kleine Zeile benutzerdefiniertes CSS anwenden, das eingeführt werden kann, indem wir zu „Erweitert“ > „Benutzerdefiniertes CSS“ gehen und den folgenden Code einfügen.

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

WooCommerce- Produkttitel, Preis und zum Warenkorb hinzufügen

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 per Drag & Drop, um sie in der oben angegebenen Reihenfolge anzuordnen. Dies ist voll funktionsfähig, aber wir möchten es an das Design anpassen, wie im obigen Abschnitt „Hallo Elementor-Thema“. Das Stylen von Modulen mit Elementor ist einfach. Sie müssen lediglich auf das Modul klicken und der Editor sollte die Styling-Optionen auf der linken Seite öffnen.

Der Inhalt dieser Module ist ausgezeichnet. Daher werden wir unter der Registerkarte „Stil“ arbeiten. Lassen Sie uns zunächst die Schriftart und die Farbe des Produkttitels aktualisieren, um sie an die im Hello Elementor-Design verwendeten anzupassen.

Anschließend müssen wir das Gleiche 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. Geben Sie also diesen Hex-Code ein, wenn Sie mitlesen – #54595f

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

• Setzen Sie den Inhalt auf „In den Warenkorb“.
• Stellen Sie die Hintergrundfarbe auf „#cc3366“ ein.
• Stellen Sie den Randradius auf 0 ein

Ich habe den Rahmenradius 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 Rezensionen (sofern verfügbar) enthalten. Dies wird üblicherweise über Produktregisterkarten gehandhabt.

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 einige Stile vom Hello Elementor-Theme übernommen werden. Lassen Sie uns jedoch den Stil der Schaltfläche zum Senden einer Bewertung ä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 „Benutzerdefiniertes CSS“. Geben Sie das folgende CSS ein und Sie können die Farben entsprechend Ihrem Design anpassen.

.woocommerce #Review-Formular #Antwort .form-submit input { Hintergrundfarbe: #cc3366; Farbe: #fff; Randradius: 0px; }

Kurzbeschreibung des Elementor-

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 dabei helfen, dies auszufüllen und mehr Kontext hinzuzufügen.

Suchen Sie bitte nach dem WooCommerce-Kurzbeschreibungsmodul und ziehen Sie es per Drag & Drop unter den Produktpreis und über das Modul „In den Warenkorb“.

Hier ist noch kein Styling erforderlich, da die Stile von Hello Elementor übernommen wurden.

Upselling von Elementor- und WooCommerce-

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

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

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

• Stellen Sie die Titelfarbe auf – #cc3366 ein
• Stellen Sie die Überschriftenfarbe auf – #cc3366 ein
• Stellen Sie die Preisfarbe auf – #54595f ein
• Stellen Sie die Hintergrundfarbe der Schaltfläche auf – #cc3366 ein
• Stellen Sie die Schaltflächenfarbe auf – #fff ein
• Stellen Sie den Schaltflächenrandradius auf t0 – 0 ein

Das fertige Produkt sieht wie oben aus. 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 – Elementor - Produktseitenersteller

Einige Benutzer können bei der Verwendung von Elementor Schwierigkeiten haben, ihre benutzerdefinierten Designeinstellungen wie Schriftfarbe und Typografie anzuzeigen. 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, bedenken Sie, dass Ihr Artikel in manchen Fällen Ihre benutzerdefinierten Seiteneinstellungen überschreiben kann.

Sie können auch eine leere Seite auswählen und mithilfe der Produkt-Widgets eine von Grund auf neu 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 an beliebiger Stelle 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 Seitenersteller ist nicht nur einfach zu bedienen, sondern enthält auch alle notwendigen Widgets und Gestaltungsoptionen, um Sie bei der Erstellung benutzerdefinierter Produktseiten zu unterstützen. Wir hoffen, dass Sie dieses Tutorial informativ fanden und Ihnen die Informationen geliefert haben, die Sie zum Anpassen Ihrer WooCommerce-Produkt- und Produktarchivseiten mit Elementor benötigen. Haben Sie in der Vergangenheit Elementor zum Erstellen von WooCommerce-Seiten verwendet? Sie können Ihre Gedanken gerne im Kommentarbereich mitteilen. Wir würden uns freuen, einen Blick darauf zu werfen.