Technologische Neuigkeiten, Bewertungen und Tipps!

So passen Sie Ihre WooCommerce-Shop-Seite ganz einfach an

Hinweis: Der folgende Artikel hilft Ihnen weiter: So passen Sie Ihre WooCommerce-Shop-Seite ganz einfach an

Suchen Sie nach einer einfachen Möglichkeit, Ihre WooCommerce-Shop-Seite anzupassen?

WooCommerce betreibt über 29,35 % aller Online-Shops und ist damit eine beliebte E-Commerce-Plattform für WordPress-Websitebesitzer. Allerdings ist es nicht einfach, Ihren WooCommerce-Shop einzigartig zu machen, wenn Sie keine Entwicklungskenntnisse haben.

Klingt das nach dir? Mach dir keine Sorge.

In diesem Artikel erfahren Sie, wie Sie Ihre WooCommerce-Shopseite anpassen, ohne eine einzige Codezeile schreiben zu müssen.

Was ist die WooCommerce-Shop-Seite?

Die WooCommerce-Shopseite ist eine Archivseite, die Ihre Produkte potenziellen Kunden anzeigt. WooCommerce ruft die Details zu Ihren Produkten ab, einschließlich:

Anschließend werden diese Informationen in einem Raster oder einer Liste auf Ihrer Shop-Seite angezeigt.

Warum sollten Sie Ihre WooCommerce-Shop-Seite anpassen?

Stellen Sie sich vor, Sie betreten ein Geschäft und alles, was Sie sehen, sind Reihen über Reihen ungeordneter Waren. Die Chancen stehen gut, dass Sie weggehen, weil es schwierig ist, das zu finden, wonach Sie suchen.

Das Gleiche gilt auch für Online-Shops. Wenn auf Ihrer Shop-Seite eine Produktwand ohne Organisation angezeigt wird, springen Käufer ab und gelangen zur nächsten Website.

Das ist das Problem mit dem standardmäßigen WooCommerce-Shop-Seitenlayout. Es wird nur eine einfache Produktliste angezeigt, was es für Besucher schwierig macht, die gewünschten Waren zu finden.

Glücklicherweise gibt es Möglichkeiten, die WooCommerce-Shop-Seite zu bearbeiten, die Ihrem Shop die folgenden Vorteile bieten können:

  • Heben Sie sich durch ein einzigartiges Design von Ihren Mitbewerbern ab
  • Verbessern Sie das Kundenerlebnis, indem Sie Produkte nach Kategorien organisieren
  • Steigern Sie den Umsatz, indem Sie vorgestellte, verkaufsstarke und meistverkaufte Produkte anzeigen
  • Verbessern Sie Ihre SEO, indem Sie Inhalte hinzufügen, die auf häufig gesuchte Schlüsselwörter abzielen
  • Stärken Sie das Vertrauen, indem Sie Erfahrungsberichte, Sternebewertungen und nutzergenerierte Inhalte (UGC) anzeigen.

Der Schlüssel zur Gestaltung einer WooCommerce-Shop-Seite mit hoher Conversion-Rate liegt in der Erstellung eines benutzerfreundlichen Designs, das den Kauf Ihrer Produkte erleichtert.

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

Es gibt mehrere Möglichkeiten, Ihre Shop-Seite in WordPress anzupassen. Sie können ein WooCommerce-Plugin oder Seitenersteller verwenden oder die Anpassungen von Grund auf programmieren.

Da wir dieses Tutorial so einfach wie möglich halten möchten, konzentrieren wir uns auf zwei der einfachsten Möglichkeiten, WooCommerce-Seiten anzupassen.

Bei der ersten Methode wird ein leistungsstarkes WordPress-Website-Builder-Plugin verwendet, das einfach zu verwenden und mit zahlreichen Anpassungsoptionen ausgestattet ist. Anschließend zeigen wir Ihnen, wie Sie mit dem WooCommerce-Customizer das Layout Ihrer Shop-Seite ändern.

Methode 1: Erstellen Sie eine benutzerdefinierte Shop-Seite mit SeedProd

Für die erste Methode verwenden wir SeedProd, um Anpassungen zu Ihrem Online-Shop hinzuzufügen.

SeedProd ist der beste Website-Builder für WordPress mit über 1 Million Benutzer. Sie können damit benutzerdefinierte WordPress-Themes, Landingpages mit hoher Conversion-Rate und responsive Website-Layouts ohne Code erstellen.

Mit diesem leistungsstarken Plugin können Sie dank der WooCommerce-Integration auch ganze Online-Shops erstellen. Dadurch können Sie mit nur wenigen Klicks Ihre WooCommerce-Shopseite, Produktseiten, Ihren Warenkorb, Ihre Kasse und mehr erstellen und anpassen.

SeedProd enthält über 150 professionelle Themes und Vorlagen zum Erstellen Ihrer Website. Von dort aus können Sie Ihr Design mit benutzerfreundlichen Inhaltsblöcken und Abschnitten anpassen.

Befolgen Sie diese Schritte, um Ihre WooCommerce-Shop-Seite mit SeedProd anzupassen.

