Möchten Sie erfahren, wie Sie eine personalisierte Shop-Seite erstellen? WooCommerce mit Elementor?
Wie Sie vielleicht wissen, verfügt Elementor Pro über eine Builder-Funktion WooCommerce so dass Sie Erstelle eine Website des personalisierten E-Commerce mit WooCommerce ohne Codierung. 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 yoursite.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 und 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.
Es 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
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.
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.
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 Design 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,
- Box
In diesem Zusammenhang bezieht sich Box auf den Behälter jedes Produkts. Du kannst den Block öffnen Box 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 Design 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, die Elementor Pro bietet. Es erlaubt Ihnen Erstelle eine Website personalisierte und einzigartige E-Commerce-Plattform mit WooCommerce und ohne Codierung. Keine Notwendigkeit, a zu installieren Wordpress-Theme die behauptet, für WooCommerce entwickelt zu werden. 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
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!
Zusammenfassung
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.
...
