So passen Sie die WooCommerce-Shop-Seite in Elementor an

Verwenden Sie Elementor und möchten Ihren Online-Shop verbessern? In diesem Leitfaden zeigen wir Ihnen, wie Sie Ihre WooCommerce-Shop-Seite in Elementor mithilfe von Blöcken, Widgets und mehr einrichten und anpassen . Wenn Sie ein Online-Geschäft betreiben, ist ein attraktiver, einfach zu bedienender Shop für Ihre Website von entscheidender Bedeutung. Karussells, Abschnitte mit vorgestellten Artikeln, Abschnitte mit empfohlenen Bestsellern und insgesamt eine sehr zugängliche Möglichkeit zum Durchsuchen Ihres Katalogs sind für das Gedeihen Ihres Shops unerlässlich. Deshalb haben wir heute etwas ganz Besonderes für alle Elementor-Benutzer, die Online-Shops haben. In dieser vollständigen Anleitung erfahren Sie Schritt für Schritt, wie Sie Ihre WooCommerce-Shop-Seite in Elementor einrichten und anpassen.

Warum die WooCommerce-Shopseite anpassen?

Eine WooCommerce-Shop-Seite ist einfach eine Post-Archivseite für Ihre Produkte. Mit anderen Worten, es ist die Seite, auf der Sie alle Ihre Shop-Produkte anzeigen. Diese einfache Definition unterstreicht jedoch nicht genug, wie wichtig eine gut angepasste Shop-Seite für Ihre WooCommerce-Website sein kann.

Der erste Eindruck ist sehr wichtig, und für einen WooCommerce-Shop ist die Shop-Seite eine der wichtigsten. Die Art und Weise, wie Sie Ihre Artikel präsentieren, kann einen großen Unterschied in Ihren Conversion-Raten ausmachen. Sie können leicht erkennen, wie viel Aufmerksamkeit ein Unternehmen seiner Website schenkt, indem Sie berücksichtigen, wie klar und gut gestaltet seine Shop-Seite ist. Alles, von gut verwalteten Produktrastern bis hin zu raffinierten Ergänzungen wie Filteroptionen, Kategorienlisten und Einkaufswagen-Schaltflächen, ist entscheidend für das Erscheinungsbild Ihrer WooCommerce-Website.

Darüber hinaus verbringen Ihre Kunden viel Zeit auf Ihrer Shop-Seite und stöbern in Ihren Produkten. Sie müssen also zusätzliche Schritte unternehmen, um sicherzustellen, dass ihr Einkaufserlebnis perfekt ist. Machen Sie es ihnen mit einer übersichtlichen und organisierten Shop-Seite so einfach wie möglich, Ihre Produkte zu kaufen. Darüber hinaus können Sie Ihre Shop-Seite anpassen, um Elemente zur Lead-Generierung hinzuzufügen und Ihre Gewinne zu steigern. Dazu gehören Call-to-Action-Schaltflächen, Abschnitte mit vorgestellten Produkten, Pop-ups für Verkäufe und Angebote und vieles mehr.

Eine angepasste WooCommerce-Shopseite eröffnet Ihnen so viele Möglichkeiten, das Kundenerlebnis zu verbessern und Ihren Umsatz zu steigern. Wir haben zuvor verschiedene Methoden zum Anpassen der Shop-Seite in WooCommerce gesehen. Mit Elementor ist der Prozess jedoch viel einfacher.

Elementor und WooCommerce: Die perfekte Kombination

WooCommerce und Elementor sind zwei der beliebtesten verfügbaren Plugins. Die Flexibilität und die schiere Anzahl der Funktionen, die jeder von ihnen bietet, sind einfach unzählbar. Wenn Sie einen E-Commerce-Shop betreiben, ist WooCommerce das vorletzte Plugin für fast jeden Bedarf, den Sie haben könnten.

Darüber hinaus ist Elementor einer der besten Drag-and-Drop-Website-Builder. Sie können damit fast alle Seiten Ihrer Website entwerfen, anpassen und einrichten. Und wenn das nicht genug ist, können Sie auch Mega-Menüs erstellen und eine große Auswahl an Add-Ons und Vorlagen genießen, die sehr praktisch sind. Mit WooCommerce und Elementor können Sie professionelle Shop- und Business-Seiten mit minimalen Kosten und Aufwand entwerfen und erstellen. Richten Sie Ihre Shop-Layouts, Produktraster und Karussells vollständig ein und genießen Sie mit Hilfe von Elementor eine große Auswahl an schönen Layouts. Darüber hinaus können Sie Ihre Kassenseiten und Warenkorbseiten einrichten und anpassen und sie mit einer Vielzahl von Zahlungsoptionen und -funktionen für einen besseren Kundenkomfort integrieren.