Schritt 1. Installieren Sie den SeedProd Website Builder

Der erste Schritt besteht darin, eine Kopie des SeedProd-Website-Builder-Plugins herunterzuladen.

Note: SeedProd bietet eine kostenlose Version zum Erstellen einfacher Landingpages. Für die WooCommerce-Funktionen, die wir benötigen, verwenden wir jedoch den SeedProd Elite-Plan.

Als nächstes müssen Sie SeedProd auf Ihrer WordPress-Website installieren. Sie können diese Anweisungen befolgen für Installation eines WordPress-Plugins Wenn du Hilfe benötigst.

Gehen Sie nach der Installation und Aktivierung von SeedProd zu SeedProd » Einstellungen und geben Sie Ihren Plugin-Lizenzschlüssel ein.

Sie finden Ihren Lizenzschlüssel, indem Sie sich auf der SeedProd-Website anmelden und ihn aus dem Abschnitt „Downloads“ kopieren.

Geben Sie Ihren Lizenzschlüssel ein und klicken Sie auf Schlüssel überprüfen Klicken Sie auf die Schaltfläche, bevor Sie mit dem nächsten Schritt fortfahren.

Schritt 2. Erstellen Sie ein benutzerdefiniertes WooCommerce-Theme

Wir verwenden die Theme-Builder-Funktion von SeedProd, um Ihre WooCommerce-Shop-Seite anzupassen. Es überschreibt Ihr vorhandenes WordPress-Theme und ersetzt es durch Ihre Anpassungen.

Sie können es finden, indem Sie auf gehen SeedProd » Theme Builder aus Ihrem WordPress-Dashboard.

Es gibt zwei Möglichkeiten, Ihr Theme mit SeedProd zu erstellen:

  1. Erstellen Sie jeden Teil (Vorlage) Ihres Themes einzeln
  2. Erstellen Sie alle Ihre Theme-Vorlagen mit einer vorgefertigten WordPress-Theme-Vorlage

Wir verwenden für dieses Tutorial die zweite Option, da dadurch automatisch jeder Teil Ihrer WooCommerce-Website erstellt wird.

Drücke den Themen Klicken Sie oben auf dem Bildschirm auf die Schaltfläche, um die Theme-Vorlagen-Galerie von SeedProd zu starten. Sie können aus vielen Themen wählen, darunter auch Designs für Online-Shops.

Für dieses Tutorial verwenden wir das Thema „Möbelhaus“.

Um das Design zu importieren, bewegen Sie den Mauszeiger über die Miniaturansicht und klicken Sie auf das Häkchensymbol.

Wie Sie im Screenshot unten sehen können, erstellt SeedProd automatisch alle Vorlagen für Ihr Theme, einschließlich:

Sie können jede Vorlage mit dem Drag-and-Drop-Builder von SeedProd anpassen. Wir zeigen Ihnen in Schritt 3, wie Sie die Shop-Seitenvorlage anpassen.

Schritt 3. Passen Sie die WooCommerce-Shop-Seite an

Um Ihre WooCommerce-Shop-Seite mit SeedProd anzupassen, bewegen Sie den Mauszeiger über die Vorlage „Shop-Seite“ und klicken Sie auf Design bearbeiten Verknüpfung.

Nachdem Sie auf den Link geklickt haben, wird Ihre Shop-Seitenvorlage im visuellen Drag-and-Drop-Seitenersteller von SeedProd geöffnet.

Auf der linken Seite befinden sich Blöcke und Abschnitte, die Sie Ihrer Seite hinzufügen können. Rechts sehen Sie eine Vorschau, wie Ihre Seite in Echtzeit aussieht.

Auf Ihrer Shop-Seite wird standardmäßig eine Liste aller Ihrer Produkte angezeigt. Sie können dies jedoch leicht ändern, indem Sie neue Layouts, Inhaltsblöcke und Abschnitte hinzufügen.

Nehmen wir an, Sie möchten ein Scroll-Banner hinzufügen, das auf einen Ausverkauf oder eine Werbeaktion hinweist. In diesem Fall können Sie über das ziehen Bildkarussell Blockieren Sie benutzerdefinierte Bannerbilder und laden Sie sie hoch.

Anschließend können Sie Ihr Karussell in den Blockeinstellungen anpassen, indem Sie es in ein dunkles oder helles Thema ändern, den Schieberegler automatisch abspielen und die Bildunterschriften anzeigen.

Was ist, wenn Sie Ihre vorgestellten Produkte oder meistverkauften Produkte hervorheben möchten? Fügen Sie dazu einen neuen Abschnitt zu Ihrer Seite hinzu, scrollen Sie dann nach unten zum Bereich „WooCommerce-Blöcke“ und ziehen Sie ihn Meistverkaufte Produkte Block auf Ihrer Seite.

In diesem Block werden Ihre meistverkauften Produkte in einem einheitlichen Raster angezeigt.

Sie können diesen neuen Seitenabschnitt stärker hervorheben, indem Sie ihm eine benutzerdefinierte Hintergrundfarbe geben.

