Springe zum Hauptinhalt

So erstellen Sie eine benutzerdefinierte Seite eines WooCommerce-Shops mit Elementor

Divi: das am einfachsten zu verwendende WordPress-Theme

Divi: Das beste WordPress-Theme aller Zeiten!

Mehr 901.000 Downloads, Divi ist das beliebteste WordPress-Theme der Welt. Es ist vollständig, einfach zu bedienen und enthält mehr als 62-freie Vorlagen. [Empfohlen]

Möchten Sie lernen, wie Sie mit Elementor eine benutzerdefinierte Seite für einen WooCommerce-Shop erstellen?

Wie Sie vielleicht wissen, enthält Elementor Pro eine WooCommerce-Builder-Funktion, mit der Sie eine benutzerdefinierte E-Commerce-Website mit WooCommerce ohne Codierung erstellen können. Mit dieser Funktion können Sie benutzerdefinierte WooCommerce-Seiten mit dem visuellen Editor von Elementor erstellen, der eine intuitive Benutzeroberfläche bietet.

Siehe auch: So installieren Sie Elementor auf WordPress

Zum Zeitpunkt der Erstellung dieses Artikels können Sie benutzerdefinierte Seiten für die Store-Seite, die Produktseite und die Produktarchivseiten (Tags und Kategorien) erstellen. In Kürze werden Sie auch benutzerdefinierte Seiten für die Checkout-Seite und die Warenkorbseite erstellen können.

In diesem Artikel zeigen wir Ihnen, wie Sie mit der WooCommerce-Builder-Funktion von Elementor Pro eine benutzerdefinierte WooCommerce-Shop-Seite erstellen.

Die Shop-Seite selbst ist eine der Standardseiten in WooCommerce. Diese Seite dient als Schaufenster, um Ihre Produkte zu präsentieren. Sie können auf diese Seite zugreifen, indem Sie auf votresite.com/store. Standardmäßig zeigt die WooCommerce-Shop-Seite nur WooCommerce-Produkte an.

Indem Sie mit Elementor Pro eine benutzerdefinierte Store-Seite erstellen, können Sie Elemente hinzufügen, um Ihre Storefront attraktiver zu machen.

So erstellen Sie eine benutzerdefinierte Seite eines WooCommerce-Shops mit Elementor

Es gibt mindestens zwei Elementor-Widgets, mit denen Sie eine benutzerdefinierte Seite eines WooCommerce-Shops erstellen können: Produkte archivieren . Produkte.

In diesem Beispiel verwenden wir letzteres.

Die Funktion des Widgets Produkte ist dem des Widgets ziemlich ähnlich Beiträge. Der Unterschied besteht darin, dass das Widget „Produkte“ zum Anzeigen von WooCommerce-Produkten verwendet wird, während das Widget „Beiträge“ zum Anzeigen von Blogbeiträgen verwendet wird.

Lesen Sie auch: So importieren oder exportieren Sie Modelle in Elementor

Bitte beachte, dass du das Produkte-Widget nur finden kannst, wenn das WooCommerce-Plugin installiert und aktiviert ist.

Um mit Elementor Pro eine benutzerdefinierte WooCommerce-Shop-Seite zu erstellen, gehen Sie zu zuerst à Vorlagen -> Theme Builder auf Ihrem WordPress-Dashboard. Klicken Sie auf die Registerkarte Produkte Archiv der Theme Builder-Seite und klicken Sie dann auf die Schaltfläche ajouter ein PRODUKTARCHIV.

Gib deinem Modell einen Namen und klicke auf den Button EIN MODELL ERSTELLEN.

Erstellen Sie ganz einfach Ihre Website mit Elementor

Mit Elementor können Sie auf einfache Weise jedes Website-Design mit einem professionellen Look erstellen. Zahlen Sie nicht mehr teuer für das, was Sie selbst tun können. [Kostenlos]

So erstellen Sie eine benutzerdefinierte Seite für einen WooCommerce-Shop mit ElementorEs gibt drei benutzerdefinierte Shop-Seitenvorlagen, aus denen Sie wählen können, falls Sie die benutzerdefinierte Shop-Seite aus einer Vorlage erstellen möchten. Wenn Sie die benutzerdefinierte Shop-Seite von Grund auf neu erstellen möchten, können Sie einfach die Vorlagenbibliothek schließen.

Siehe auch: So verwenden Sie den Color Sampler in Elementor

In diesem Beispiel erstellen wir die benutzerdefinierte Store-Seite von Grund auf neu. Wie oben erwähnt, verwenden wir das Produkte-Widget, um die Produkte anzuzeigen.

Bevor Sie das Produkt-Widget zum Bearbeitungsfeld hinzufügen, können Sie das Layout definieren, indem Sie Abschnitte und Spalten hinzufügen. Sobald das Layout fertig ist, können Sie das Produkte-Widget einfach in das Bearbeitungsfeld ziehen.

Wie Sie sehen können, lädt das Produkte-Widget automatisch die neuesten WooCommerce-Produkte und zeigt sie an. Sie können die Abfrage ändern, indem Sie den Block öffnen Anfrage unter der Registerkarte Inhalt aus dem Einstellungsfeld. Es stehen fünf Optionen zur Auswahl:

  • Aktuelle Abfrage - Aktuelle Abfrage
  • Neueste Produkte - Neueste Produkte
  • Verkauf - Verkauf
  • Vorgestellt - Vorgestellt
  • Manuelle Auswahl - Manuelle Auswahl

Sie können auch die Reihenfolge festlegen, in der die Produkte angezeigt werden oder bestimmte ausschließen

So erstellen Sie eine benutzerdefinierte Seite für einen WooCommerce-Shop mit Elementor