Sie können sogar benutzerdefinierte Seiten und Designs für digitale Waren hinzufügen und benutzerdefinierte Seitenoptionen für Versand-, Zahlungs-, Post- und Vorkaufsseiten und vieles mehr hinzufügen. All dies stellt sicher, dass Ihre Unternehmensseite sowohl professionell als auch kundenfreundlich aussieht. Sie können auch WooCommerce-Funktionen zusätzlich zu benutzerfreundlichen Call-to-Action-Schaltflächen, Parallax-fähigen Schiebereglern und vielem mehr hinzufügen. Die schiere Anzahl an Möglichkeiten ist einfach endlos. Wenn Sie nun überzeugt genug sind, lassen Sie sich von uns durch die Schritte führen, die Sie unternehmen können. Es gibt mehrere Dinge, die Sie tun können. Die Idee ist, dass diese Schritte Ihnen helfen werden, eine einladendere Shop-Seite für Ihren WooCommerce-Shop zu erstellen.

Bevor wir anfangen

Bevor Sie mit dem Prozess beginnen, beachten Sie, dass Sie Elementor Pro verwenden müssen, um eine Archivseite für Ihren WooCommerce-Shop zu erstellen . Möglicherweise können Sie unseren Anweisungen nicht gut folgen, wenn Sie Elementor Free verwenden. Natürlich gibt es eine erhebliche Anzahl von Vorteilen bei der Verwendung von Elementor Pro gegenüber der kostenlosen Version und den meisten anderen Drag-and-Drop-Seitenerstellern da draußen. Elementor Pro enthält erstaunliche Funktionen wie:

• Über 50 Pro-Widgets und über 300 Pro-Seitenvorlagen
• Vollständige Integration mit WooCommerce, einschließlich eines WooCommerce-Builders und dedizierter WooCommerce-Widgets
• Benutzerdefinierte Popup-Builder für eine bessere Lead-Generierung für Ihre Website
• Mehr als 10 vollständige Website-Demos/Vorlagen zur Verwendung
• Und viele andere

Wenn Sie erwägen, Elementor Pro zu kaufen, empfehlen wir Ihnen dringend, dies zu tun. Die Elementor-Preise beginnen bei 49 USD pro Jahr für eine einzelne Site.

So passen Sie die WooCommerce-Shopseite in Elementor an

Beginnen wir nun mit unserem Tutorial. Wir gehen davon aus, dass Sie Elementor und Ihre WooCommerce-Plugins installiert und eingerichtet haben. Es gibt unzählige Seiten und Inhalte von Shopseiten, die Sie mit Elementor und WooCommerce verwalten können. Beginnen wir jedoch damit, Ihre benutzerdefinierte WooCommerce-Shop-Seite in Elementor zu erstellen. Dazu müssen Sie mit Elementor ein Produktarchiv erstellen. Gehen Sie also in Ihrem WordPress-Admin-Dashboard zu Vorlagen > Gespeicherte Vorlagen . Klicken Sie dann oben links auf Neu hinzufügen . Wählen Sie dann den Elementtyp als Produktarchiv und benennen Sie Ihre Vorlage. Sobald Sie auf Vorlage erstellen klicken , gelangen Sie zur Elementor-Seite, um Ihre Archivseite anzupassen.

Anpassen Ihrer Vorlage und Aktivieren von Elementor-Blöcken und -Vorlagen

Sobald Sie die Elementor-Seite öffnen, haben Sie automatisch die Möglichkeit, einen vollständig eingerichteten Archivblock für Ihre Shop-Seite einzufügen, anstatt bei Null anfangen zu müssen. Um dies zu öffnen, wann immer Sie möchten, können Sie einfach auf das Ordnersymbol im Abschnitt „ Widget hierher ziehen “ klicken und auf die Registerkarte „ Blöcke “ klicken. Sie können auch die Filteroption verwenden, um bestimmte Blöcke für bestimmte Seiten auszuwählen. Klicken Sie danach auf einen der Blöcke, der Ihren Anforderungen entspricht, und drücken Sie dann die Schaltfläche Einfügen . Auf diese Weise sparen Sie viel Zeit und beginnen mit einer von Elementor gestalteten Demoseite, mit der Sie Ihre Shopseite viel schneller einrichten können. Klicken Sie dazu im Abschnitt Widget hierher ziehen auf das Ordnersymbol und drücken Sie Seiten . Wählen Sie dann eines der Seitendesigns aus, das Ihnen gefällt. Alternativ können Sie die Suchleiste verwenden, um Seitendesigns für die Art von Shop-Seite zu finden, die Sie möchten. Nachdem Sie Ihr Design ausgewählt haben, klicken Sie auf Einfügen , um die Seite in Ihre Archivvorlage zu importieren. Hier erfahren Sie mehr über vorgefertigte Blöcke und Seitenvorlagen und alles, was Sie damit machen können. Sehen wir uns nun an, wie Sie mit Elementor einen Block anpassen und zusätzliche Elemente zur WooCommerce-Shop-Seite hinzufügen .

