Wie füge ich ein Grid-Produkt in WooCommerce hinzu?

Veröffentlicht: 2024-10-05

Das Hinzufügen eines Rasterproduktlayouts an einer beliebigen Stelle in Ihrem WooCommerce-Shop kann das Benutzererlebnis erheblich verbessern, indem es Kunden das Durchsuchen und Erkunden von Produkten auf Ihrer Website erleichtert.

Unabhängig davon, ob Sie es auf der Startseite, auf Produktseiten oder in benutzerdefinierten Abschnitten präsentieren, bietet das Rasterlayout eine optimierte Möglichkeit, Ihre Produkte anzuzeigen und die Sichtbarkeit zu erhöhen.

In diesem Blogbeitrag führe ich Sie durch die Schritte zum Erstellen und Hinzufügen eines WooCommerce-Produktrasters zu einer beliebigen Seite Ihrer Website.

Warum ein Grid-Produkt in WooCommerce hinzufügen?

Standardmäßig zeigt WooCommerce Rasterprodukte im Shop-Bereich an, aber das Hinzufügen eines Rasterprodukts zu anderen Teilen Ihrer Website kann das Engagement steigern und die Conversions steigern.

Durch die Platzierung dieses Grid-Produkts auf Ihrer Homepage, Ihren Landingpages oder in Ihren Blogbeiträgen wird es für Besucher einfacher, verschiedene Grid-Produkte zu entdecken und zu erkunden, und sie werden dazu angeregt, effizienter zu stöbern und Einkäufe zu tätigen.

Wie füge ich ein Grid-Produkt in WooCommerce hinzu?

Das Hinzufügen eines Grid-Produkts ist mit dem Elemento Addon für Elementor ganz einfach. Mit diesem leistungsstarken Tool können Sie dynamische und ansprechende Slider für Ihren WooCommerce-Shop erstellen und so die Produkterkennung und das Benutzererlebnis verbessern.

Elemento ADD

Über das Elemento-Addon für Elementor:

Das Elemento Addon für Elementor ist ein vielseitiges Plugin, mit dem Sie schöne und funktionale WooCommerce-Bereiche erstellen können.

Es bietet eine Vielzahl von Widgets, einschließlich des Grid-Produkts, mit denen Sie das Produkt mühelos überall auf Ihrer Website präsentieren können.

Wie füge ich ein Grid-Produkt in WooCommerce hinzu?

Inhaltsverzeichnis

Umschalten

Schritt 1: WooCommerce und Elementor installieren und aktivieren

Stellen Sie sicher, dass WooCommerce und Elementor auf Ihrer WordPress-Website installiert und aktiviert sind.

woocommerce 1
elementor

Wenn Sie sie noch nicht installiert haben, navigieren Sie zu Plugins > Neu hinzufügen , suchen Sie nach „WooCommerce“ oder „Elementor“ und klicken Sie auf Jetzt installieren und anschließend auf Aktivieren .

Schritt 2: Installieren und aktivieren Sie das Elemento Addons Plugin

Laden Sie das Elemento Addons -Plugin von ThemeHunk herunter.

add new plugin

Gehen Sie in Ihrem WordPress-Dashboard zu Plugins > Neu hinzufügen .

Upload Plugin

Klicken Sie auf die Schaltfläche „Plugin hochladen“ und wählen Sie dann die heruntergeladene ZIP-Datei aus.

activate plugin 1 1

Schritt 3: Erstellen Sie eine neue Seite mit Elementor

Add new pages 1

Um eine neue Seite zu erstellen, navigieren Sie zum Abschnitt „Seiten“ und klicken Sie auf „Neu hinzufügen“ . Wenn Sie Änderungen vornehmen müssen, können Sie auch eine vorhandene Seite zum Bearbeiten auswählen.

Darüber hinaus können Sie nahtlos ein Grid-Produkt zu jeder Seite hinzufügen, um Ihre Produkte in einem organisierten Layout zu präsentieren.

Grid product edit with elementor

Wählen Sie „Mit Elementor bearbeiten“, um den Elementor-Seitenersteller zu starten.

sider 1

