Wollten Sie schon immer ein sortierbares und filterbares Raster erstellen, das alle oder einen Teil Ihrer WooCommerce-Produkte enthält?

Wenn Sie einen WooCommerce-Shop betreiben, wissen Sie, dass WooCommerce bereits über eine eigene Archivseite verfügt, auf der Sie einzelne Produkte präsentieren können.So erstellen Sie ein Raster für WordPress-Woocommerce-Produkte 1

Je nachdem, was Sie verkaufen, ist dies jedoch nicht immer die effektivste Art, Ihre Produkte zu präsentieren.

In einigen Fällen ist die Anzeige von WooCommerce-Produkten in einem Raster effizienter.

Und wenn das nach der Situation klingt, in der Sie sich befinden, geht es Ihnen gut, da ich Ihnen zeigen werde, wie Sie ein Raster Ihrer WooCommerce-Produkte erstellen.

Aber wenn Sie WordPress noch nie installiert haben, entdecken Sie Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Was können Sie mit einem Raster von WooCommerce-Produkten tun?

Obwohl dies keine vollständige Liste ist, gibt es einige Situationen, in denen ein Produktraster den Besuchern eine bessere Erfahrung bieten kann als Ihre reguläre Archivseite:

Entdecken Sie Wie installiere ich einen Online-Shop auf WordPress mit dem WooCommerce-Plugin?

  • Großmärkte - Wenn Sie viele Produkte im Großhandel verkaufen, ist es möglicherweise benutzerfreundlicher, Ihren Kunden eine einfache Möglichkeit zum Sortieren oder Filtern eines Rasters zu bieten, als einzelne Produktseiten durchsuchen zu lassen.
  • Produktkataloge - Wenn Sie nur einen einfach zu durchsuchenden Produktkatalog anzeigen möchten, spart ein AJAX-Sortier- / Filterraster den Kunden Zeit (und das erneute Laden von Seiten).
  • Bestellformulare - Wenn Sie ein Bestellformular erstellen möchten, das auf WooCommerce-Produkten basiert, bietet ein Raster eine sehr einfache Möglichkeit, dies zu tun. Es ist auch ein guter Ansatz, ein Restaurantmenü anzuzeigen und Online-Bestellungen anzunehmen.

So erstellen Sie ein Raster mit WooCommerce-Produkten

Wir werden das Plugin verwenden WooCommerce-ProdukttabelleDas Plugin konzentriert sich ausschließlich auf die Erstellung eines Produktrasters. Und dank seiner Schnittstellenparameter und Kurzwahlnummernkönnen Sie nahezu jeden Aspekt der Funktionsweise Ihres Rasters anpassen.

Lesen Sie auch unseren Leitfaden über: Wie Sie die Zeit auf Ihrem WordPress Blog erhöhen können

Hier sind meiner Meinung nach einige der nützlichsten Funktionen:

  • Einfaches Hinzufügen oder Löschen von Spalten Sie können sogar Spalten hinzufügen, die benutzerdefinierte Felder oder benutzerdefinierte Taxonomien enthalten, und die WooCommerce-Produkttabelle lässt sich vollständig in erweiterte benutzerdefinierte Felder integrieren.
  • 4-Filter-Widgets enthalten. Mit diesen können Sie den Lesern ein nahtloses Erlebnis bieten, indem Sie Filteroptionen in Ihrer Seitenleiste anbieten.
  • Produktvariation / Attributunterstützung. Wählen Sie aus 3 verschiedenen Möglichkeiten, um Produktvarianten in Ihrem Raster anzuzeigen.
  • Mehrfachauswahlfelder. Es erleichtert die Erstellung von Bestellformularen, indem Kunden mehrere Produkte auswählen können, bevor sie sie in ihren Warenkorb legen.
  • Sofortige Suche, Sortieren und Filtern . Kunden können Ihre Rasterdaten bearbeiten, ohne die Seite neu zu laden.
  • In den Warenkorb . Ebenso können Kunden Produkte zu ihren Körben hinzufügen, ohne die Seite neu zu laden.
  • Lazy Load-Unterstützung. Nützlich zur Verbesserung der Leistung von großen Gittern ( Dies wirkt sich jedoch auf die Möglichkeit aus, eine sofortige Sortierung oder Filterung anzubieten )

Hier erfahren Sie, wie Sie dieses Plugin verwenden ...

1-Schritt: Konfigurieren Sie die Standardrasterfunktion

Nach der Installation und Aktivierung des Plugins müssen Sie zunächst die Standardfunktionen für Ihre Grids konfigurieren. Lesen Sie unsere Schritt-für-Schritt-Anleitung zum Installieren eines WordPress-Plugins.

