So erstellen Sie eine Produktkategorieliste in WordPress

Ein wichtiger Bestandteil des Verkaufs ist die Präsentation, so viel steht fest. Aber für Online-Shops ist die Präsentation wichtig nicht nur um einen Verkauf zu machen: Es geht auch darum, ein professionelles und vertrauenswürdiges Image zu vermitteln, es geht um Ästhetik und es geht um die Benutzererfahrung, auch wenn kein Geld den Besitzer wechselt. In diesem Artikel werden wir darüber sprechen Erstellen einer Produktkategorieliste für Ihren WooCommerce-Shop. Dies verlockende Darstellung könnte eine großartige Ergänzung zu Ihrer Website sein.

Sie können innerhalb weniger Minuten eine Produktkategorieliste erstellen, die perfekt aussieht. Wie das geht, erfahren Sie im folgenden Video. Wenn Sie jedoch Ihre Tutorials in Textform mit schrittweisen Anleitungen bevorzugen, finden Sie alles Notwendige unterhalb des Videos.

Aber gehen wir einen Schritt zurück: Was ist überhaupt eine Produktkategorieliste und was müssen Sie tun, um sie einzurichten? Die Antworten finden Sie in diesem Artikel. Wenn Sie sicher sind, dass Sie nur den Tutorial-Abschnitt benötigen, finden Sie ihn im Inhaltsverzeichnis unten.

Folgendes möchten wir besprechen:

Was sind Produktkategorielisten in WooCommerce

Eine der Kernfunktionen von WooCommerce ist der benutzerdefinierte Produktposttyp, und diese Produktposts können sein in Kategorien sortiert. Je nachdem, was Sie verkaufen, können diese Kategorien Gruppierungen wie Herren- und Damenbekleidung für Bekleidung, Belletristik und Sachbücher für Literatur, vegan oder vegetarisch für Lebensmittel oder Kosmetik usw. umfassen.

Eine Produktkategorieliste präsentiert Ihren Käufern eine Reihe von Kategorien sie können aus wählen – so etwas wie Unterüberschriften in einer Restaurantkarte. Warengruppenlisten sind also eine Präsentations- und Navigationsfunktion. Sie sind nützlich, wenn Sie mehr als nur ein paar Produkte in Ihrem Geschäft haben und wenn sie in Kategorien organisiert werden können.

Was Sie vorher tun müssen

Um Ihre Website zu bearbeiten, müssen Sie zunächst eine Webseite haben. So weit, ist es gut. Um WooCommerce-Produktkategorien nutzen zu können, müssen Sie ebenfalls einen WooCommerce-Shop auf Ihrer Website erstellt haben.

Sobald Sie das getan haben, müssen Sie erstellt haben Produktkategorien. In unserer Demonstration verwenden wir ein Bekleidungsgeschäft mit vier Kategorien plus der Standardkategorie von Nicht kategorisiert.

Schließlich müssen Sie zwei WordPress-Plugins installieren und aktivieren: Elementor und Qi-Addons für Elementor. Wir werden unsere eigenen verwenden Qi-Addons Plugin, das enthält sechzig wunderschön gestaltete und einfach zu bedienende Widgets. Die Liste der WooCommerce-Produktkategorien ist nur eine davon. Um das Qi-Addons-Plugin zu verwenden, müssen Sie Elementor, den führenden visuellen Editor, als Ihren Seiteneditor verwenden. Die neueste Version, kostenlos oder Premium, reicht aus. Qi Addons funktionieren nicht mit anderen Seiteneditoren.

Um es noch einmal zu wiederholen, müssen Sie Folgendes tun:

Nachdem Sie alle oben genannten Schritte ausgeführt haben, können Sie mit Ihrer Produktkategorieliste beginnen.

So erstellen Sie eine Produktkategorieliste mit Qi-Addons für Elementor

Wir zeigen Ihnen, wie Sie eine Produktkategorieliste als Teil einer Seite erstellen. Zunächst haben wir eine Seite erstellt, ihr einen Titel gegeben und auf die geklickt Mit Elementor bearbeiten Schaltfläche in der Kopfzeile des Seiteneditors.

Suchen Sie das Widget im Menü auf der linken Seite und ziehen Sie es an die gewünschte Stelle auf der Seite.

Liste der Produktkategorien

Das Widget ist jetzt vorhanden. Sie können sehen, dass es alle Kategorien in unserem Shop gibt, einschließlich der Nicht kategorisiert Kategorie.

Verwandt :  Die 6 besten Immobilien-Plugins für WordPress

Registerkarte „Allgemein“, Abschnitt „Allgemein“.

Die Widgets Allgemein Registerkarte geöffnet werden sollte, und darin die Allgemein Sektion. In dem Aussehen der Liste Menü können Sie zwischen den wählen Galerie und Mauerwerk Anzeigetypen. Wir belassen es beim Standardwert von Galerie. In dem Bildproportionen Menü können Sie die Bildgröße und die Art des Zuschnitts auswählen (Miniaturansicht, Quadrat, Porträt, usw). Wir werden die Standardeinstellung verwenden Original Einstellung für diese Demonstration.