Auf der linken Seite finden Sie das Panel, in dem Sie durch Herunterscrollen auf das Add-on zugreifen können.

Schritt 5: Grid-Produkt-Add-on suchen und hinzufügen.

grid product 1

Suchen Sie im Elementor-Bedienfeld nach „Grid Product“ (dieses Widget ist in Elemento Addons verfügbar).

Ziehen Sie das Grid-Produkt -Widget per Drag-and-Drop in den von Ihnen erstellten Abschnitt.

Schritt 6: Passen Sie das Grid-Produkt an.

Edit Grid product with Elementor 1

Sobald das Widget hinzugefügt wurde, sehen Sie im linken Bereich eine Reihe von Anpassungsoptionen.

Wählen Sie auf der Registerkarte „Inhalt“ die spezifischen WooCommerce-Produktkategorien aus, die Sie im Raster präsentieren möchten.

Sie können die Anzahl der pro Zeile angezeigten Produkte anpassen, die Layouteinstellungen ändern und die Geschwindigkeit des Schiebereglers auf den Registerkarten „Layout“ , „Anzahl der anzuzeigenden Produkte“, „Anzahl der Spalten“ und „Stil “ anpassen.

Schritt 7: Veröffentlichen und Vorschau

grid poduct publish

Nachdem Sie die Einrichtung abgeschlossen haben, klicken Sie auf „Veröffentlichen“, um live zu gehen.

grid product preview

Das Grid-Produkt wird nun auf der neu erstellten Seite angezeigt.

FAQ:

F: Welchen Vorteil bietet die Verwendung eines Produktrasterlayouts in WooCommerce?

Antwort: Ein Produktraster-Layout verbessert die Produktorganisation und macht es für Kunden einfacher, zu suchen und zu finden, wonach sie suchen. Es verbessert auch die allgemeine optische Attraktivität Ihres Geschäfts und kann das Engagement steigern, was zu höheren Umsätzen führt.

F: Ist es möglich, meiner Homepage ein Produktraster hinzuzufügen?

Antwort: Auf jeden Fall! Mit dem Elemento-Add-on können Sie mithilfe der Seitenerstellungsoberfläche ganz einfach ein Produktraster oder ein anderes Produktpräsentationselement zu Ihrer Homepage hinzufügen.

F: Kann ich das Rasterlayout für mobile Benutzer anpassen?

Antwort: Ja, mit Elementor können Sie das Erscheinungsbild Ihres Produktrasters für verschiedene Bildschirmgrößen, einschließlich mobiler Geräte, vollständig anpassen. Sie können die Anzahl der Spalten, den Abstand und das Layout speziell für mobile Benutzer anpassen.

Abschluss

Das Hinzufügen eines Rasterproduktlayouts zu Ihrem WooCommerce-Shop ist eine großartige Möglichkeit, das Benutzererlebnis zu verbessern, die Produktsichtbarkeit zu erhöhen und die Conversions zu steigern.

Mit dem Elementor Addon-Plugin ist die Erstellung einer ansprechenden und optisch ansprechenden Rasteranzeige einfach und effizient.

Indem Sie Ihre Produkte in einem strukturierten Rasterformat präsentieren, erleichtern Sie Kunden das Durchsuchen Ihrer Angebote, fördern so mehr Interaktion und steigern den Umsatz auf Ihrer Website.

Wenn dieser Artikel hilfreich war, können Sie ihn gerne mit anderen teilen. Haben Sie Fragen? Hinterlassen Sie unten einen Kommentar und wir helfen Ihnen gerne weiter. Danke fürs Lesen!

Bitte abonnieren Sie unseren YouTube-Kanal , wir laden dort auch tolle Inhalte hoch und folgen Sie uns auch auf Facebook und Twitter

Weitere hilfreiche Lektüre:

  • Elemento-Add-ons für Elementor zur Verbesserung Ihres Website-Design-Erlebnisses
  • So beheben Sie „Aktualisierung fehlgeschlagen. „Die Antwort ist keine gültige JSON-Antwort“ in WordPress
  • So machen Sie den Hochleistungs-Auftragsspeicher des WooCommerce-Plugins kompatibel