Anschließend können Sie im Block „Erweiterte Einstellungen“ im Block „Beste Verkaufsprodukte“ die Farbe und Typografie ändern und die Schaltflächen zum Hinzufügen zum Warenkorb ändern.

Mit dem WooCommerce-Block von SeedProd können Sie Produkte auch nach Kategorien anzeigen. Ziehen Sie dazu über das Produktraster Block, ändern Sie den „Abfragetyp“ in Benutzerdefinierte Abfrage und klicken Sie auf Nach Kategorie auswählen Möglichkeit.

Von dort aus können Sie auswählen, welche Kategorien in das Produktraster aufgenommen werden sollen.

Zu den weiteren Blöcken, die Sie zu Ihrer Shop-Seite hinzufügen können, gehören:

  • Testimonials zur Stärkung von Vertrauen und Glaubwürdigkeit
  • Countdown-Timer, um Ihrem Verkauf Dringlichkeit zu verleihen
  • Akkordeon zur Anzeige häufig gestellter Fragen
  • Facebook oder Twitter wird eingebettet, um benutzergenerierte Inhalte anzuzeigen

Sie können sogar den Titel Ihrer WooCommerce-Shop-Seite ganz einfach ändern.

Wenn Sie mit Ihrer Shop-Seite zufrieden sind, klicken Sie auf das grüne Symbol Speichern Schaltfläche in der oberen rechten Ecke Ihres Bildschirms.

Sie können nun den gleichen Vorgang befolgen, um die anderen Teile Ihres WooCommerce-Shops anzupassen. Klicken Sie einfach in einer Ihrer Theme-Vorlagen auf „Design bearbeiten“ und passen Sie das Layout und den Stil an Ihre Marke an.

Schritt 4. Veröffentlichen Sie Ihre benutzerdefinierte Shop-Seite

Wenn Ihre WooCommerce-Site so aussieht, wie Sie es möchten, ist es an der Zeit, sie live zu schalten. Gehen Sie dazu zu SeedProd » Theme Builder, und drehen Sie in der oberen rechten Ecke den Schalter „SeedProd Theme aktivieren“ auf die Position „Ja“.

Jetzt können Sie eine Vorschau Ihrer WooCommerce-Shopseite live auf Ihrer Website anzeigen.

Methode 2: Passen Sie Ihre Shop-Seite mit dem WooCommerce Customizer an

Wenn Sie eine einfachere Möglichkeit zum Anpassen der WooCommerce-Shopseite benötigen, können Sie dies mit dem integrierten WooCommerce-Customizer tun. Der Customizer verwendet den WordPress-Live-Theme-Customizer, um Ihre Shop-Seite in Echtzeit mit einer Live-Vorschau zu bearbeiten.

Die angezeigten Anpassungsoptionen hängen vom WordPress-Theme ab, das Sie auf Ihrer Website verwenden. Für diesen Leitfaden verwenden wir das Standardthema „Twenty Twenty-Two“.

Um Ihre Shop-Seite mit dem Customizer anzupassen, klicken Sie auf Aussehen » Anpassen aus Ihrem WordPress-Dashboard. Klicken Sie dort auf WooCommerce ” Produktkatalog um die Anpassungsoptionen anzuzeigen.

Klicken Sie anschließend auf das Dropdown-Menü „Anzeige der Shop-Seite“ und wählen Sie ein Layout aus.

Sie können beispielsweise „Kategorien anzeigen“ wählen, um nur Ihre Produktkategorien auf der Shop-Seite anzuzeigen.

Oder Sie können „Produkte anzeigen“ wählen, um nur Produkte anzuzeigen.

Alternativ können Sie mit der Option „Kategorien und Produkte anzeigen“ zuerst Ihre Produktkategorien und dann ein Produktraster anzeigen.

Darüber hinaus können Sie Produkte anzeigen nach:

Sie können auch auswählen, wie viele Produkte pro Zeile und Zeilen auf jeder Seite angezeigt werden sollen.

Denken Sie daran, Ihre Änderungen zu veröffentlichen, wenn Sie mit Ihrem Design zufrieden sind. Hier ist eine Vorschau einer Shop-Seite, die wir mit dem WooCommerce Customizer gestaltet haben.

Das ist es!

Wir hoffen, dass dieser Artikel Ihnen dabei geholfen hat, zu erfahren, wie Sie die WooCommerce-Shop-Seite anpassen können.

Wie Sie sehen, macht es SeedProd ganz einfach, eine einzigartige und benutzerfreundliche WooCommerce-Site zu erstellen, ohne dass dafür vorherige Designerfahrung oder Code erforderlich sind. Es ist so einfach wie Zeigen und Klicken und liefert atemberaubende Ergebnisse, die potenzielle Kunden lieben werden.

Sind Sie bereit, Ihren WooCommerce-Umsatz zu steigern?

Vielleicht gefällt Ihnen auch dieser Leitfaden zum Einrichten des WooCommerce-Conversion-Trackings, wenn Sie hier sind.

Danke fürs Lesen. Bitte folgen Sie uns weiter YouTube, TwitterUnd Facebook für weitere hilfreiche Inhalte zum Wachstum Ihres Unternehmens.