Dies definiert im Wesentlichen das Standardverhalten des Shortcodes. Sie können dieses Verhalten jedoch auch für einzelne Raster ändern, indem Sie dem Shortcode Parameter hinzufügen.

Um auf die Plugin-Einstellungen zuzugreifen, gehen Sie zu WooCommerce → Einstellungen. Klicken Sie dann auf die Registerkarte Produkte und wählen Sie die Option Produkttabellen :

Produktspalten hinzufügen woocommerce wordpress.png

Konfigurieren des Erscheinungsbilds Ihrer Raster

Zunächst können Sie im Abschnitt den Stil Ihres Rasters auswählen Tisch Design. Du kannst es machen mit:

  • Standard - Wie Sie sich vorstellen können, verwendet diese Option die Standardeinstellungen des Plugins, ohne dass Sie weitere Eingriffe vornehmen müssen. Er wird versuchen, das aktuelle Thema Ihres Blogs so weit wie möglich zu verwenden.
  • personnalisé : Wenn diese Option ausgewählt ist, wird eine Liste mit Stiloptionen erweitert, mit denen Sie Schriftfarben und -größen anpassen können, ohne dass dies erforderlich ist Benutzerdefiniertes CSS.

Passen Sie die Produkttabelle css.png an

Nachdem Sie Ihren Stil eingerichtet haben, müssen Sie die Standardeinstellungen für die Kurzwahl konfigurieren. Auch hier können Sie sie für einzelne Kurzwahlen über deren Parameter bearbeiten. Durch das Einrichten sparen Sie jedoch Zeit und können es später etwas einfacher machen.

Konfiguration der Produkttabelle settings.png

Die meisten Einstellungen sind selbsterklärend und Sie sehen, dass WooCommerce Product Table Tooltips oder Dokumentationslinks bereitstellt, mit denen Sie mehr über die einzelnen Einstellungen erfahren.

Sonst noch zu entdecken Wie ein WooCommerce Shop auf Facebook hinzufügen

Nachdem Sie die Standardeinstellungen für Kurzwahlen festgelegt haben, können Sie einen Bildlauf durchführen, um erweiterte Layout- und Funktionseinstellungen zu konfigurieren.

erweiterte Konfiguration von Produkttabellen.png

Auch hier macht das Plugin einen tollen Job; diejenige, die zusätzliche Informationen für einen der Parameter bereitstellt, die möglicherweise etwas schwer zu verstehen sind. 

So steuern Sie den Bestand Ihres WooCommerce-Onlineshops ? Entdecken Sie es, indem Sie auf diesen Link klicken.

Eine Sache, auf die man achten muss, ist die Begrenzung der progressiven Ladung. Wenn Sie sich für das progressive Laden entscheiden, um Ihren Online-Shop zu beschleunigen, werden Sie die Such- und Sortierfunktionen des Plugins einschränken.

Siehe auch unsere Auswahl an 12 besten WooCommerce-Plugins zur Verbesserung Ihres Online-Shops

Stellen Sie nach Abschluss der Konfiguration sicher, dass Sie Ihre Änderungen speichern.

2-Schritt: Hinzufügen von WooCommerce-Raster-Widgets (optional)

Wie bereits erwähnt, bietet die WooCommerce-Produkttabelle außerdem vier Widgets, mit denen Sie Ihrer Seitenleiste Filteroptionen hinzufügen können ( wie Sie es für klassische WooCommerce-Shops können ).

Um darauf zuzugreifen, gehen Sie zu Aussehen → Widgets Wischen Sie wie gewohnt über die gewünschten Widgets:

Widget-Tabelle woocommerce.png

Schritt 3: Fügen Sie einen Shortcode hinzu, in dem Sie Ihr Produktraster anzeigen möchten

Du bist am Ziel! Jetzt müssen Sie nur noch den Shortcode hinzufügen [product_table] wo immer Sie möchten, dass Ihr Raster angezeigt wird.

entdecken Sie auch Wie den Link zur Wordpress Login-Seite zu finden

Standardmäßig funktioniert der Shortcode gemäß den Einstellungen, die Sie in Schritt 1 ausgewählt haben. Wenn Sie jedoch die Funktionalität für bestimmte Shortcodes anpassen möchten, können Sie dies mit der Option tun viele Shortcode-Parameter zur Verfügung.

Um das Raster beispielsweise nur für Produkte einer bestimmten Kategorie zu verwenden, können Sie einen Parameter wie den folgenden hinzufügen:

[product_table Kategorie="Hüte"]

