So passen Sie Ihre WooCommerce Shop-Seite an

Diejenigen, die WordPress-Websites erstellt haben, wissen, dass es verschiedene Arten von Seiten gibt, die Sie in WordPress erstellen können. WooCommerce folgt einer ähnlichen Struktur. Es gibt einzelne Produktseiten, wie einzelne Beitragsseiten und dann gibt es archivartige Seiten, die eine Liste von Produkten zeigen. Die WooCommerce-Shopseite fällt in die letztere Kategorie.

In diesem Beitrag erkläre ich, warum eine WooCommerce Shop-Seite wichtig ist und wie Sie sie anpassen können.

Sie werden auch viel Inspiration dafür bekommen, wie Sie eine WooCommerce Produktseite anpassen und wie Sie eine WooCommerce Shop Seite gestalten können. Eine sinnvolle WooCommerce Warenwirtschaft kann Ihnen langfristig mehr Unternehmenserfolg bringen.

Fangen wir an.

Warum die WooCommerce Shop-Seite anpassen?

Wie ich bereits erwähnt habe, ermöglicht die Shop-Seite Ihren Besuchern, alle Produkte, die Sie verkaufen, an einem Ort zu sehen. Das ist sehr praktisch für sie, wenn sie sich nur umsehen, ohne ein bestimmtes Produkt im Kopf zu haben, das sie kaufen möchten.

Eine WooCommerce-Shopseite sieht ziemlich einfach aus, wenn alles auf Standard eingestellt ist. Die folgende Abbildung zeigt, wie die Standard-Shopseite auf meiner lokal eingerichteten Test-Website mit installiertem Storefront-Theme aussieht.

Augenblicklich verwendet sie nur Shop als Seitentitel und präsentiert alle Produkte in einem Rasterlayout. Es gibt eine Menge Verbesserungen, die an der Seite vorgenommen werden können. Zum Beispiel könnten wir den Benutzern die Möglichkeit geben, nach Produkten zu suchen, oder wir könnten eine Liste der vorgestellten, meistverkauften oder am besten bewerteten Produkte einfügen. Die Idee ist, den Besuchern zu helfen, das zu finden, was sie suchen, oder sie in eine bestimmte Richtung zu lenken, z.B. durch die Anzeige einer Liste der im Verkauf befindlichen Produkte.

Wenn Sie die Shop-Seite so anpassen, dass sie die am besten bewerteten und meistverkauften Produkte enthält, erhöhen Sie Ihre Chancen auf einen Verkauf. Sie können die Shop-Seite auch bearbeiten, um den Besuchern das Durchsuchen der Produkte zu erleichtern.

Anpassen der WooCommerce Shop-Seite

Es gibt ein paar Möglichkeiten, die WooCommerce Shop-Seite in WordPress anzupassen. Am einfachsten ist es, vorhandene Tools und Plugins zu verwenden. Sie können aber auch eine vollständig angepasste Shop-Seite entwerfen, indem Sie ein Child-Theme erstellen.

Wir konzentrieren uns hier auf die Erstellung einer angepassten Shop-Seite unter Verwendung der integrierten WordPress- und WooCommerce-Funktionen, eines kostenlosen Plugins eines Drittanbieters namens StoreCustomizer und einiger angepasster CSS.

1. Integrierte WooCommerce-Blöcke hinzufügen

Wir beginnen mit der Bearbeitung der Shop-Seite mit dem WordPress Gutenberg-Editor. Sie finden die Shop-Seite unter Seiten > Alle Seiten im Navigationsmenü des WordPress-Dashboards. Klicken Sie auf den Link Bearbeiten, der angezeigt wird, wenn Sie auf die Shop-Seite gehen.

