Kurz gesagt: So passen Sie Ihre WooCommerce-Shopseite an
Ihre WooCommerce-Shopseite ist ein Produktarchiv, das aus einer Vorlagendatei erstellt wird. Sie können sie daher nicht wie eine normale Seite bearbeiten. Diese Methoden funktionieren stattdessen.
- Was es ist – Die Hauptproduktliste Ihres Shops, generiert aus der Template-Datei archive-product.php von WooCommerce
- Methode 1: SeedProd – Drag-and-Drop-Builder mit WooCommerce-Blöcken und voller Designkontrolle, kein Code
- Methode 2: WordPress-Editor – Der Website-Editor bei Block-Themes, WooCommerce Customizer bei klassischen Themes
- Shopseitentitel – Benennen Sie ihn um, ändern Sie seinen SEO-Titel mit AIOSEO, gestalten Sie ihn neu oder blenden Sie ihn aus
- Kategorieseiten – Alle stammen aus einer einzigen Vorlage für Produktarchive, die Sie einmal anpassen
- Produktgalerie – Fügen Sie Galeriebilder im Produkteditor hinzu und zeigen Sie sie dann mit dem Block „Produktgaleriebilder“ von SeedProd an
Der erste WooCommerce-Shop, den ich für einen Kunden eingerichtet habe, hatte eine Shop-Seite, die schlicht wirkte und überhaupt nicht zu ihrer Marke passte.
Wenn Sie sich in der gleichen Situation befinden, machen Sie sich keine Sorgen. WooCommerce ist die beliebteste Methode, um E-Commerce zu WordPress hinzuzufügen, und Sie können Ihre WooCommerce-Shop-Seite anpassen, ohne eine einzige Zeile Code zu schreiben.
Ich zeige Ihnen, wie Sie die gesamte Seite mit einem Drag-and-Drop-Builder oder dem integrierten WordPress-Editor neu gestalten. Danach befassen wir uns mit dem Shopseitentitel, Ihren Produktkategorieseiten und Produktgalerien.
Was ist die WooCommerce-Shopseite?
Die WooCommerce-Shopseite ist die Standard-Produktarchivseite, die alle Produkte Ihres Shops anzeigt. Wenn Sie WooCommerce installieren, erstellt es automatisch diese Seite mit den Layout-Einstellungen Ihres Themes.
Betrachten Sie sie als den Hauptkatalog oder das Schaufenster Ihres Geschäfts. Dort stöbern Kunden normalerweise, bevor sie zu einzelnen Produktseiten weiterklicken.
Standardmäßig zieht die Shopseite Inhalte aus Ihren Produktlisten und zeigt an:
- Produktbilder
- Titel und kurze Beschreibungen
- Preise
- Produktkategorien und -tags
- Sternebewertungen und Rezensionen (falls aktiviert)
WordPress generiert sie dynamisch aus Ihrem Theme und den Vorlagendateien von WooCommerce.
Eine gut gestaltete Shopseite hilft Besuchern, schnell zu finden, wonach sie suchen, reduziert Reibungsverluste im Kaufprozess und steigert den Umsatz.
Das direkte Bearbeiten der WooCommerce-Shopseite im WordPress-Editor funktioniert nicht wie erwartet. Die Shopseite wird aus einer Template-Datei namens archive-product.php generiert, die WooCommerce verwendet, um Ihr Produktarchiv dynamisch mithilfe von PHP-Hooks und Shortcodes anzuzeigen.
Deshalb gibt Ihnen das Klicken auf „Seite bearbeiten“ auf der Shop-Seite keine Kontrolle über die WooCommerce-Shop-Seiten-Vorlage oder das Produkt-Raster. Um es anzupassen, benötigen Sie ein Plugin wie SeedProd, das die Vorlage durch Ihr eigenes Design ersetzt, oder die integrierten Optionen von WooCommerce Customizer oder Site Editor.
Warum sollten Sie die WooCommerce-Shop-Seite anpassen?
Stellen Sie sich vor, Sie betreten ein physisches Geschäft, in dem alle Produkte zufällig auf Regalen verstreut sind, ohne Schilder, Kategorien oder hervorgehobene Artikel. Sie würden wahrscheinlich schnell wieder gehen.
Genau das erleben viele Käufer, wenn sie auf einer Standard-WooCommerce-Shop-Seite landen. Ein einfaches Produkt-Raster ohne Kontext oder Richtung führt zu hohen Absprungraten und verpassten Verkaufschancen.
Die Anpassung Ihrer Shop-Seite hilft Ihnen dabei:
- Verbessern Sie die Benutzererfahrung (UX), indem Sie es den Kunden erleichtern, das zu finden, was sie wollen
- Steigern Sie die Konversionen, indem Sie Bestseller, Sonderangebote oder Produkte mit hoher Marge hervorheben
- Verbessern Sie die SEO, indem Sie inhaltsreiche Schlüsselwörter und Schema-Markup hinzufügen
- Senken Sie die Absprungraten, indem Sie eine bessere Navigation und visuelle Hierarchie bieten
- Bauen Sie Markenvertrauen auf mit Testimonials, Bewertungen oder nutzergenerierten Inhalten
Ein gut optimiertes WooCommerce-Shop-Design ist ein entscheidender Teil der Umwandlung von Besuchern in Käufer. Wenn Sie Ihren Shop noch von Grund auf neu aufbauen, ist dieser Leitfaden zum Einrichten eines Online-Shops in WordPress ein guter Ausgangspunkt.
So passen Sie die WooCommerce-Shop-Seite in WordPress an
Es gibt mehrere Möglichkeiten, Ihre WooCommerce-Shop-Seite in WordPress anzupassen. Hier ist ein kurzer Überblick über Ihre Optionen, bevor wir ins Detail gehen.
| Methode | Am besten für | Code erforderlich? |
|---|---|---|
| SeedProd | Volle Designkontrolle, benutzerdefinierte Layouts, Banner, hervorgehobene Bereiche, markenkonformer WooCommerce-Shop | Nein |
| WordPress-Editor (Site-Editor / Customizer) | Schnelle Layoutänderungen, Produkt-Sortierreihenfolge, Spalten, kein zusätzliches Plugin erforderlich | Nein |
| AIOSEO | Ändern des SEO-Titels der Shop-Seite, der in den Suchergebnissen angezeigt wird | Nein |
| Benutzerdefinierter Code | Erweiterte Modifikationen, die über die Möglichkeiten der Tools hinausgehen | Ja (Entwickler empfohlen) |
- Methode 1: SeedProd zur Anpassung der WooCommerce-Shop-Seite verwenden
- Methode 2: WooCommerce-Shop-Seite mit dem WordPress-Editor anpassen
- So ändern Sie den Titel der Shop-Seite in WooCommerce
- So ändern Sie die Standard-Shop-Seite in WooCommerce
- So passen Sie Produktkategorie-Seiten in WooCommerce an
- So fügen Sie eine Produktbildergalerie in WooCommerce hinzu
- FAQ: Anpassung der WooCommerce-Shop-Seite
Methode 1: SeedProd zur Anpassung der WooCommerce-Shop-Seite verwenden
Für die erste Methode verwende ich SeedProd, um einen komplett benutzerdefinierten WooCommerce-Shop zu erstellen.
SeedProd ist der beste Drag-and-Drop-Website-Builder für WordPress mit über 1 Million Nutzern. Er ermöglicht es Ihnen, benutzerdefinierte WordPress-Themes, hochkonvertierende Landingpages und responsive Website-Layouts ohne Code zu erstellen.
Als ich die Seitengeschwindigkeit mit GTmetrix gemessen habe, lud SeedProd in 556 ms im Vergleich zu Elementors 1.882 ms, mit der Hälfte der HTTP-Anfragen. Das macht es zu einer starken Wahl für jeden benutzerdefinierten WooCommerce-Shop, bei dem die Seitengeschwindigkeit wichtig ist.
Dieses Plugin ermöglicht Ihnen auch die Erstellung ganzer Online-Shops mit seiner WooCommerce-Integration. Sie können Ihre Shop-Seite, Produktseiten, den Warenkorb, die Kasse und mehr mit wenigen Klicks anpassen.
SeedProd bietet über 300 professionelle Themes und Vorlagen. Von dort aus können Sie das Design Ihres WooCommerce-Shops mit einfach zu bedienenden Inhaltsblöcken und Abschnitten anpassen.
Befolgen Sie diese Schritte, um Ihre WooCommerce-Shop-Seite mit SeedProd anzupassen.
Schritt 1. SeedProd Website Builder installieren
Der erste Schritt ist der Download einer Kopie des SeedProd Website Builder Plugins.
Grenzwert der kostenlosen Version: Die kostenlose Version von SeedProd erstellt einfache Landingpages. Die WooCommerce-Blöcke in diesem Tutorial sind Teil des SeedProd Elite-Plans.
Als Nächstes müssen Sie SeedProd auf Ihrer WordPress-Website installieren. Wenn Sie Hilfe benötigen, können Sie diese Anweisungen zum Installieren eines WordPress-Plugins befolgen.
Nachdem Sie SeedProd installiert und aktiviert haben, gehen Sie 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 die Schaltfläche Schlüssel überprüfen, bevor Sie mit dem nächsten Schritt fortfahren.
Schritt 2. Erstellen eines benutzerdefinierten WooCommerce-Themes
SeedProd's Theme Builder passt Ihre WooCommerce-Shopseite an. Er überschreibt Ihr bestehendes WordPress-Theme und ersetzt es durch Ihr eigenes Design.
Sie finden es, indem Sie von Ihrem WordPress-Dashboard zu SeedProd » Theme Builder navigieren.
Es gibt 2 Möglichkeiten, Ihr E-Commerce-Theme mit SeedProd zu erstellen:
- Erstellen Sie jeden Teil (Vorlage) Ihres Themes einzeln
- Erstellen Sie alle Ihre Theme-Vorlagen mit einer vorgefertigten WordPress-Theme-Vorlage
Wir verwenden die 2. Option für dieses Tutorial, da sie automatisch jeden Teil Ihrer WooCommerce-Website erstellt.
Klicken Sie auf die Schaltfläche Themes oben auf Ihrem Bildschirm, um die Galerie der SeedProd-Theme-Vorlagen zu öffnen. Sie können aus vielen Themes wählen, einschließlich Designs für Online-Shops.
Für dieses Tutorial entscheiden wir uns für das Theme „Möbelgeschäft“.
Um das Theme zu importieren, fahren Sie mit der Maus über die Miniaturansicht und klicken Sie auf das Häkchen-Symbol.
Wie Sie in der folgenden Bildschirmansicht sehen können, erstellt SeedProd automatisch alle Vorlagen für Ihr Theme, einschließlich:
- Header-Navigation
- Produktarchive
- Produktseite
- Shop-Seite
- Einzelne Seite
- Einzelner Beitrag
- Blog-Index, Archive, Suche
- Startseite
- Seitenleiste
- Fußzeile
Sie können jede Vorlage mit dem Drag-and-Drop-Builder von SeedProd anpassen. Im 3. Schritt zeigen wir Ihnen, wie Sie die Shop-Seiten-Vorlage anpassen.
Schritt 3. WooCommerce-Shop-Seite anpassen
Um Ihre WooCommerce-Shop-Seite mit SeedProd anzupassen, fahren Sie mit der Maus über die Vorlage „Shop-Seite“ und klicken Sie auf den Link Design bearbeiten.
Nachdem Sie auf den Link geklickt haben, wird Ihre Shop-Seiten-Vorlage im visuellen Drag-and-Drop-Seitenersteller von SeedProd geöffnet.
Links befinden sich Blöcke und Abschnitte, die Sie Ihrer Seite hinzufügen können. Rechts sehen Sie eine Echtzeitvorschau, wie Ihre Seite aussieht.
Ihre Shop-Seite zeigt standardmäßig eine Liste aller Ihrer Produkte an. Sie können dies ändern, indem Sie neue Layouts, Inhaltsblöcke und Abschnitte hinzufügen.
Nehmen wir an, Sie möchten ein scrollendes Banner hinzufügen, das einen Sale oder eine Aktion anzeigt. In diesem Fall können Sie den Block Bilderkarussell herüberziehen und benutzerdefinierte Banner-Bilder hochladen.
Sie können dann Ihren Karussell in den Blockeinstellungen anpassen, indem Sie ihn auf ein dunkles oder helles Thema umstellen, den Schieberegler automatisch abspielen lassen und die Bildunterschriften anzeigen.
Was ist, wenn Sie Ihre empfohlenen Produkte oder meistverkauften Produkte hervorheben möchten? Fügen Sie dazu einen neuen Abschnitt zu Ihrer Seite hinzu, scrollen Sie dann zum Bedienfeld für WooCommerce-Blöcke und ziehen Sie den Block Meistverkaufte Produkte auf Ihre Seite.
Dieser Block zeigt Ihre meistverkauften Produkte in einem einheitlichen Raster an.
Sie können diesen neuen Seitenabschnitt hervorheben, indem Sie ihm eine benutzerdefinierte Hintergrundfarbe geben.
Dann können Sie in den erweiterten Einstellungen des Blocks „Meistverkaufte Produkte“ die Farbe, Typografie und die Schaltflächen In den Warenkorb legen ändern.
Sie können Produkte auch nach Kategorie mit den WooCommerce-Blöcken von SeedProd anzeigen. Ziehen Sie dazu den Block Produktgitter, ändern Sie den „Abfragetyp“ auf Benutzerdefinierte Abfrage und klicken Sie auf die Option Nach Kategorie auswählen.
Von dort aus können Sie auswählen, welche Kategorien in das Produktgitter aufgenommen werden sollen.
Einige andere Blöcke, die Sie zu Ihrer Shop-Seite hinzufügen können, sind:
- Testimonials zur Steigerung von Vertrauen und Glaubwürdigkeit
- Countdown-Timer, um Dringlichkeit für Ihren Verkauf zu schaffen
- Akkordeon zur Anzeige häufig gestellter Fragen
- Facebook- oder Twitter-Einbettungen zur Anzeige von nutzergenerierten Inhalten
Sie können sogar den Titel Ihrer WooCommerce-Shopseite ändern, was ich später in diesem Leitfaden behandeln werde.
Wenn Sie mit Ihrer Shop-Seite zufrieden sind, klicken Sie auf die grüne Schaltfläche Speichern in der oberen rechten Ecke Ihres Bildschirms.
Sie können nun den gleichen Prozess befolgen, um die anderen Teile Ihres WooCommerce-Shops anzupassen. Klicken Sie auf „Design bearbeiten“ bei einer beliebigen Ihrer Theme-Vorlagen und passen Sie das Layout und Styling an Ihre Marke an.
Schritt 4. Veröffentlichen Sie Ihre benutzerdefinierte Shop-Seite
Wenn Ihre WooCommerce-Website so aussieht, wie Sie es möchten, ist es an der Zeit, sie live zu schalten. Gehen Sie dazu zu SeedProd » Theme Builder und schalten Sie in der oberen rechten Ecke den Umschalter „SeedProd Theme aktivieren“ auf die Position „Ja“.
Jetzt können Sie Ihre WooCommerce-Shop-Seite live auf Ihrer Website in der Vorschau anzeigen.
Methode 2: WooCommerce-Shop-Seite mit dem WordPress-Editor anpassen
Wenn Sie es vorziehen, keinen Drittanbieter-Builder zu verwenden, bieten WordPress und WooCommerce integrierte Tools zur Anpassung Ihres Shop-Layouts. Welche Option Sie verwenden, hängt von Ihrem aktiven E-Commerce-Theme ab.
Verwendung des Site-Editors (Block-Themes)
Wenn Ihre Website ein Block-Theme verwendet (wie Twenty Twenty-Four oder Twenty Twenty-Five), können Sie die WooCommerce-Shop-Seiten-Vorlage direkt im Website-Editor bearbeiten.
Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Editor. Öffnen Sie die Liste Vorlagen und suchen Sie die Vorlage Produktkatalog (manche Themes nennen sie Shop). Klicken Sie darauf, um den Vorlagen-Editor zu öffnen.
Von dort aus können Sie Blöcke hinzufügen, entfernen oder neu anordnen, um Ihr WooCommerce-Shop-Layout zu ändern. Wenn Sie fertig sind, klicken Sie auf Speichern.
Verwendung des klassischen Customizers (klassische Themes)
Wenn Ihre Website ein klassisches Theme verwendet, fügt WooCommerce die Anzeigeoptionen direkt zum WordPress Customizer hinzu.
Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Anpassen. Klicken Sie dann auf WooCommerce » Produktkatalog, um die Anpassungsoptionen anzuzeigen.
Klicken Sie auf das Dropdown-Menü „Shop-Seitenanzeige“ und wählen Sie ein Layout aus.
Wählen Sie zum Beispiel „Kategorien anzeigen“, um nur Ihre Produktkategorien auf der Shop-Seite anzuzeigen.
Oder wählen Sie „Produkte anzeigen“, um nur Produkte anzuzeigen.
Sie können auch zuerst Ihre Produktkategorien und dann ein Raster von Produkten mit der Option „Kategorien und Produkte anzeigen“ anzeigen.
Sie können Produkte auch sortieren nach:
- Beliebtheit
- Durchschnittliche Bewertung
- Die neuesten
- Preis
Sie können auch festlegen, wie viele Produkte pro Zeile und Zeilen auf jeder Seite angezeigt werden sollen.
Hier ist eine Vorschau einer Shop-Seite, die mit dem WooCommerce Customizer gestaltet wurde.
So ändern Sie den Titel der Shop-Seite in WooCommerce
WooCommerce nennt Ihre Shopseite bei der Installation 'Shop', und viele Shopbesitzer ändern sie nie. Ein aussagekräftigerer Titel, wie z. B. 'Handgefertigte Kreationen' für einen Bastelladen, teilt den Besuchern mit, was Sie verkaufen, bevor sie mit dem Stöbern beginnen.
Es kann auch Ihrer SEO helfen. Suchmaschinen verwenden Titel, um zu verstehen, worum es auf einer Seite geht. Ein Titel mit einem relevanten Schlüsselwort gibt Ihrem Shop eine bessere Chance, gut zu ranken.
Die richtige Methode hängt davon ab, welchen Titel Sie ändern möchten: den auf der Seite selbst oder den in den Suchergebnissen. Hier sind alle vier.
Benennen Sie die Shop-Seite in WordPress um
Die schnellste Lösung ist, die Shop-Seite wie jede andere WordPress-Seite umzubenennen. Gehen Sie in Ihrem WordPress-Dashboard zu Seiten, suchen Sie Ihre Shop-Seite (normalerweise als 'Shop – Shop-Seite' aufgeführt) und klicken Sie auf Bearbeiten.
Löschen Sie den alten Titel oben im Editor, geben Sie Ihren neuen ein und klicken Sie auf Aktualisieren.
Dies ändert den Titel überall: auf der Seite, im Browser-Tab, in den Suchergebnissen und in allen Breadcrumbs oder Navigationsmenüs, die die Seite auflisten.
Ändern Sie den SEO-Titel der Shop-Seite mit AIOSEO
Manchmal möchten Sie, dass der Titel auf der Seite unverändert bleibt, während der Titel in den Suchergebnissen den Verkauf ankurbelt. Dieser Titel in der Suchliste ist der SEO-Titel, und er ist das, was die Leute bei Google sehen, bevor sie Ihren Shop überhaupt besuchen.
Um ihn zu ändern, verwende ich All in One SEO (AIOSEO), das beste WordPress-SEO-Plugin mit über 3 Millionen Nutzern. Die kostenlose Version bietet benutzerdefinierte Seitentitel, und die Pro-Version fügt vollständige WooCommerce-SEO-Unterstützung hinzu.
Sobald das Plugin eingerichtet ist, öffnen Sie Ihre Shop-Seite im WordPress-Editor und scrollen Sie nach unten zur Box AIOSEO-Einstellungen.
Geben Sie Ihren benutzerdefinierten Titel in das Feld Seitentitel ein oder verwenden Sie Smart Tags, um automatisch einen zu erstellen. Klicken Sie dann auf Aktualisieren, und Suchmaschinen zeigen den neuen Titel beim nächsten Crawlen Ihrer Seite an.
Ändern Sie den Titel der Shop-Seite in SeedProd
Wenn Sie Ihre Shop-Seite mit SeedProd in Methode 1 erstellt haben, ist der Titel wie alles andere ein Block. Gehen Sie zu SeedProd » Theme Builder und klicken Sie auf 'Design bearbeiten' für Ihre Shop-Seitenvorlage.
Klicken Sie im visuellen Editor auf den Titel und geben Sie Ihren neuen ein. Im selben Panel können Sie Größe, Überschriftenebene, Ausrichtung und mobile Sichtbarkeit anpassen.
Um die Farbe und Schriftarten des Titels zu ändern, klicken Sie auf die Registerkarte Erweitert und verwenden Sie die Point-and-Click-Styling-Optionen.
Wenn Sie mit dem Aussehen zufrieden sind, klicken Sie auf Speichern.
So blenden Sie den Titel der Shop-Seite aus
Manchmal ist der beste Titel gar kein Titel, zum Beispiel wenn ein benutzerdefiniertes Banner oder ein Hero-Bild für sich spricht. Sie können den Shop-Seitentitel mit einem kleinen Stück CSS ausblenden.
Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Anpassen und klicken Sie auf Zusätzliches CSS.
Geben Sie im Textfeld den folgenden Code ein und klicken Sie auf Veröffentlichen:
.woocommerce-products-header {
display: none;
}
Um den Titel später wieder einzublenden, löschen Sie den Code und veröffentlichen Sie erneut. Sie können den Ausschnitt auch mit WPCode hinzufügen, dem besten Plugin für WordPress-Code-Snippets, sodass Sie ihn mit einem Klick ein- und ausschalten können.
Ausblenden ist nicht löschen: Dieses CSS blendet den Titel nur im Frontend aus. Die Überschrift bleibt im HTML Ihrer Seite erhalten, sodass Suchmaschinen sie weiterhin lesen können.
So ändern Sie die Standard-Shop-Seite in WooCommerce
WooCommerce ermöglicht es Ihnen auch, die Seite, die als Ihre Shop-Seite fungiert, komplett zu ändern. Dies ist praktisch, wenn Sie eine benutzerdefinierte Seite erstellt haben, die Sie lieber als Eingangstür Ihres Shops verwenden möchten.
Gehen Sie zu WooCommerce » Einstellungen und öffnen Sie die Registerkarte Produkte. Wählen Sie unter der Überschrift „Shop-Seiten“ eine beliebige Seite aus dem Dropdown-Menü „Shop-Seite“ aus und klicken Sie auf Änderungen speichern.
WooCommerce verwendet diese Seite nun als Ihr Produktarchiv. Die Shop-Seite kann auch als Basis für Ihre Produkt-Permalinks dienen. Überprüfen Sie daher Ihre Produkt-URLs nach dem Wechsel doppelt.
So passen Sie Produktkategorie-Seiten in WooCommerce an
Ihre Shop-Seite ist nicht die einzige Seite, auf der Kunden landen. Suchmaschinen leiten Nutzer oft direkt zu einer Produktkategorie-Seite, da diese besser zu einer spezifischen Suche wie „Rennräder“ passt als ein allgemeines Schaufenster.
Die meisten Shops belassen diese Seiten als reine Produktgitter. Wenn Sie Ihre Kategorie-Seiten mit einer richtigen Überschrift, einem Banner und einem Layout anpassen, helfen Sie ihnen, für die Schlüsselwörter zu ranken, nach denen Ihre Kunden suchen, und geben den Leuten einen Grund zu bleiben, sobald sie ankommen.
Fügen Sie zuerst Produktkategorien hinzu
Wenn Ihre Produkte noch nicht in Kategorien organisiert sind, beginnen Sie dort. Gehen Sie in Ihrem WordPress-Dashboard zu Produkte » Kategorien.
Geben Sie jeder Kategorie einen Namen, eine URL (Slug), eine Beschreibung und ein Vorschaubild. WooCommerce erstellt dann automatisch eine Seite für jede Kategorie, und diese Seiten werden Sie als Nächstes anpassen.
Passen Sie Ihre Kategorieseiten-Vorlage in SeedProd an
Jede Kategorie-Seite in Ihrem Shop stammt von einer einzigen Theme-Vorlage namens Produktarchive. Passen Sie sie einmal an, und alle Ihre Kategorie-Seiten werden aktualisiert, um übereinzustimmen.
Wenn Sie Ihren Shop mit SeedProd in Methode 1 erstellt haben, ist diese Vorlage bereits Teil Ihres WooCommerce-Themes. Gehen Sie zu SeedProd » Theme Builder, fahren Sie mit der Maus über die Vorlage „Produktarchive“ und klicken Sie auf Design bearbeiten.
Die Vorlage öffnet sich im selben Drag-and-Drop-Editor, den Sie für Ihre Shop-Seite verwendet haben. Sie finden dort zwei bereits vorhandene Blöcke: Archivtitel und Archivprodukte.
Der Block „Archiftitel“ zeigt automatisch die richtige Überschrift für jede Kategorie an. Wenn ein Kunde Ihre Kategorie „Schwarze Fahrräder“ öffnet, lautet die Überschrift „Kategorie: Schwarze Fahrräder“, ohne dass Sie einen Finger rühren müssen.
Der Block „Archivprodukte“ tut dasselbe für Ihre Produkte und zeigt ein Gitter an, das nach der gerade vom Kunden angesehenen Kategorie gefiltert ist.
Klicken Sie auf einen der Blöcke, um ihn im linken Einstellungsbereich zu gestalten. Sie können die Größe, Ausrichtung und Überschriftenebene des Titels ändern und dann die Schriftarten, Farben und Abstände im Tab „Erweitert“ feinabstimmen.
Von dort aus können Sie das gesamte Layout mit beliebigen Blöcken und Abschnitten von SeedProd neu gestalten. Ziehen Sie einen Bildblock hinein, um ein Kategoriebanner hinzuzufügen, das Ihren neuesten Sale bewirbt, oder lassen Sie den Testimonial-Block neben Ihren Produkten fallen, damit Kunden echte Kundenbewertungen sehen, während sie stöbern.
Hier habe ich die Archivblöcke in eine breite Spalte verschoben und daneben Testimonials in die schmale Spalte eingefügt.
Wenn Sie mit dem Design Ihrer Kategorie-Seite zufrieden sind, klicken Sie auf Speichern. Wenn Ihr SeedProd-Theme bereits aus Methode 1 aktiviert ist, werden die Änderungen sofort auf jeder Kategorie-Seite live geschaltet.
Möchten Sie auch Kategorie-Links auf der Shop-Seite selbst anzeigen? Stellen Sie den Block „Produktgitter“ auf eine benutzerdefinierte Abfrage wie in Methode 1, Schritt 3, oder aktivieren Sie „Kategorien anzeigen“ in den Einstellungen des Produktkatalogs.
So fügen Sie eine Produktbildergalerie in WooCommerce hinzu
Ihre Shop-Seite hat eine Aufgabe: Kunden zum Klicken auf ein Produkt zu bewegen. Die Produktseite muss dann den Verkauf abschließen, und ein einzelnes Foto reicht dafür selten aus.
Ich habe an WooCommerce-Shops gearbeitet, bei denen alles poliert aussah, außer den Produktseiten. Sie hatten ein Bild, vielleicht zwei, ohne etwas, das verschiedene Winkel, Farben oder Details zeigte.
Das Hinzufügen einer Produktbildergalerie änderte das so schnell. Kunden verweilten länger auf der Seite, stellten weniger Fragen und konnten Produkte so inspizieren, wie sie es in einem echten Geschäft tun würden.
WooCommerce enthält standardmäßig eine einfache Produktgalerie. Hier erfahren Sie, wie Sie sie einrichten und dann mit demselben SeedProd-Theme, das Sie in Methode 1 erstellt haben, anpassen, wie sie aussieht.
Fügen Sie Ihren WooCommerce-Produkten Galeriebilder hinzu
Geben Sie Ihren Produkten zunächst einige zusätzliche Fotos zum Anzeigen. Gehen Sie in Ihrem WordPress-Dashboard zu Produkte » Alle Produkte, suchen Sie das Produkt, das Sie aktualisieren möchten, und klicken Sie auf Bearbeiten.
Suchen Sie im Produkteditor auf der rechten Seite nach dem Bereich „Produktgalerie“. Klicken Sie auf den Link Produktgaleriebilder hinzufügen.
Dies öffnet die WordPress-Mediathek, in der Sie neue Fotos hochladen oder vorhandene auswählen können. Halten Sie die Umschalttaste gedrückt, um mehrere Bilder gleichzeitig auszuwählen, und klicken Sie dann auf Zur Galerie hinzufügen.
Sie sehen nun Ihr Hauptproduktbild mit den Miniaturansichten der Galerie darunter. Klicken Sie auf Aktualisieren, um das Produkt zu speichern.
Damit ist der Galerieinhalt erledigt. Wie er angezeigt wird (Layout, Zoom und Lightbox) hängt von Ihrer Produktseitenvorlage ab, und hier kommt SeedProd ins Spiel.
Zeigen Sie die Galerie mit dem Block „Produktgaleriebilder“ von SeedProd an
Wenn Sie Ihren Shop mit SeedProd in Methode 1 erstellt haben, haben Sie bereits eine Produktseitenvorlage. Diese steuert, wie jede einzelne Produktseite aussieht.
Gehen Sie zu SeedProd » Theme Builder, fahren Sie mit der Maus über die Vorlage „Produktseite“ und klicken Sie auf Design bearbeiten.
Die Vorlage wird im selben Drag-and-Drop-Builder geöffnet, den Sie für Ihre Shop-Seite verwendet haben.
Die meisten Vorlagen verwenden standardmäßig den Block „Produkt-Hauptbild“, der ein Foto pro Produkt anzeigt. Um stattdessen Ihre vollständige Galerie anzuzeigen, fahren Sie mit der Maus über diesen Block, bis Sie einen orangefarbenen Rahmen sehen, und klicken Sie dann auf das Papierkorbsymbol, um ihn zu entfernen.
Suchen Sie nun den Block Produktgaleriebilder im linken Bereich und ziehen Sie ihn in den freigeräumten Bereich. Er zieht jedes Galeriebild direkt aus WooCommerce, sodass der Block auf dem neuesten Stand bleibt, wenn Sie die Fotos eines Produkts ändern.
Klicken Sie auf den Galerieblock, um seine Einstellungen zu öffnen. Die Bildzoomoption ermöglicht es Käufern, ein Foto durch Überfahren mit der Maus zu vergrößern. Sie können die Position, Größe und Farben der Zoom-Schaltfläche anpassen.
Sie können auch die Ränder des Hauptbilds und der Miniaturansichten gestalten. Der Tab „Erweitert“ bietet Steuerelemente für Abstände, Sichtbarkeit auf Geräten und Animationen.
Wenn Sie mit dem Design zufrieden sind, klicken Sie auf Speichern. Wenn Ihr SeedProd-Theme aus Methode 1 bereits aktiviert ist, ist die Änderung sofort live.
Hier ist die fertige Produktgalerie in Aktion, mit einem klickbaren Slider und einer Vollbild-Lightbox-Ansicht:
Produktvideos funktionieren auch: Sie können den Video-Block von SeedProd auf dieselbe Vorlage ziehen, um einen YouTube- oder Vimeo-Clip unter Ihrer Galerie einzubetten. Für eine ganze Galerie von Produktvideos kann das YouTube-Feed-Plugin von Smash Balloon Demos und Kundenrezensionen an einem Ort anzeigen.
FAQ: Anpassung der WooCommerce-Shop-Seite
Warum kann ich meine WooCommerce-Shop-Seite nicht direkt in WordPress bearbeiten?
Die WooCommerce-Shop-Seite wird aus einer Vorlagendatei namens archive-product.php generiert und nicht als regulärer Seiteninhalt gespeichert. Wenn Sie auf „Seite bearbeiten“ klicken, erhalten Sie Zugriff auf das Seitenobjekt, aber das Produktgitter und das Layout stammen aus dem PHP-Vorlagensystem von WooCommerce, nicht aus dem Block-Editor. Um das Design zu ändern, benötigen Sie ein Tool, das die Vorlage überschreibt, wie SeedProd, oder die integrierten Optionen des Customizers und Site Editors.
Wie ändere ich, welche Produkte auf der WooCommerce-Shop-Seite angezeigt werden?
Sie können die Sichtbarkeit von Produkten in den einzelnen Produkteinstellungen in WordPress steuern. Setzen Sie ein Produkt auf „Hervorgehoben“, um es hervorzuheben, passen Sie seinen Veröffentlichungsstatus an, um es anzuzeigen oder auszublenden, oder verwenden Sie Produktkategorien und -tags, um zu organisieren, was angezeigt wird. Der WooCommerce Customizer ermöglicht es Ihnen auch, die Standard-Sortierreihenfolge (Beliebtheit, durchschnittliche Bewertung, neueste, Preis) unter Darstellung » Anpassen » WooCommerce » Produktkatalog zu ändern.
Wie heißt die Vorlagendatei der WooCommerce-Shop-Seite?
Die WooCommerce-Shop-Seite verwendet die Vorlagendatei archive-product.php. Sie finden sie im WooCommerce-Plugin-Ordner unter woocommerce/templates/. Um sie mit Code anzupassen, kopieren Sie sie in den woocommerce/-Ordner Ihres Themes und ändern Sie sie dort. Dies verhindert, dass Ihre Änderungen bei Plugin-Updates überschrieben werden.
Wie füge ich ein Banner oder einen hervorgehobenen Bereich zu meiner WooCommerce-Shop-Seite hinzu?
Der einfachste Weg ist die Verwendung des Drag-and-Drop-Builders von SeedProd. Öffnen Sie Ihre Shop-Seiten-Vorlage in SeedProd und ziehen Sie dann einen Bildkarussell-Block über das Produktgitter, um ein scrollendes Banner zu erstellen. Für einen Bereich mit hervorgehobenen Produkten fügen Sie einen neuen Bereich hinzu und platzieren Sie den Block „Bestseller-Produkte“ oder „Hervorgehobene Produkte“. Sie können jeden Bereich unabhängig mit benutzerdefinierten Hintergründen, Farben und Typografie gestalten.
Was ist der Unterschied zwischen der WooCommerce-Shop-Seite und den Produktseiten?
Die Shop-Seite (auch Produktarchiv genannt) ist eine Auflistungsseite, die alle Ihre Produkte in einem Raster anzeigt. Produktseiten sind einzelne Seiten für jeden Artikel, die detaillierte Beschreibungen, Bilder, Preise und die Schaltfläche „In den Warenkorb“ anzeigen. Kunden landen normalerweise zuerst auf der Shop-Seite, stöbern und klicken dann zu einzelnen Produktseiten. Beide können mit SeedProd angepasst werden.
Kann ich jede WooCommerce-Produktkategorieseite unterschiedlich anpassen?
Ja. Dynamische Blöcke wie Archivtitel und Archivprodukte passen sich automatisch an jede Kategorie an, sodass jede Seite ihre eigene Überschrift und Produkte anzeigt. Bei größeren Unterschieden, wie z. B. einem einzigartigen Banner für eine Kategorie, können Sie die Anzeigebedingungen von SeedProd verwenden, um zu steuern, welche Vorlagen wo gelten.
Helfen benutzerdefinierte WooCommerce-Kategorieseiten bei SEO?
Das können sie. Kategorieseiten zielen auf breitere Shopping-Keywords ab als einzelne Produkte, und die meisten Shops lassen sie fast leer, sodass ein wenig Aufwand viel bewirkt. Fügen Sie eine kurze, Keyword-reiche Kategoriebeschreibung, eine klare Überschrift und hochwertige Bilder hinzu. Ein SEO-Plugin wie AIOSEO kann auch einen benutzerdefinierten SEO-Titel und eine Meta-Beschreibung für jede Kategorieseite festlegen.
Kann ich Schlüsselwörter in den Titel meiner WooCommerce-Shop-Seite aufnehmen?
Ja, und es kann Ihrer SEO helfen. Suchmaschinen verwenden den Titel, um zu verstehen, was Ihr Shop verkauft. Ein Titel wie „Handgefertigter Schmuck“ ist also wirkungsvoller als ein einfaches „Shop“. Halten Sie es jedoch natürlich. Schreiben Sie den Titel zuerst für Ihre Kunden und stellen Sie sicher, dass er klar darstellt, was Sie verkaufen.
Warum wird mein alter Shop-Seitentitel immer noch in den Suchergebnissen angezeigt?
Suchmaschinen aktualisieren ihren Index nicht in dem Moment, in dem Sie einen Titel ändern. Es kann Tage oder sogar Wochen dauern, bis der neue Shop-Seitentitel in den Ergebnissen erscheint. Um dies zu beschleunigen, fordern Sie eine Neucrawlung der Seite in der Google Search Console an und geben Sie Google dann Zeit, aufzuholen.
Wie ändere ich das Standardproduktbild in WooCommerce?
Das Standardproduktbild ist das hervorgehobene Bild des Produkts. Um es zu ändern, bearbeiten Sie das Produkt, klicken Sie auf das aktuelle Foto im Bereich „Produktbild“ und wählen Sie ein neues aus der Mediathek aus. Dieses Bild wird in Ihrem Shop-Seitenraster und als erstes Bild in Ihrer Produktgalerie angezeigt.
Kann ich eine Produktbildgalerie in WooCommerce ohne Plugin hinzufügen?
Ja. Der Bereich „Produktgalerie“ im Produkteditor ist in WooCommerce integriert, und die meisten Themes zeigen die zusätzlichen Bilder mit Thumbnails an. Das Verhalten von Zoom, Lightbox und Slider hängt jedoch von Ihrem Theme ab. Ein Tool wie SeedProd gibt Ihnen die Kontrolle darüber, ohne Code.
Sie benötigen keinen Entwickler oder eine einzige Codezeile, um Ihre WooCommerce-Shop-Seite zu Ihrer eigenen zu machen.
SeedProd übernimmt die vollständige Neugestaltung Ihrer Shop- und Kategorieseiten, der WordPress-Editor kümmert sich um schnelle Anzeigeanpassungen, und das Umbenennen oder Ausblenden des Shop-Titels dauert nur wenige Klicks.
Sie können jetzt mit der Anpassung Ihrer Shop-Seite beginnen.
Vielleicht gefällt Ihnen auch dieser Leitfaden zur Einrichtung des WooCommerce-Conversion-Trackings , während Sie hier sind. Oder dieser über die Erstellung einer benutzerdefinierten WooCommerce-Warenkorbseite.
Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.