Passen Sie die WooCommerce-Shop-Seite in Elementor an

Um die Shop-Seite anzupassen, können Sie einige Widgets hinzufügen und sie so bearbeiten, dass sie dem Erscheinungsbild Ihrer Website entsprechen. Beginnen wir also damit, Ihrem Shop einige wichtige Widgets hinzuzufügen. Nachdem Sie Ihren Basisblock hinzugefügt haben, fügen wir einige nützliche Widgets wie den Menüwagen und WooCommerce-Breadcrumbs hinzu. Es gibt viele andere Widgets, die Sie mit Elementor zu Ihrer Shop-Seite hinzufügen, und Sie sollten herumspielen und die besten für Sie finden.

Widget-Bereich hinzufügen

Lassen Sie uns fortfahren und einen Widget-Abschnitt hinzufügen, indem Sie auf die Schaltfläche Abschnitt hinzufügen (blaue Plus-Schaltfläche) klicken. Dies öffnet einen neuen Widget-Bereich. Klicken Sie als Nächstes auf die Plus-Schaltfläche mit der Bezeichnung „Neu hinzufügen“ unter dem Widget-Bereich und wählen Sie die Struktur aus . Da wir nur WooCommerce Breadcrumbs und eine Menü-Warenkorb-Schaltfläche hinzufügen werden, wählen wir die 2×1-Struktur. Dadurch wird ein einfacher 2 × 1-Rasterabschnitt hinzugefügt, in dem Sie Ihre Widgets an der angegebenen Stelle hinzufügen können. Verwenden Sie danach die Seitenleiste und wechseln Sie zur Elementliste, indem Sie auf das Rastersymbol oben rechts in der Seitenleiste klicken. Ziehen Sie dann die gewünschten Widgets in den Widgetbereich. Für diese Demo werden wir den Menüwagen und die WooCommerce Breadcrumbs-Widgets einbeziehen. Verwenden Sie also die Suchleiste, um schnell die richtigen Widgets zu finden, und ziehen Sie sie in den Widget-Bereich. Lassen Sie uns zuerst das Menüwagen-Widget ziehen. Klicken Sie dann auf das Menüwagen-Widget und passen Sie die Optionen in der linken Seitenleiste an. Ändern wir beispielsweise das Symbol und die Ausrichtung nach rechts mithilfe der Seitenleiste. Lassen Sie uns nun dasselbe tun, um das WooCommerce Breadcrumbs-Widget hinzuzufügen. Klicken wir also auf das Widgets-Symbol in der linken Seitenleiste und suchen Sie nach den WooCommerce Breadcrumbs . Ziehen Sie es dann auf den Widget-Bereich und passen Sie es an. Beispielsweise ändern wir die Textfarbe, die Linkfarbe, die Typografie und die Ausrichtung. Denken Sie nach Abschluss der Anpassungen daran, Ihre neu gestaltete Vorlage zu speichern, indem Sie unten links neben der Schaltfläche „Veröffentlichen“ auf die Schaltfläche „ Optionen speichern “ klicken. Wählen Sie dann Als Vorlage speichern und geben Sie Ihrer Vorlage einen geeigneten Namen. Jetzt ist Ihre Vorlage jederzeit im Abschnitt „ Gespeicherte Vorlagen “ Ihres WP-Admin-Dashboards verfügbar.

Richten Sie Ihre benutzerdefinierte Vorlage als WooCommerce-Shop-Seite ein

Wir können jetzt schnell ähnliche Schritte ausführen, um zusätzliche Abschnitte hinzuzufügen, die Ihre Shop-Seite verwenden könnte. Möchten Sie ein Video zeigen, um Ihre Produkte zu demonstrieren? Wie wäre es mit einem kurzen Textabschnitt für zusätzliche Informationen? Oder fügen Sie vielleicht ein Karussell-Setup mit Ihren Produkten oder Referenzen über Ihr Unternehmen hinzu? Unabhängig von der gewählten Option können Sie sie auf ähnliche Weise aktivieren. Es ist alles so bequem, den Drag-and-Drop-Seitenersteller von Elementor zu verwenden, der WooCommerce perfekt ergänzt.