Der erste Block, den wir der Shop-Seite hinzufügen, ist eine Überschrift der Ebene h2. Klicken Sie auf die kleine Schaltfläche + auf der Seite und wählen Sie dann einen Überschriftenblock aus. Ich verwende Willkommen in unserem Shop als Überschrift. Klicken Sie auf die Überschrift und Sie sehen ein Menü oder eine Symbolleiste, mit der Sie die Höhe und Ausrichtung der Überschrift einstellen können. Behalten Sie die Überschriftenebene auf h2 und stellen Sie die Ausrichtung auf Mitte. Sie sehen auch einige Einstellungen für den Überschriftenblock in der Seitenleiste. Stellen Sie einfach sicher, dass Sie sich auf der Registerkarte Block befinden und nicht auf Seite.

Ich nehme ein paar Änderungen am Erscheinungsbild des Überschriftenblocks vor, indem ich die Farbe auf schwarz, die Größe auf 37px, die Schriftart im Dropdown-Menü Erscheinungsbild auf fett und die Groß- und Kleinschreibung auf Großbuchstaben setze, indem ich die erste Option wähle.

Nun fügen wir einen weiteren Block hinzu, um ein zweispaltiges Layout zu erstellen. Wählen Sie die Option für eine 70-30 Aufteilung. Unsere Produktliste wird sich auf der linken Seite befinden und die rechte Seite enthält eine Seitenleiste für zusätzliche Inhalte wie z.B. ein Widgets für die Produktsuche.

Zunächst fügen Sie eine h3 Überschrift mit dem Titel Unsere meistverkauften Produkte in die linke Spalte ein. Fügen Sie einen WooCommerce-Block mit dem Namen Best Selling Products hier ein. Sie finden ihn, nachdem Sie Best Selling in die Sucheingabe der schwebenden Symbolleiste eingegeben haben. Sie können auch auf das Symbol + im oberen Menü klicken, um eine Liste aller verfügbaren Blöcke anzuzeigen. Dadurch öffnet sich eine Seitenleiste auf der linken Seite und Sie können weiter nach unten scrollen, um die WooCommerce-Blöcke zu sehen. Dies ist eine weitere Möglichkeit, einen Block hinzuzufügen, wenn Sie ihn über die Suche nicht finden können.

Der Block zeigt standardmäßig die 9 meistverkauften Produkte in einem 3x3-Raster an. Wir werden den Spaltenschieberegler auf 3 belassen und den Zeilenschieberegler auf 1 verschieben, um eine einzelne Zeile mit drei Produkten anzuzeigen. Ich habe auch den Wert für die Produktbewertung umgeschaltet, um ihn auf der Seite auszublenden.

Wiederholen Sie die letzten beiden Schritte, um eine weitere Überschrift mit dem Titel Unsere neuesten Produkte und einen Block hinzuzufügen, in dem die drei neuesten Produkte präsentiert werden.

Lassen Sie uns jetzt mit dem Hinzufügen von Inhalten zur Seitenleiste beginnen. Zunächst fügen wir einen Produktsuche-Block hinzu und schalten dann die Suchfeldbeschriftung anzeigen in den Blockeinstellungen um.

Fügen Sie eine Überschrift der Ebene h3 mit dem Titel Wählen Sie eine Kategorie unterhalb der Suchleiste hinzu. Setzen Sie die Farbe auf Schwarz, das Aussehen auf Fett und die Großschreibung auf Großbuchstaben. Fügen Sie nach der Überschrift einen weiteren WooCommerce-Block mit dem Namen Produktkategorienliste hinzu und behalten Sie alle Standardeinstellungen des Blocks bei. Damit sollten Sie eine Shop-Seite erhalten, die wie das unten stehende Bild aussieht.

Wir fügen einen Produkt-Block in unsere Seitenleiste ein, um ein besonders hervorgehobenes Produkt anzuzeigen. Ich habe meinen auf den Emoji Hoodie eingestellt. Es gibt eine ganze Reihe von Blockeinstellungen für das vorgestellte Produkt. Deaktivieren Sie Beschreibung anzeigen unter Inhalt in den Blockeinstellungen und setzen Sie die Deckkraft des Hintergrunds auf 70%.

