Produkte in Elementor mit der WooCommerce-Produkttabelle auflisten

In diesem Beitrag zeigen wir Ihnen, wie Sie Elementor und WC Product Table kombinieren, um eine individuellere WordPress-Site zu erstellen und gleichzeitig den Umsatz Ihres WooCommerce-Shops zu steigern.

WordPress vereinfacht den Prozess der Erstellung einer Website und deren schnelle Inbetriebnahme. WooCommerce ist ein WordPress- plugin , mit dem Sie jede WordPress-Website in einen voll funktionsfähigen Online-Shop verwandeln können. Sie laufen Gefahr, eine Nachahmer-Site zu erstellen. Wenn Sie jedoch mit ihren Standardoptionen und -funktionen fortfahren, ist dies möglicherweise nicht für Ihre Geschäftsanforderungen geeignet. Es ist wichtig, die besten Tools zum Entwerfen und Anpassen Ihrer Website zu finden, bis sie Ihren Wünschen entsprechen.

Viele Wordpress und WooCommerce plugin s zur Verfügung Ihres Shops Funktionalität zu verbessern - Elementor, für ex amp le, ist das einfachste Werkzeug für Ihre WooCommerce Produktseite anpassen. Obwohl es einer der wichtigsten Vorteile ist, hat es auch einige erhebliche Nachteile. Für plugin Ex amp le, wenn Sie kombinieren Wordpress plugin s von verschiedenen Autoren, Ihnen die Möglichkeit der Begegnung Kompatibilitätsfehler und anderen Komplikationen führen; Dies ist nicht der Fall, wenn Sie die WooCommerce-Produkttabelle und Elementor- plugin für WordPress-Websites verwenden. Wenn Sie eines dieser plugin , haben Sie eine größere Kontrolle über das Erscheinungsbild und die Funktionalität Ihrer Website und können zusammen verwendet werden, um noch bessere Ergebnisse zu erzielen.

Ein kurzer Überblick über die WooCommerce-Produkttabelle und die Elementor-Frameworks

Wie bereits erwähnt, steht Ihnen eine große Auswahl an WordPress- plugin Verfügung, die Sie bei der Erstellung einer besseren WordPress-Site unterstützen, die auf Ihre spezifischen Anforderungen zugeschnitten ist. Einige plugin sind für den großen Einsatz konzipiert, während andere einen bestimmten Aspekt oder eine bestimmte Funktion hinzufügen.

Elementor ist ein Ex - amp le der ersten Art der Anwendung:

Unser Page Builder plugin bietet Ihnen eine völlig neue Oberfläche zum Erstellen von Webseiten und Erstellen Ihrer WordPress-Website. Sie erhalten viel Kontrolle über die Zusammenstellung Ihrer Website, indem Sie aus einer umfangreichen Bibliothek mit Widgets, Blöcken und Layouts auswählen und diese anpassen.

Während die WooCommerce-Produkttabelle eine allgemeinere Lösung ist, ist sie auch zielgerichteter:

Mit diesem plugin können Sie dynamische, vollständig anpassbare Tabellen erstellen, die Ihre WooCommerce-Produkte und -Dienste auflisten. Aufgrund ihrer Interaktion mit WooCommerce eignen sich diese Tabellen jedoch besonders gut, um Artikel und Dienstleistungen für Online-Shopper benutzerfreundlich und optisch ansprechend darzustellen. Das Posts Table Pro- plugin interagiert gleichermaßen mit Elementor und listet jeden WordPress-Inhaltstyp in einer Tabelle anstelle von einfachen WooCommerce-Produkten auf (wenn Sie etwas anderes als Produkte anzeigen möchten – wie Beiträge, Seiten oder Dokumente), kann stattdessen verwendet werden.

In Verbindung miteinander bieten Elementor und WooCommerce Product Table erheblich unterschiedliche Funktionen. Sie können sie verwenden, um einige sehr bedeutende Auswirkungen zu erzielen, die dazu beitragen, die Anzahl der Verkäufe für Ihren WooCommerce-Shop zu erhöhen.