Das Anzahl der Spalten Menü kann auf einen Wert von eins bis acht eingestellt werden, sowie Standard. Wir belassen es bei Drei. In dem Spalten reagieren Menü, zwischen denen Sie wählen können Vorbestimmt und Brauch. Auswählen Brauch können Sie die Anzahl der Spalten für eine Vielzahl von Geräten auswählen, die nach Anzeigebreite sortiert sind. Wir sind mit gegangen Drei Spalten für die beiden größeren Geräte und Einer für den Rest.

Das Abstand zwischen Elementen Der Schieberegler steuert die Grenze zwischen den Artikeln Ihres Produktkategorierasters. Wir werden uns darauf einstellen 27 Pixel. Das Zickzack aktivieren Mit der Option können Sie jede andere Kachel im Raster versetzen, während die Grenzen Mit dem Menü können Sie einen anderen Rahmentyp für Ihre Rasterelemente festlegen. Wir werden hier keine der beiden Optionen benötigen.

Allgemeine Optionen Inhalt

Registerkarte „Allgemein“, Abschnitt „Abfrage“.

Jetzt im Anfrage Abschnitt der Allgemein Registerkarte ist die erste Option Beiträge pro Seite: die Anzahl der im Raster angezeigten Beiträge. Wir werden unsere einstellen 3. Die nächsten beiden Optionen Sortieren nach und Befehl lassen Sie die Reihenfolge festlegen, in der Ihre Gitterkacheln dem Besucher angezeigt werden. Wir haben den Standardwert nicht geändert, die Kategorien nach Datum und in absteigender Reihenfolge zu sortieren. Das Leer ausblenden Mit der Steuerung können Sie die Kategorien ohne Produkte ausblenden. Endlich, das Zusätzliche Parameter Mit control können Sie die Kategorien auswählen, die Sie in Ihrem Grid verwenden möchten, vorausgesetzt, Sie kennen ihre IDs. Das tun wir, und so gingen wir mit unseren drei Kategorien vor. Sie können die ID Ihrer Produktkategorie wie bei jeder anderen Kategorie erfahren. Konsultieren Sie den verlinkten Artikel für eine ausführliche Erklärung.

Anfrage

Registerkarte „Allgemein“, Abschnitt „Layout“.

Das Layout Abschnitt der Allgemein Auf der Registerkarte können Sie auswählen, wie der Kategoriename (Titel) in Ihrem Raster angezeigt wird. Das Artikellayout Menü können Sie zwischen wählen Info zum Bild verpacktwas die Standardeinstellung ist und bei der wir bleiben werden, Info zum Bildund Infoseite mit Knopf. Das Titel-Tag lässt Sie den Überschriftenstatus des Kategorietitels auswählen. Die Voreinstellung ist H5und wir werden es für diese Demonstration aufbewahren.

Layout

Registerkarte „Allgemein“, Schaltflächenabschnitte

Die nächsten beiden Abschnitte der Allgemein Registerkarte sind Taste und Schaltflächensymbol. Da haben wir uns das nicht ausgesucht Infoseite mit Knopf Option für unsere Produktkategorieliste, sie werden nichts tun. Sie können sie jedoch verwenden, um Ihre Schaltfläche anzupassen. Das Layout und Typ In den Menüs können Sie die Art der gewünschten Schaltfläche auswählen. Sie können eine haben Gefüllt, Umrissenoder Textlich Layoutzum Beispiel kombiniert mit a Standard, Mit Innenrandoder Symbol verpackt Art der Schaltfläche. Das Schaltflächentext unterstreichen aktivieren Die Steuerung ist ziemlich selbsterklärend, ebenso wie die Größe Speisekarte. Schließlich können Sie alles eingeben Schaltflächentext Sie im unteren Feld mögen.

Taste

In dem Schaltflächensymbol Abschnitt können Sie eine .svg-Datei für Ihr Schaltflächensymbol hochladen oder eine aus der Symbolbibliothek auswählen und die verwenden Symbolposition , um es links oder rechts vom Schaltflächentext zu positionieren. Da wir für dieses Design keine Schaltflächen verwenden, sind diese Steuerelemente für diese Demonstration irrelevant, aber Sie können sie verwenden, um Ihre eigenen Produktkategorielisten nach Ihren Wünschen zu gestalten.

Verwandt :  PNG vs JPG: Was ist besser für Ihre WordPress-Website
Schaltflächensymbol

So gestalten Sie Ihre Produktkategorieliste für Qi-Addons

Die allgemeinen Optionen sind nur ein Teil der praktisch unbegrenzten Möglichkeiten, die Ihnen bei der Konfiguration Ihrer Produktkategorieliste zur Verfügung stehen. Es gibt viele Möglichkeiten, Ihre Produktkategorielisten zu gestalten, und Sie finden sie im Stil Tab.