2. Hinzufügen von benutzerdefiniertem CSS für die Blöcke

Wir haben das Aussehen vieler Elemente auf der Shop-Seite mit dem Gutenberg-Editor selbst angepasst. Wenn Sie jedoch weitere Änderungen vornehmen möchten, müssen Sie einige CSS schreiben. Sie können Ihre eigenen CSS-Regeln zu Ihrer Website hinzufügen, indem Sie zu Erscheinungsbild > Anpassen > Zusätzliche CSS gehen. Fügen Sie nun das folgende CSS in das Textfeld ein und klicken Sie auf Veröffentlichen.

.wc-block-product-categories {
     margin-bottom: 1em;
     background: #efefef;
     padding: 2rem 0 0.5rem 1rem;
}
.wc-block-produkt-kategorien-list.wc-block-produkt-kategorien-list--depth-0 {
     font-size: 1.5rem;
     list-style: dezimal;
     margin-left: 2rem;
     margin-bottom: 1rem;
}
#select-a-category {
     font-size: 2rem;
     margin-bottom: 0;
     Rand-Oben: 3rem;
}
.woocommerce-ordering {
     font-size: 1.7rem;
}
.storefront-sorting select {
     border: 2px solid black;
     text-align: center;
     font-variant: small-caps;
}

Die ersten drei Selektoren zielen auf verschiedene Elemente ab, die wir auf der Shop-Seite hinzugefügt haben. Die angewandten CSS-Regeln dienen im Wesentlichen dazu, den Abschnitt mit der Kategorieliste hervorzuheben.

Die letzten beiden Selektoren zielen auf das Standard-Dropdown für die Sortierung auf der Shop-Seite ab. Wir erhöhen die Schriftgröße des Dropdowns und fügen unter anderem einen dickeren Rahmen hinzu, um es mit dem Rest der Seite zu verschmelzen.

3. Unerwünschte Elemente mit StoreCustomizer entfernen

Das StoreCustomizer Plugin gibt uns viele Möglichkeiten, Dinge auf der Shop-Seite zu ändern, die mit dem standardmäßigen Gutenberg-Editor nicht möglich wären. Es erlaubt uns, viele WooCommerce-bezogene Seiten anzupassen, darunter auch die Shop-Seite.

Nachdem Sie das Plugin installiert haben, können Sie unter Erscheinungsbild > Anpassen > StoreCustomizer > WooCommerce Shop-Seite alle Änderungen vornehmen. In meinem Fall markiere ich das Kästchen, um den Shop-Titel und die Sortierergebnisse zu entfernen. Außerdem setze ich die Anzahl der Produkte pro Seite auf 20 und die Anzahl der Produkte pro Zeile auf 4. Wir können auch ein Abzeichen hinzufügen, um neue Produkte auf der Shop-Seite hervorzuheben, indem wir das Kontrollkästchen neben Neues Abzeichen für kürzlich hinzugefügte Produkte hinzufügen anklicken. Sie müssen lediglich die Anzahl der Tage angeben, die seit dem Hinzufügen eines Artikels auf der Website vergangen sind, damit er als neu gilt.

Endgültiges Ergebnis

Nachdem Sie alle Schritte des Tutorials befolgt haben, sollte Ihre Shop-Seite wie das folgende Bild aussehen.

Sie sollte auch die klassische Produktliste mit neu angewendeten CSS und Einstellungen haben, die ähnlich wie das folgende Bild aussieht.

Abschließende Überlegungen

In diesem Beitrag haben wir gelernt, wie man eine WooCommerce Shop-Seite anpasst, ohne viel Code zu schreiben. Dazu fügten wir der Shop-Seite integrierte WooCommerce-Blöcke hinzu und änderten dann deren Aussehen mit Hilfe von CSS. Schließlich haben wir ein kostenloses Plugin eines Drittanbieters namens StoreCustomizer verwendet, um Funktionen hinzuzufügen, für die wir sonst PHP-Code schreiben müssten.