Jetzt ist es an der Zeit, zur Sache zu kommen. In den folgenden Abschnitten werden wir irgend realen Welt ex aussehen amp les, wie Sie die WooCommerce Produkttabelle und Elementor nutzen können ähnliche Effekte wie oben gezeigt zu erstellen.

Wenn es um die Kombination dieser beiden plugin , sind keine Grenzen gesetzt – und dies sind nur einige der Möglichkeiten. Mit ein wenig Versuch und Irrtum können Sie verschiedene Seiten mit dem gleichen grundlegenden Ansatz zusammenstellen, den wir Ihnen zeigen werden.

In erster Linie sollten Sie sicherstellen, dass beide plugin korrekt auf Ihrer Site installiert sind. Es ist gut, dass die Installation von Elementor und die Konfiguration der WooCommerce-Produkttabelle schmerzlos und unkompliziert ist. WooCommerce selbst muss ebenfalls installiert und aktiviert sein, bevor Sie mit diesem Schritt fortfahren können. Dann sind Sie bereit, an Ihrem Projekt zu arbeiten.

Um eine WooCommerce-Produkttabelle in einen Texteditor oder ein Shortcode-Widget einzubinden, führen Sie diese Schritte aus:

Beginnen wir mit der grundlegendsten und nützlichsten Anwendung, die möglich ist. Wenn Sie alternativ einfach eine dynamische Produkttabelle auf Ihrer Elementor-Website verwenden möchten, können Sie sie einem Widget hinzufügen und im Frontend der Website anzeigen lassen.

Stellen Sie sicher, dass Sie den Elementor-Editor verwenden, wenn Sie eine Seite oder einen Beitrag öffnen, um dies zu erreichen. Wenn Ihnen die vertraute WordPress-Benutzeroberfläche angezeigt wird, klicken Sie auf die Schaltfläche Mit Elementor bearbeiten, um zur Elementor-Benutzeroberfläche zu wechseln:

Wenn Sie zum ersten Mal mit Elementor arbeiten, machen wir einen kleinen Rundgang über die Plattform. Auf der rechten Seite wird ein großer Bereich angezeigt, in dem Ihre Inhalte angezeigt werden, und sie werden in Echtzeit aktualisiert, wenn Sie sie hinzufügen und ändern. Auf der linken Seite des Bildschirms befindet sich eine Liste von 'Widgets', die Sie in den vorgesehenen Bereich ziehen und dann nach Bedarf neu organisieren und konfigurieren können:

Eine Produkttabelle kann mit einer Vielzahl verschiedener Elementor-Widgets verwendet werden. Wenn Sie jedoch nur eine einzelne Produkttabelle auf einer Seite anzeigen möchten, können Sie dies erreichen, indem Sie einen einleitenden Textabschnitt in den HTML-Code der Seite einfügen. Nehmen Sie das Texteditor-Widget auf und verschieben Sie es wie folgt an eine leere Stelle:

Danach können Sie in das Widget klicken, um den Standardtext zu entfernen und durch den gewünschten Inhalt zu ersetzen. Wenn es um die Produkttabelle selbst geht, können Sie sie einfügen, indem Sie diesen einfachen Shortcode einfügen:

[Produkttabelle]

Wenn Sie den Shortcode in Ihre Seite einfügen, wird die Tabelle an der von Ihnen angegebenen Position angezeigt, die Sie überprüfen können, indem Sie sie im Frontend anzeigen:

Wenn Sie ein Element nur für den Code selbst verwenden möchten, können Sie das Shortcode-Widget verwenden.

Vergessen Sie nie, die Seite zu speichern, wenn Sie mit der Positionierung der Tabelle fertig sind, egal wo Sie sie platzieren möchten. Danach möchten Sie wahrscheinlich einige Änderungen an der Darstellung und Funktionsweise der Tabelle vornehmen.

Kehren Sie zu Ihrem WordPress-Dashboard zurück und navigieren Sie zur Registerkarte WooCommerce > Einstellungen, um diese Aufgabe abzuschließen. Produkttabellen finden Sie, indem Sie oben auf dem Bildschirm Produkte und dann Produkttabellen auswählen:

Eine ausführliche Liste mit Optionen zum Konfigurieren Ihrer WooCommerce-Produkttabelle finden Sie hier. Sie haben die vollständige Kontrolle über die in der Tabelle angezeigten Informationen und können sie unter anderem durch Hinzufügen von Filtern und Variablen anpassen. Weitere Informationen zu den verschiedenen Optionen finden Sie in der Dokumentation des plugin .

Sie können die soeben erstellte Produkttabelle mit Elementor ändern, ohne etwas anderes tun zu müssen. Nachdem Sie die Tabelle an Ihre Spezifikationen angepasst haben, speichern Sie einfach Ihre Änderungen und schon können Sie loslegen!

Akkordeons, Registerkarten und Umschalter können verwendet werden, um mehrere Produkttabellen zu organisieren.

Die obige Lösung funktioniert gut, wenn Sie eine einzelne Tabelle mit Ihren WooCommerce-Produkten präsentieren möchten. Wenn Sie viele Tabellen erstellen möchten, von denen jede eine andere Objektkategorie hat, ist dies nicht die beste Option.

Es gibt verschiedene Möglichkeiten, dies in Elementor zu erreichen. Das Akkordeon - Widget, für ex amp le, kann den gleichen Effekt zu erzeugen , verwendet wird , dass wir in der letzten Fallstudie sahen. Verschieben Sie ausgehend vom rechten Bearbeitungsbereich das Akkordeon-Widget in den linken Bearbeitungsbereich.

Sie können beliebig viele separate Registerkarten erstellen, indem Sie auf die Pluszeichen klicken, und Sie können die Überschriften und den Text innerhalb jeder Registerkarte anpassen. Darüber hinaus können Sie einer oder mehreren Registerkarten eine Produkttabelle hinzufügen, indem Sie denselben Shortcode wie zuvor erwähnt verwenden.

Natürlich führt das einfache Hinzufügen des Basis-Shortcodes zu einer Reihe ähnlicher Produkttabellen, was höchstwahrscheinlich nicht das ist, wonach Sie ursprünglich gesucht haben. Stattdessen müssen Sie jeden Shortcode anpassen nur bestimmte Produkte angezeigt werden - für die Ex - amp le, Artikel aus einer bestimmten Kategorie - statt alle Produkte.

Die von Ihnen verwendete Methode wird durch die Produkte bestimmt, die Sie in die jeweilige Tabelle aufnehmen oder auslassen möchten. Weitere Informationen finden Sie in der vollständigen Anleitung zum Anpassen Ihrer WooCommerce-Produkttabellen-Shortcodes.

Es ist erwähnenswert, dass Sie mit Hilfe einiger anderer hilfreicher Elementor-Widgets einen ähnlichen Effekt erzielen können. diese umfasst unter anderem das Toggle-Widget und das Tabs-Widget. Um mehrere WooCommerce-Produkttabellen ansprechend und übersichtlich zu präsentieren, ist Elementor Ihr Werkzeug der Wahl.

Bereinigen Sie Ihr schlampiges Markup dank der kostenlosen Online-HTML-, CSS- und JavaScript-Organizer!

Denken Sie gründlich über das Design Ihrer E-Commerce-Website nach, wenn Sie möchten, dass sich Ihr Unternehmen von der Konkurrenz abhebt. Für die Ex - amp le, möchten Sie die effektivste Art und Weise der Präsentation Ihrer Produkte, idealerweise in einem Stil bestimmen , die für das Auge sowohl benutzerfreundlich und optisch ansprechend ist.

Glücklicherweise macht die Verwendung des WooCommerce-Produkttabellen- plugin mit Elementor dies zu einer einfachen Aufgabe. Ihr Produkttabellen-Shortcode kann verwendet werden, um alles, was Ihre Website zu bieten hat (oder nur eine Auswahl), auf wirklich dynamische Weise anzuzeigen.

Hinterlasse einen Kommentar

Deine Email-Adresse wird nicht veröffentlicht. Pflichtfelder sind markiert *