Passen Sie die Vorlage noch weiter an

Schauen wir uns nun an, wie Sie Ihre Shop-Seite mit Elementor noch weiter anpassen können. Angenommen, Sie möchten ein Video hinzufügen. Verwenden Sie einfach die Suchleiste und ziehen Sie die Videooption per Drag & Drop auf die Shop-Seite. Dann können Sie die Video-URL ändern, die automatische Wiedergabe aktivieren, Schleifen aktivieren, sie stummschalten und so weiter. Wenn Sie fertig sind, denken Sie daran, unten in der linken Seitenleiste auf die Schaltfläche „ Veröffentlichen “ zu klicken. Hier müssen Sie entscheiden, wo Sie Ihre Vorlage anzeigen möchten. Klicken Sie auf die Schaltfläche Bedingung hinzufügen, und Sie müssen auswählen, wo Sie die Vorlage verwenden möchten. Sie können Ihre Vorlage auf der gesamten Website oder an bestimmten Orten wie Suchergebnissen, Shop-Seiten und sogar Kategorieseiten anzeigen. Da wir unsere Vorlage vorerst nur auf der WooCommerce-Shop-Seite anzeigen, wählen wir die Bedingung, um die Vorlage nur auf der Shop-Seite anzuzeigen. Wir haben die Vorlage für die Shop-Seite erstellt, verwenden Sie also die Dropdown-Liste und wählen Sie die Shop-Seite aus. Klicken Sie dann auf Speichern und schließen , und Ihre neu erstellte Vorlage wird als Ihre WooCommerce-Shop-Seite eingerichtet. Das ist es! Sie haben gerade Ihre WooCommerce-Shopseite mit Elementor angepasst . Die Seite ist live und einsatzbereit! Natürlich ist dies nicht alles, was Sie tun können, um Ihre WooCommerce-Website zu bearbeiten. Sie können auch die WooCommerce-Checkout-Seite, die Produktseite, die Warenkorbseite und vieles mehr mit Elementor anpassen.

Fazit

Alles in allem kann die Anpassung Ihrer WooCommerce-Shopseite mit Elementor einen großen Einfluss auf Ihren Shop haben. Die Art und Weise, wie Sie Ihre Produkte organisieren und Ihren Käufern präsentieren, kann Ihnen helfen, einen Verkauf zu tätigen oder sie abzulehnen. In dieser Anleitung haben wir Ihnen gezeigt, wie Sie Ihre WooCommerce-Shop-Seite in Elementor einrichten und anpassen. Bedenken Sie jedoch, dass dies nur die Spitze des Eisbergs ist. Dies ist eine grundlegende Demonstration, die Ihnen zeigt, was Sie mit Elementor tun können, um die perfekte Shop-Seite für Ihr Geschäft zu erstellen. Wir empfehlen Ihnen, dies als Basis zu verwenden und damit herumzuspielen, um das Beste aus diesem hervorragenden Seitenersteller herauszuholen. Du kannst beispielsweise folgende Dinge ausprobieren, um deine WooCommerce-Shopseite noch besser zu machen:

• Fügen Sie Up-Selling-Widgets und zusätzliche Marketing-Widgets hinzu
• Aktivieren Sie Pop-ups, Werbung und vorgestellte Karussells, um die Konversionsraten zu steigern
• Richten Sie weitläufige Mega-Menüs ein, um die Navigation für Ihre Website erheblich zu vereinfachen. Dazu gehört das direkte Hinzufügen von Produktartikeln und zusätzlichen Shop-Menüs
• Passen Sie Ihre WooCommerce-Warenkorbseiten und Ihre Checkout-Seiten an und optimieren Sie sie

Und dies ist nur eine kleine Liste. Sie können auch eine ganzseitige Vorlage verwenden und diese noch weiter bearbeiten, um sie an Ihre Bedürfnisse anzupassen und einige der einzigartigsten Shop-Designs zu aktivieren, die es gibt. Weitere Anleitungen, wie Sie WooCommerce und Elementor optimal nutzen können, finden Sie in einigen der folgenden Anleitungen:

• Die besten Elementor Mega Menu Plugins für WordPress
• Passen Sie die Shop-Seite in WooCommerce an

Haben Sie Fragen zu diesem Tutorial? Lassen Sie es uns im Kommentarbereich unten wissen!