Um die Anzahl der Spalten und Zeilen einzustellen, können Sie den Block öffnen Inhalt unter der Registerkarte Inhalt. Von diesem Block aus können Sie auch die Pagination.

Sie können mit dem Einstellungsfeld herumspielen, bis Sie die besten Einstellungen für das Produkt-Widget erhalten haben. Sobald Sie mit dem Produkt-Widget fertig sind, können Sie Ihrer Seite weitere Widgets hinzufügen.

Suchst du nach den besten WordPress Themes und Plugins?

Laden Sie die besten Plugins und WordPress-Themes auf Envato herunter und erstellen Sie ganz einfach Ihre Website. Schon mehr als 49.720.000 Downloads. [EXCLUSIVE]

Lesen Sie auch: So verwenden Sie den Farbwähler in Elementor

Sobald Sie mit der Bearbeitung der Seite fertig sind, können Sie auf die Schaltfläche klicken VERÖFFENTLICHUNG unten im Einstellungsfenster.

Fügen Sie eine Anzeigebedingung hinzu, indem Sie auf die Schaltfläche klicken eine Bedingung hinzufügen. Da Sie eine benutzerdefinierte Store-Seite erstellen möchten, wählen Sie die Option Shop Seite. Klicken Sie auf die Schaltfläche SPEICHERN & SCHLIESSEN um die Änderung zu speichern.

So erstellen Sie eine benutzerdefinierte Seite für einen WooCommerce-Shop mit Elementor

Bisher haben Sie mit Elementor Pro erfolgreich die benutzerdefinierte WooCommerce-Shop-Seite erstellt. Du kannst gehen auf Ihrer Website.com/store um das Ergebnis zu überprüfen.

Passen Sie das Produkt-Widget an

Bevor Sie Ihre Seite veröffentlichen, können Sie das Produkte-Widget anpassen, um es attraktiver zu machen. Klicken Sie dazu im Bearbeitungsfeld auf das Widget und navigieren Sie zum Reiter Stil aus dem Einstellungsfeld. Es gibt vier Blöcke, die Sie wie folgt öffnen können:

  • Produkte

Sie können diesen Block öffnen, um die Lücke zwischen Spalten und Zeilen zu definieren. Von diesem Block aus können Sie auch die Typografie (Schriftfamilie, Schriftgröße usw.) sowie die Textfarbe von Produktelementen wie Produkttitel, Produktpreis, Produktbewertung, Produkt usw. einstellen. Sie können auch den Rand des Produktbilds festlegen,

  • www.hamvenezuela.com/shop

In diesem Zusammenhang bezieht sich Box auf den Behälter jedes Produkts. Du kannst den Block öffnen www.hamvenezuela.com/shop um die Randbreite des Containers, den Randradius, Schatten der Kiste, die Hintergrundfarbe, die Rahmenfarbe usw.

  • Paginierung

Wenn Sie die Option aktivieren Paginierung Von dem Block Inhalt, du kannst den block öffnen Paginierung unter der Registerkarte Stil um die Paginierung anzupassen. Sie können Dinge wie Abstände, Rahmenfarbe, Hintergrundfarbe usw. einstellen.

Sie können auch für jeden Zustand (normal, zeigend und aktiv) unterschiedliche Parameter definieren.

  • Flash-Räume

Wenn Sie ein neues Produkt in WooCommerce hinzufügen, können Sie ein Verkaufspreisattribut festlegen, um Ihren Besuchern anzuzeigen, dass das zugehörige Produkt rabattiert ist. Um dies hervorzuheben, können Sie das Sale-Attribut auf der Shop-Seite anzeigen, damit reduzierte Produkte ein Sale-Badge haben.

Du kannst den Block öffnen Flash-Räume um das Verkaufsabzeichen zu personalisieren. Sie können Elemente wie Textfarbe, Hintergrundfarbe, Typografie, Randradius, Größe (Breite und Höhe), Abstand usw. definieren.

Am Ende

WooCommerce Builder ist eine der Funktionen von Elementor Pro. Es ermöglicht Ihnen, eine personalisierte und einzigartige E-Commerce-Website mit WooCommerce und ohne Codierung zu erstellen. Sie müssen kein WordPress-Theme installieren, das behauptet, für WooCommerce entwickelt zu sein. Stattdessen können Sie mit dem visuellen Editor von Elementor selbst benutzerdefinierte WooCommerce-Seiten erstellen.

Lesen Sie auch: So fügen Sie einen Teiler hinzu, um einen Abschnitt in Elementor zu erstellen

Erstellen Sie einfach Ihren Online-Shop

Laden Sie kostenlos WooCommerce herunter, die besten E-Commerce-Plugins, um Ihre physischen und digitalen Produkte auf WordPress zu verkaufen. [Empfohlen]

Bis Version 3.2.2 können Sie mit Elementor Pro nur eine benutzerdefinierte Shop-Seite, eine benutzerdefinierte einzelne Produktseite und benutzerdefinierte Produktarchivseiten erstellen. Elementor kündigte jedoch an, dass Sie in der nächsten Version von Elementor Pro auch eine benutzerdefinierte Warenkorbseite, eine benutzerdefinierte Checkout-Seite und eine benutzerdefinierte Kundenkontoseite erstellen können.

Holen Sie sich jetzt Elementor Pro!

Fazit

Hier ! Das war's für diesen Artikel, der Ihnen zeigt, wie Sie mit Elementor eine benutzerdefinierte Seite für einen WooCommerce-Shop erstellen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, flass es uns wissen im commentaires.

Sie können sich aber auch beraten 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 oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...

Dieser Artikel enthält Kommentare 0

Hinterlassen Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Zurück nach oben