Sie können sogar kreativ sein und die UND / ODER-Bedingungen hier verwenden.

Beispielsweise:

  • [product_table Kategorie= "Hüte + in Stern« ] Zeigt nur Produkte an, die zum gehören Zeit zu den Hutkategorien et in Sternen.
  • Product_table Kategorie= "Hüte in Stern "] zeigt Produkte an, die sind soit Hüte ou die Sternekategorie.

Diese Aufmerksamkeit für kleine Details macht das Raster von WooCommerce-Produkten so großartig. 

Siehe auch unsere 6 WordPress-Plugins, um Ihren Artikeln neues Leben einzuhauchen

Und das ist ungefähr alles, was es mit einem Produktraster auf WooCommerce zu tun gibt!

Preise für Plugins für WooCommerce-Produkttabellen

WooCommerce Product Table ist ausschließlich ein Premium-Plugin. Obwohl im WordPress.org-Verzeichnis einige kostenlose Optionen aufgeführt sind, habe ich keine gefunden, die so flexibel oder gut dokumentiert sind. Daher denke ich, dass die WooCommerce-Produkttabelle den Preis wert ist, der ...

Für die 1-Website - 75 US-Dollar

Für 5-Sites Netz - 135 US-Dollar

Für 20-Websites - 275 US-Dollar

Entdecken Sie auch einige Premium-WordPress-Plugins  

Sie können andere verwenden Wordpress-Plugins um ein modernes Erscheinungsbild zu geben und die Handhabung Ihres Blogs oder Ihrer Website zu optimieren.

Wir bieten Ihnen hier einige Premium-WordPress-Plugins an, die Ihnen dabei helfen werden.

1. HBook

HBook ist ein WordPress-Plugin mit dem Sie ganz einfach eine Online-Reservierungslösung auf Ihrer Website erstellen können.

Hbuch

Es ist perfekt für alle geeignet, die ein Geschäft in der Hotelbranche haben (Hotels, Ferienwohnungen, Camping usw.).

Entdecken Sie auch unsere 5 WordPress-Plugins zum Teilen des Inhalts Ihres Blogs

durch WordPress Plugin HBook können Sie Verfügbarkeitskalender, Preislisten und Buchungsformulare in Sekundenschnelle zu Ihrer Website hinzufügen.

Herunterladen | Demo | Web-Hosting 

2. WooCommerce Tabs Pro: Zusätzliche Registerkarten für die Produktseite

Ce WordPress Plugin bietet Ihnen unbegrenzt zusätzliche Registerkarten auf der Produktseite.Extra Tabs-Produkt-Seite-Wordpress-Plugin-zu-Seite-builder

Seine Hauptmerkmale sind: die Möglichkeit von Ändern Sie den Titel der Registerkarten, a Editor zum Bearbeiten von benutzerdefinierten Inhalten, der pMöglichkeit des Fixierens von Tabs oder nicht, die Wahl von Symbole für Registerkarten, einfache Entfernung Registerkarten, die pAnpassung der Position von Registerkarten auf der öffentlichen Oberfläche, zmehr ...

Herunterladen | Demo | Web-Hosting

Mit diesem WooCommerce-Plugin können Ihre Partner Kreditpunkte sammeln, wenn ihre Abonnenten Ihre Produkte in Ihrem vorhandenen Online-Shop kaufen.

Woocommerce Multilevel-Empfehlungs-Plugin

Zu den Funktionen gehören: Konfiguration eines personalisierten Kredit- und Einlösungslimits, vollständige Verwaltungsberichte für registrierte Benutzer, Verwaltung globaler oder produktspezifischer Parameter, Unterstützung von Shortcodesund viele mehr.

entdecken Sie auch So fügen Sie Ihrem globalen Header ein Dropdown-Kontaktformular hinzu

Es handelt sich um ein mehrstufiges WooCommerce-Affiliate-System, das außerhalb des typischen Affiliate-Transaktionssystems liegt.

Herunterladen | Demo | Web-Hosting

Andere empfohlene Ressourcen

Wir laden Sie außerdem ein, die unten aufgeführten Ressourcen zu konsultieren, um die Kontrolle und Kontrolle Ihrer Website und Ihres Blogs zu verbessern.

Zusammenfassung

Das war's Das war's für dieses Tutorial. Ich hoffe, Sie können WooCommerce-Produktgitter auf WordPress erstellen. Zögere nicht zu Teilen Sie den Tipp mit Ihren Freunden in Ihren sozialen Netzwerken.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung.

Aber erzählen Sie uns in der Zwischenzeit von Ihrem commentaires und Vorschläge im entsprechenden Abschnitt.

...