{"id":370872,"date":"2022-11-20T18:03:00","date_gmt":"2022-11-20T15:03:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=370872"},"modified":"2023-04-11T15:28:10","modified_gmt":"2023-04-11T12:28:10","slug":"so-erstellen-sie-ihre-eigene-elementor-woocommerce-shop-seite","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/so-erstellen-sie-ihre-eigene-elementor-woocommerce-shop-seite\/","title":{"rendered":"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite"},"content":{"rendered":"\n<p>In der Online-Welt werden Sie im Handumdrehen zum Shop-Inhaber. Alles, was Sie zum Starten brauchen, ist eine Internetverbindung, ein Laptop und eine lukrative Gesch\u00e4ftsidee. Sie m\u00fcssen nicht einmal ein konkretes Produkt haben \u2013 Sie k\u00f6nnen Ideen verkaufen! Spa\u00df beiseite \u2013 <strong>Sie k\u00f6nnen ziemlich einfach einen fantastischen Webshop einrichten, auch wenn Sie keinerlei technische Kenntnisse haben<\/strong>. Sie k\u00f6nnen damit beginnen, ein <a href=\"https:\/\/themewp.inform.click\/de\/40-trendige-e-commerce-wordpress-themes-2022\/\" title=\"hochwertiges WooCommerce\">hochwertiges WooCommerce<\/a> -Thema auszuw\u00e4hlen, da nischenspezifische Themen normalerweise viele praktische und n\u00fctzliche Funktionen enthalten, die Ihr Shop ben\u00f6tigen wird, und dann mit der Erstellung eines Gesch\u00e4ftsplans fortfahren!<\/p>\n<p>Es gibt viele gro\u00dfartige Elemente, die Sie verwenden k\u00f6nnen, um Ihren Webshop erfolgreicher zu machen, und eine ma\u00dfgeschneiderte Shop-Seite von Elementor WooCommerce ist unerl\u00e4sslich.<\/p>\n<p>In diesem Artikel zeigen wir Ihnen, wie Sie m\u00fchelos Ihre eigene, sch\u00f6ne Elementor WooCommerce-Shopseite erstellen. Bleiben Sie dran, um mehr zu lesen \u00fcber:<\/p>\n<h2>WooCommerce Shop-Seiten<\/h2>\n<p>Wir wissen sehr gut, dass die <a href=\"https:\/\/themewp.inform.click\/de\/so-starten-sie-einen-online-shop-im-jahr-2022-ausfuehrliche-anleitung\/\" title=\"Erstellung eines Webshops\">Erstellung eines Webshops<\/a> bestimmte <strong>Elemente umfasst, die erforderlich sind, damit der Benutzer alle relevanten Informationen \u00fcber das Produkt erh\u00e4lt<\/strong>. Jeder Shop wird Seiten haben, die ein Produkt oder eine Produktgruppe auf eine bestimmte Weise pr\u00e4sentieren, und diese gut gestalteten Seiten f\u00fchren Sie einem erfolgreichen Webshop einen Schritt n\u00e4her. Weitere <strong>f\u00fcr den Shop wichtige Seiten sind solche mit Informationen zur Lieferung, Zahlung, zum Unternehmen, Warenkorbseiten<\/strong> und \u00e4hnliches.<\/p>\n<p>Hier besch\u00e4ftigen wir uns mit Seiten, <strong>die Listen der im Shop verf\u00fcgbaren Produkte anzeigen, und wir helfen Ihnen, diese wie ein Profi zu erstellen<\/strong>.<\/p>\n<p>Die Shop-Seite von Elementor WooCommerce ist eine Archivseite, auf der alle Produkte eines Shops angezeigt werden. Sie k\u00f6nnen diese Seite ganz einfach mit dem WooCommerce-Plugin erstellen. Nachdem Sie Ihrer Website Produkte hinzugef\u00fcgt haben, m\u00fcssen Sie die Seite ohne Inhalt \u00f6ffnen und in den WooCommerce-Einstellungen angeben, dass die Seite Ihre Shop-Seite ist.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e47567ab20.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e47567ab20.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p>Was haben wir auf diese Weise? Wir haben WooCommerce dar\u00fcber informiert, dass wir diese Seite der Archivseite f\u00fcr alle Produkte gewidmet haben und WooCommerce sie entsprechend anzeigen wird. Das Styling des Produkts auf dieser Seite h\u00e4ngt weitgehend von dem von Ihnen gew\u00e4hlten Thema ab. <strong>Wenn das Thema f\u00fcr Gesch\u00e4fte geeignet ist, k\u00f6nnen Sie davon ausgehen, dass es sofort gut aussieht und m\u00f6glicherweise \u00fcber einige Filter verf\u00fcgt<\/strong>. Falls dies nicht der Fall ist, gibt es M\u00f6glichkeiten, die WooCommerce-Shopseite mit dem kostenlosen Elementor zu bearbeiten.<\/p>\n<p>Aber was ist, wenn nicht alles perfekt ist und was, wenn etwas repariert werden muss? <strong>Dies schafft ein Problem f\u00fcr diejenigen, die nicht wissen, wie man den Code selbst bearbeitet<\/strong>. Nat\u00fcrlich haben wir eine L\u00f6sung. Wenn Sie aus irgendeinem Grund der Meinung sind, dass die Standardseite unten unangemessen erscheint, zeigen wir Ihnen, wie Sie sie anpassen k\u00f6nnen.<\/p>\n<h2>Verwenden von Qi Addons Widgets f\u00fcr Ihre WooCommerce-Shop-Seite<\/h2>\n<p>Qi-Shop-Widgets als Teil eines Qi-Addons f\u00fcr Elementor sind stilvolle Widgets, die sich perfekt in den Stil Ihrer Website einf\u00fcgen, da <strong>sie sich an das von Ihnen standardm\u00e4\u00dfig verwendete Thema anpassen<\/strong>. Sie bieten jedoch auch <strong>viele Anpassungsoptionen, sodass Sie sie nach Ihren W\u00fcnschen weiter gestalten k\u00f6nnen<\/strong>.<\/p>\n<p>Um die gew\u00fcnschte Shopseite zu erstellen ben\u00f6tigen Sie:<\/p>\n<ul>\n<li>Zur Eingabe der gew\u00fcnschten Produkte (nat\u00fcrlich ggf. deren Kategorien und Tags)<\/li>\n<li>Dazu haben Sie den kostenlosen Elementor Page Builder installiert<\/li>\n<li>Um Qi Addons f\u00fcr Elementor installiert zu haben (wir zeigen Ihnen, was Sie kostenlos tun k\u00f6nnen und was Sie mit Premium-Widgets bekommen k\u00f6nnen).<\/li>\n<\/ul>\n<p>Lassen Sie uns das jetzt erkl\u00e4ren. Nat\u00fcrlich k\u00f6nnen Sie keine Shop-Seite ohne Produkt erstellen, das ist also der erste Schritt. Was Qi Addons angeht, w\u00e4hlen wir es aus mehreren Gr\u00fcnden. Das erste ist, dass es ein <strong>Widget zum Erstellen von Produktlisten<\/strong> hat, und das zweite ist, dass es auch <strong>viele andere n\u00fctzliche Widgets bietet, die Sie auf Ihrer Website verwenden k\u00f6nnen<\/strong>.<\/p>\n<p>Wir werden zuerst eine neue Seite erstellen. Meine wird nur als Beispiel eine benutzerdefinierte Shop-Seite genannt, aber Sie k\u00f6nnen sie einfach einen Shop nennen.<\/p>\n<p>Es wird wie jedes andere hinzugef\u00fcgt. Ich gebe den Seitennamen ein, speichere ihn und gehe zu Bearbeiten mit Elementor. Nat\u00fcrlich kannst du, je nach Theme, bevor du vom Blockeditor zu Elementor wechselst <strong>, grundlegende Einstellungen f\u00fcr die Seite selbst vornehmen<\/strong>. In dem Beispiel verwende ich das <strong>Qi-Theme<\/strong>, das oft meine Wahl ist, da es eine Vielzahl von Einstellungen f\u00fcr verschiedene Teile der Website enth\u00e4lt, was mir viel bedeutet, da ich den Code nicht \u00e4ndern muss und viele Optionen habe zum Gestalten verschiedener Teile der Website.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e475a01ad2.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e475a01ad2.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p>Wenn Sie Elementor betreten, m\u00fcssen Sie zun\u00e4chst Produkt-Widgets finden, indem Sie \u201eSuchen&#8220; in das Suchfeld eingeben. Sie erkennen <strong>Qi-Widgets an ihren inh\u00e4renten roten Symbolen<\/strong>.<\/p>\n<p>Das vielleicht wichtigste f\u00fcr uns ist die <strong>Produktliste<\/strong>, die es uns erm\u00f6glicht, <strong>eine Liste von Produkten anzuzeigen \u2013 alle oder Produkte, die basierend auf bestimmten Kriterien ausgew\u00e4hlt wurden<\/strong>. Dies ist ein kostenloses Widget.<\/p>\n<p>Und vergessen wir die anderen nicht. Die Produktkategorieliste dient dazu, die Kategorien unseres Shops anzuzeigen, sie ist ebenfalls kostenlos. Das Produkt-Slider-Widget bietet eine interessante M\u00f6glichkeit, Produkte mithilfe von Schiebereglern anzuzeigen, es ist au\u00dferdem kostenlos. Der Produktvergleich hilft uns, ausgew\u00e4hlte Produkte anzuzeigen und ihre Eigenschaften zu vergleichen \u2013 dies ist ein Premium-Widget. Falls Sie das Qi-Design verwenden, haben Sie auch Product List Essentials, das eine M\u00f6glichkeit bietet, Produktlisten bestimmter Design-Demos anzuzeigen, sodass wir uns nicht darauf konzentrieren.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e475d325ac.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e475d325ac.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p>Wie ich bereits sagte, ist die <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/product-list\/?campaign=ShopPage&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Produktliste<\/a> das wichtigste Widget f\u00fcr mich und ich f\u00fcge es der Seite hinzu.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e4760684fd.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e4760684fd.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p>Wie Sie bereits wissen, <strong>finden Sie beim Hinzuf\u00fcgen von Widgets auf der Seite links dessen Einstellungen und rechts k\u00f6nnen Sie live sehen, wie das Widget auf Ihrer Seite aussehen wird<\/strong>.<\/p>\n<p>Die Registerkarten \u201eAllgemein&#8220; und \u201eStil&#8220; sind mit dem Widget selbst verkn\u00fcpft, w\u00e4hrend sich die Registerkarte \u201eErweitert&#8220; in den Registerkarteneinstellungen von Elementor befindet und Ihnen bereits vertraut ist, wenn Sie jemals ein Widget zu einer Seite hinzugef\u00fcgt haben. In jedem Fall ist Elementor so einfach zu bedienen, dass Sie keine besonderen Erkl\u00e4rungen ben\u00f6tigen, insbesondere f\u00fcr dieses Widget, bei dem alles intuitiv und einfach zu navigieren ist.<\/p>\n<p>Warum gef\u00e4llt uns das Qi-Addons-Widget? Da wir selbst <strong>bestimmen k\u00f6nnen, wie viele Spalten die Liste haben<\/strong> soll, k\u00f6nnen wir <strong>den Abstand zwischen den Elementen<\/strong> selbst verwalten. Wir k\u00f6nnen <strong>die Gr\u00f6\u00dfe der Bilder bestimmen<\/strong>, wir k\u00f6nnen <strong>w\u00e4hlen, wie viele Produkte auf unserer Seite sein<\/strong> werden, ob wir <strong>Paginierung verwenden<\/strong> und welche Art, wenn wir mehr als eine Produktseite haben. <strong>Auch bei der Auswahl von Schriftarten und Hover-Einstellungen<\/strong> geht Qi ins Detail. Es gibt mehrere Layouts f\u00fcr Listen. Wir k\u00f6nnen auch <strong>nur Produkte einer bestimmten Kategorie, Tag, Autor anzeigen und es stehen verschiedene Anzeigekriterien zur Verf\u00fcgung<\/strong>. Mit Qi wird das Hinzuf\u00fcgen von Widgets oft zu einem freudigen, kreativen Prozess, und wir sind sicher, dass Sie neugierig sein werden, die F\u00fclle der damit verbundenen Optionen selbst zu erkunden.<\/p>\n<p>Auf den ersten Blick auf die Registerkarte Stil werden Sie erstaunt sein, wie detailliert die Einstellungen sind. Sie werden sehen, dass die <strong>Stilisierung in Kategorien unterteilt ist, was die Navigation erleichtert<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476362a2f.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476362a2f.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p>Andere Widgets werden auf die gleiche Weise verwendet. <strong>F\u00fchlen Sie sich frei zu spielen und zu experimentieren, da alle \u00c4nderungen, die Sie vornehmen, in Echtzeit sichtbar sind und Sie jeden Zug leicht r\u00fcckg\u00e4ngig machen k\u00f6nnen<\/strong>.<\/p>\n<p>Sie k\u00f6nnen sich jederzeit auf der Zielseite des Widgets mit dem Autor inspirieren lassen, wenn Sie sich fragen, wie Sie Ihre Liste gestalten sollen, aber spielen Sie noch einmal.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476663bbc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476663bbc.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p>Eine tolle Erg\u00e4nzung zu Ihrer Shop-Seite kann auch das <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/product-slider\/?campaign=ShopPage&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Slider-Widget<\/a> sein. Es kann die <strong>Seite dynamischer und interaktiver aussehen lassen<\/strong>, ein Element, das sich bewegt, zieht immer die Aufmerksamkeit des Benutzers auf sich, besonders wenn er damit interagieren kann.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e47699241d.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e47699241d.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p><strong>Die Kombination des Produktlisten-Widgets und des Produkt-Slider-Widgets kann sehr interessant sein<\/strong>.<\/p>\n<p>Ein weiteres Widget, das ich gerne auf der Shop-Seite und auf anderen verwende, ist die <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/product-category-list\/?campaign=ShopPage&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Produktkategorieliste<\/a>. Es dient dazu <strong>, bestimmte Kategorien auf interessante Weise darzustellen und Benutzern zu helfen, eine Gruppe von Produkten zu erreichen, die sie interessieren<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476c76f20.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476c76f20.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/product-comparison\/?campaign=ShopPage&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Das Produktvergleichs-<\/a> Widget ist auch sehr interessant und n\u00fctzlich, zumal die K\u00e4ufer heutzutage gerne fundierte Entscheidungen \u00fcber den Einkauf treffen und gerne Produkte vergleichen, um sicherzustellen, dass sie die beste Wahl treffen. <a href=\"https:\/\/themewp.inform.click\/de\/so-fuegen-sie-einen-woocommerce-produktvergleich-hinzu\/\" title=\"Das Hinzuf\u00fcgen des WooCommerce-Produktvergleichs\">Das Hinzuf\u00fcgen des WooCommerce-Produktvergleichs<\/a> ist ebenfalls sehr einfach und kann ohne spezielle technische oder Programmierkenntnisse durchgef\u00fchrt werden.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476f33923.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-303892-633e476f33923.jpg\" alt=\"So erstellen Sie Ihre eigene Elementor WooCommerce Shop-Seite\"><\/a><\/p>\n<h2>Abschlie\u00dfend<\/h2>\n<p>Wie Sie sehen k\u00f6nnen, ist das Erstellen einer Elementor WooCommerce Shop-Seite kein Hexenwerk und Sie k\u00f6nnen alles selbst machen. Sie k\u00f6nnen auch ganz einfach lernen, wie Sie die WooCommerce-Shopseite bearbeiten und perfekt an Ihre Bed\u00fcrfnisse anpassen. Sollten Sie Fragen zum Thema dieses Artikels haben, k\u00f6nnen Sie sich gerne im Kommentarbereich an uns wenden. Wir freuen uns auf Ihre Erfahrungen mit Qi Addons f\u00fcr Elementor!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Aufnahmequelle:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Erfahren Sie, wie Sie ganz alleine wie ein Profi eine sch\u00f6ne Elementor WooCommerce-Shopseite erstellen, ohne technische Vorkenntnisse, und steigern Sie Ihren Umsatz!<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[567],"tags":[845],"class_list":["post-370872","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-grundlagen","tag-affiai-de"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/370872","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/comments?post=370872"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/posts\/370872\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/media?parent=370872"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/categories?post=370872"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/de\/wp-json\/wp\/v2\/tags?post=370872"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}