Registerkarte „Stil“, Abschnitt „Stil“.

In dem Stil Registerkarte, der erste Abschnitt oben ist die Stil Sektion. Hier können Sie den Kategorietitel in Ihrem Raster gestalten. Sie können die auswählen Titelfarbe mit einem Picker oder durch Eingabe von a Farbe Hex-Code. In dem Titel Typografie Abschnitt haben Sie die üblichen Verdächtigen in Bezug auf Typografieoptionen: Schriftfamilie, Größe, Gewicht, Abstand und so weiter. Wir sind mit unseren Titeleinstellungen zufrieden, daher werden wir diese Optionen nicht für unsere Produktkategorieliste verwenden.

Stil

Das Breite des Titelfelds Mit dem Steuerelement können Sie die Breite Ihres Titelfelds festlegen. Wir werden es einstellen 184 Pixel. Das Titelauffüllung Optionen wirken sich auf den Abstand zwischen dem Titeltext und dem Rahmenrand aus. Wir werden Verknüpfung aufheben die Werte durch Anklicken des Verknüpfung Schaltfläche und legen Sie die Füllwerte fest: 19 Pixel für oben und das gleiche für die Unterseite aufstellen. Das Hintergrundfarbe des Titels Mit dieser Option können Sie eine Farbe für das Feld hinter dem Titel auswählen. Wir belassen es beim Standardweiß.

Stil-Titelfeld

Registerkarte „Stil“, Schaltflächenabschnitte

Die folgenden Abschnitte regeln den Stil und das Verhalten einer Schaltfläche, falls Sie sich für eine entschieden haben – was wir nicht getan haben. Immernoch Schaltflächenstil, Schaltflächensymbolstil, Schaltflächeninnenrahmenstil und Schaltflächenunterstreichungsstil Abschnitte der Stil Tab bieten eine Fülle von Gestaltungsoptionen sowohl für das normale Aussehen der Schaltfläche als auch für das Verhalten der Schaltfläche und des Symbols beim Bewegen mit der Maus.

Schaltflächenstil

Registerkarte „Stil“, Abschnitt „Bildstil“.

In dem Bildstil Abschnitt der Stil Registerkarte, können Sie die sehen Normal/Schweben Schalter. Auf diese Weise können Sie das Verhalten für das Bild festlegen, wenn ein Benutzer mit der Maus darüber fährt. In dem Normal In der Ansicht können Sie lediglich eine Farbüberlagerung für jedes Bild festlegen, indem Sie die verwenden Überlagerungsfarbe Kontrolle.

Bildstil

In dem Schweben Ansicht, können Sie die erneut verwenden Overlay-Hover-Farbe um eine Überlagerung festzulegen, wenn ein Benutzer mit der Maus über das Bild fährt. Verwendung der Bild-Hover Steuerelement können Sie die Art der On-Hover-Animation auswählen, während die Bild-Hover-Zoom-Ursprung lässt Sie den Fokus des Animationseffekts wählen, falls einer ausgewählt ist. Für diese Demonstration verwenden wir die Hineinzoomen Möglichkeit für die Bild-Hoverund die Center Option für Bild Bewegen Sie den Mauszeiger über den Zoom-Ursprung – die Standardwerte.

Bildstil-Hover

Registerkarte „Stil“, Abschnitt „Rahmenstil“.

Das Rahmenstil Abschnitt der Stil Auf der Registerkarte können Sie eine Anzahl von Pixeln (Prozentsätze oder Ems) festlegen, um die die Ecken eines Bildes abgerundet werden können. Wir werden diesen Effekt für diese Demonstration nicht verwenden.

Rahmenstil

Registerkarte „Stil“, Abschnitt „Abstandsstil“.

Endlich erreichen wir die Abstandsstil Sektion. Dies hat nur eine Steuerung: Titel unten versetzt, und es stellt den Abstand zwischen dem unteren Rand des Bildes und dem Titel dar. Sie können den Wert mit einem Schieberegler auswählen oder einen Wert eingeben, der Ihnen gefällt. Wir sind wieder einmal mit der Standardeinstellung zufrieden und werden diese Option nicht verwenden.

Abstandsstil

Und wie Sie sehen können, können Sie innerhalb von Minuten eine Produktkategorieliste erstellen und nach Ihren Wünschen anpassen! Alles, was Sie brauchen, sind Elementor und Qi Addons.

Abschließend

Wie wir in dieser kurzen Demo gezeigt haben, können Sie innerhalb weniger Minuten mit nur wenigen Mausklicks und unter Verwendung der meisten Standardoptionen eine schöne, wenn auch minimalistische Produktkategorieliste erstellen. Das ist jedoch noch lange nicht alles: Es gibt eine Vielzahl von Styling- und Schaltflächenoptionen, die wir nicht verwendet haben, mit denen Sie Ihre WooCommerce-Produktkategorieliste jedoch an praktisch jedes Website-Layout oder jeden Stil anpassen können. Und nichts davon muss Sie einen Cent kosten.