{"id":68415,"date":"2024-01-23T19:18:00","date_gmt":"2024-01-23T18:18:00","guid":{"rendered":"https:\/\/kinqsta.com\/de\/?p=68415&#038;preview=true&#038;preview_id=68415"},"modified":"2024-01-26T09:15:28","modified_gmt":"2024-01-26T08:15:28","slug":"woocommerce-blocke","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/","title":{"rendered":"WooCommerce Bl\u00f6cke: F\u00fcge WooCommerce-Funktionen zu deiner WordPress-Website hinzu"},"content":{"rendered":"<p>Mit WooCommerce Blocks kannst du individuelle Shop-Seiten erstellen, deine Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern und Suchen hinzuf\u00fcgen &#8211; und das alles, ohne eine einzige Zeile Code zu schreiben.<\/p>\n<p>Viele Bl\u00f6cke werden standardm\u00e4\u00dfig mit WooCommerce ausgeliefert, aber einige neue Bl\u00f6cke nicht. Du kannst diese neuen Bl\u00f6cke in deinem WooCommerce-Shop verwenden, indem du das <a href=\"https:\/\/wordpress.org\/plugins\/woo-gutenberg-products-block\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce Blocks WordPress Plugin<\/a> installierst. Dieses Plugin ist ein Testfeld f\u00fcr experimentelle Angebote und potenzielle zuk\u00fcnftige Erg\u00e4nzungen zu den WooCommerce-Bl\u00f6cken.<\/p>\n<p>Die Integration von WooCommerce Blocks in WordPress ist mit Kinsta ganz einfach: Du kannst WooCommerce w\u00e4hrend des Einrichtungsprozesses durch <a href=\"https:\/\/kinqsta.com\/de\/docs\/wordpress-hosting\/wordpress-erste-schritte\/neue-seite\/#install-woocommerce\">Aktivieren eines K\u00e4stchens<\/a> einbinden. Diese Integration erm\u00f6glicht die schnelle und m\u00fchelose Erstellung eines Onlineshops.<\/p>\n<p>In dieser praktischen Anleitung erf\u00e4hrst du, wie du mit den WooCommerce-Bl\u00f6cken WooCommerce-Funktionen zu deiner WordPress-Website hinzuf\u00fcgen kannst.<br \/>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc><\/p>\n<h2>Voraussetzungen<\/h2>\n<p>Um diesem Leitfaden folgen zu k\u00f6nnen, musst du Folgendes mitbringen<\/p>\n<ul>\n<li><a href=\"https:\/\/en-ca.wordpress.org\/plugins\/woocommerce\/\" target=\"_blank\" rel=\"noopener noreferrer\">WooCommerce<\/a> ist in deinem WordPress-Dashboard installiert und aktiviert<\/li>\n<li><a href=\"https:\/\/kinqsta.com\/wordpress\/\">Vertrautheit mit WordPress<\/a><\/li>\n<\/ul>\n<p>Wenn du noch keine WordPress-Website hast, kannst du \u00fcber das Dashboard von Kinsta oder <a href=\"https:\/\/kinqsta.com\/de\/blog\/wordpress-website-offline-erstellen\/\">\u00fcber DevKinsta lokal<\/a> <a href=\"https:\/\/kinqsta.com\/de\/docs\/wordpress-hosting\/wordpress-erste-schritte\/neue-seite\/\">eine WordPress-Website einrichten<\/a>. Sobald du deine Website hast, importiere <a href=\"https:\/\/github.com\/woocommerce\/woocommerce\/blob\/trunk\/plugins\/woocommerce\/sample-data\/sample_products.csv\" target=\"_blank\" rel=\"noopener noreferrer\">die Beispielprodukte<\/a> f\u00fcr deinen WooCommerce-Shop.<\/p>\n<h2>WooCommerce-Bl\u00f6cke erforschen<\/h2>\n<p>Der Standard-Blockeditor von WordPress, der mit Version 5.0 eingef\u00fchrt wurde, ist der <a href=\"https:\/\/kinqsta.com\/de\/blog\/gutenberg-wordpress-editor\/\">Gutenberg-Editor<\/a>. Er hat den klassischen Editor durch ein blockbasiertes System ersetzt, mit dem du visuell ansprechende Inhalte erstellen und anpassen kannst, ohne umfangreiche Kenntnisse im Frontend-Coding zu haben.<\/p>\n<p>WooCommerce Blocks f\u00fcgt sich nahtlos in die intuitive Drag-and-Drop-Oberfl\u00e4che des Gutenberg-Editors ein und bietet eine Reihe spezieller Bl\u00f6cke f\u00fcr die Produktanzeige, die Verwaltung des Warenkorbs, den Checkout-Prozess und vieles mehr.<\/p>\n<p>Dank dieser Integration kannst du die Flexibilit\u00e4t und Einfachheit des Block-Editors voll ausnutzen und deine WordPress-Website f\u00fcr eine optimale E-Commerce-Leistung anpassen.<\/p>\n<p>Um WooCommerce-Bl\u00f6cke zu nutzen, \u00f6ffnest du zun\u00e4chst eine Seite oder einen Beitrag. Klicke auf die Schaltfl\u00e4che <strong>+<\/strong> in der oberen Leiste, um alle Bl\u00f6cke anzuzeigen, und navigiere dann zum Abschnitt <strong>WOOCOMMERCE<\/strong>. Hier findest du einen kurzen \u00dcberblick \u00fcber die verschiedenen Bl\u00f6cke:<\/p>\n<ul>\n<li><strong>Produktsuche<\/strong> &#8211; F\u00fcgt eine Suchleiste hinzu, mit der Kunden schnell nach Produkten suchen k\u00f6nnen.<\/li>\n<li><strong>Alle Produkte<\/strong> &#8211; Zeigt alle Produkte des Shops in einem Raster an.<\/li>\n<li><strong>Alle Bewertungen<\/strong> &#8211; Listet alle Produktbewertungen auf.<\/li>\n<li><strong>Klassischer Checkout<\/strong> &#8211; Zeigt den klassischen Checkout-Shortcode an.<\/li>\n<li><strong>Klassischer Warenkorb<\/strong> &#8211; Zeigt den klassischen Warenkorb-Shortcode an.<\/li>\n<li><strong>Kundenkonto<\/strong> &#8211; Erm\u00f6glicht das An- und Abmelden von Kunden.<\/li>\n<li><strong>Hervorgehobene Kategorie<\/strong> &#8211; Hebt eine Produktkategorie und einen Call-to-Action (CTA) hervor, um schnelle Reaktionen zu f\u00f6rdern.<\/li>\n<li><strong>Hervorgehobenes Produkt<\/strong> &#8211; Hebt ein Produkt oder eine Variante und einen CTA hervor.<\/li>\n<li><strong>Aktive Filter<\/strong> &#8211; Zeigt die derzeit aktiven Filter an.<\/li>\n<li><strong>Nach Preis filtern<\/strong> &#8211; Zeigt eine Preisspanne an, nach der Kunden Produkte filtern k\u00f6nnen.<\/li>\n<li><strong>Nach Lagerbestand filtern<\/strong> &#8211; Erm\u00f6glicht das Filtern von Produkten nach Bestandsstatus.<\/li>\n<li><strong>Nach Attributen filtern<\/strong> &#8211; Erm\u00f6glicht das Filtern von Produkten nach Attributen wie Gr\u00f6\u00dfe oder Farbe.<\/li>\n<li><strong>Nach Bewertung filtern<\/strong> &#8211; Erm\u00f6glicht es den Kunden, die Produkte nach ihrer Bewertung zu filtern.<\/li>\n<li><strong>Handverlesene Produkte<\/strong> &#8211; Zeigt eine Auswahl von handverlesenen Produkten in einem Raster an.<\/li>\n<li><strong>Mini-Warenkorb<\/strong> &#8211; Bietet eine Schaltfl\u00e4che zur schnellen Warenkorbansicht.<\/li>\n<li><strong>Store Notices<\/strong> &#8211; Zeigt kundenorientierte Benachrichtigungen an, die von WooCommerce oder anderen Erweiterungen generiert wurden.<\/li>\n<li><strong>Meistverkaufte Produkte<\/strong> &#8211; Zeigt eine \u00dcbersicht der meistverkauften Produkte deines Shops an.<\/li>\n<li><strong>Liste der Produktkategorien<\/strong> &#8211; Zeigt alle Produktkategorien als Liste oder als Dropdown an.<\/li>\n<li><strong>Produkte nach Kategorie<\/strong> &#8211; Zeigt ein Raster mit Produkten aus den ausgew\u00e4hlten Kategorien an.<\/li>\n<li><strong>Produktsammlung (Beta)<\/strong> &#8211; Zeigt Produkte aus einer bestimmten Sammlung an.<\/li>\n<li><strong>Neueste Produkte<\/strong> &#8211; Zeigt die neuesten Produkte in einem Raster an.<\/li>\n<li><strong>Verkaufte Produkte<\/strong> &#8211; Zeigt die aktuellen Verkaufsprodukte in einem Raster an.<\/li>\n<li><strong>Produkte nach Tag<\/strong> &#8211; Zeigt Produkte mit dem ausgew\u00e4hlten Tag in einem Raster an.<\/li>\n<li><strong>Top bewertete Produkte<\/strong> &#8211; Zeigt die am besten bewerteten Produkte in einem Raster an.<\/li>\n<li><strong>Produkte nach Attributen<\/strong> &#8211; Zeigt die Produkte mit den ausgew\u00e4hlten Attributen in einem Raster an.<\/li>\n<li><strong>Bewertungen nach Kategorie<\/strong> &#8211; Zeigt die Produktbewertungen aus bestimmten Kategorien an.<\/li>\n<li><strong>Bewertungen nach Produkt<\/strong> &#8211; Zeigt die Bewertungen nach Produkten geordnet an.<\/li>\n<li><strong>Einzelprodukt<\/strong> &#8211; Zeigt ein einzelnes Produkt an.<\/li>\n<li><strong>Warenkorb<\/strong> &#8211; Zeigt den Einkaufswagen an.<\/li>\n<li><strong>Kasse<\/strong> &#8211; Zeigt das Formular an, mit dem Kunden Bestellungen aufgeben k\u00f6nnen.<\/li>\n<\/ul>\n<p>Du wei\u00dft jetzt, wof\u00fcr die einzelnen Bl\u00f6cke stehen. Lass uns einige dieser Bl\u00f6cke verwenden, um ein E-Commerce-Erlebnis zu schaffen.<\/p>\n<h2>Produktrasterblock in WooCommerce verwenden<\/h2>\n<p>Der Produktrasterblock ist ein vielseitiges Werkzeug, um die Produkte deines Shops in einem \u00fcbersichtlichen Rasterformat auf deiner WordPress-Website zu pr\u00e4sentieren. Hier erf\u00e4hrst du, wie du einen Produktraster-Block hinzuf\u00fcgst und anpasst:<\/p>\n<ol start=\"1\">\n<li>Navigiere zu der Seite oder dem Beitrag, auf der\/dem du die Produkte anzeigen m\u00f6chtest. Gib einen Titel wie &#8222;Produkte&#8220; ein<\/li>\n<li>Klicke auf die Schaltfl\u00e4che <strong>+<\/strong> in der oberen Navigationsleiste, um alle Bl\u00f6cke anzuzeigen. Scrolle runter zum Abschnitt <strong>WOOCOMMERCE<\/strong> und w\u00e4hle <strong>Alle Produkte<\/strong>. Diese Aktion zeigt deine Produkte in einem Raster auf der Seite an.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/all-products-woocommerce-block.png\" alt=\"Verwendung des WooCommerce-Blocks \"Alle Produkte\" zur Anzeige von Produkten in einem Raster\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Verwendung des WooCommerce-Blocks &#8222;Alle Produkte&#8220; zur Anzeige von Produkten in einem Raster<\/figcaption><\/figure><\/li>\n<li>Um diesen Block zu konfigurieren, verwende das Blockeinstellungsfeld auf der rechten Seite. Du kannst auf die Einstellungen zugreifen, indem du auf das Symbol <strong>Einstellungen<\/strong>\u00a0klickst (das zweite Symbol ganz rechts in der oberen Navigationsleiste).\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/all-products-setting.png\" alt=\"Einstellungsfeld zur Anpassung des Blocks Alle Produkte\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Einstellungsfeld zur Anpassung des Blocks Alle Produkte<\/figcaption><\/figure>\n<p>Hier kannst du das Layout, den Inhalt und das Styling des Rasters anpassen:<\/p>\n<ul>\n<li><strong>Layout-Einstellungen:<\/strong> Passe die Anzahl der Zeilen und Spalten an. Setze zum Beispiel beide auf 2, um ein ausgewogenes Aussehen zu erreichen.<\/li>\n<li><strong>Inhaltseinstellungen:<\/strong> Entscheide, ob du ein Sortier-Dropdown-Men\u00fc f\u00fcr Kunden einf\u00fcgen m\u00f6chtest. Mit dieser Funktion k\u00f6nnen die Kunden die Produkte in einer bestimmten Reihenfolge sortieren. Du kannst diese Funktion auch deaktivieren, wenn du das m\u00f6chtest.<\/li>\n<li><strong>Erweitertes Styling:<\/strong> Bei Bedarf kannst du CSS-Klassen f\u00fcr ein ausgefeilteres Styling hinzuf\u00fcgen.<\/li>\n<\/ul>\n<\/li>\n<li>Zeig eine Vorschau der Seite an, sobald du die Konfigurationen abgeschlossen hast, um sicherzustellen, dass alles wie gew\u00fcnscht aussieht. Klicke dann auf die Schaltfl\u00e4che <strong>Ver\u00f6ffentlichen<\/strong>. In diesem Schritt kannst du festlegen, ob die Seite \u00f6ffentlich, privat oder passwortgesch\u00fctzt zug\u00e4nglich sein soll, je nachdem, was du m\u00f6chtest.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/products-page.png\" alt=\"Die aktualisierte Seite Produkte zeigt die Produkte in einem 2-mal-2-Raster an und enth\u00e4lt eine Navigationsleiste\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Die aktualisierte Seite Produkte zeigt die Produkte in einem 2-mal-2-Raster an und enth\u00e4lt eine Navigationsleiste<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>F\u00fcge deiner Seite oder deinem Beitrag einen Block mit einem besonderen Produkt hinzu<\/h2>\n<p>Mit dem Block &#8222;Herausragendes Produkt&#8220; kannst du ein Produkt auf deiner Seite oder in deinem Beitrag hervorheben. Du kannst ein Produkt ausw\u00e4hlen, seine Anzeigeeinstellungen anpassen und es zu deinem Inhalt hinzuf\u00fcgen, um die Aufmerksamkeit auf einen bestimmten Artikel zu lenken, den du hervorheben m\u00f6chtest.<\/p>\n<p>Befolge diese Schritte, um einen Block mit einem hervorgehobenen Produkt hinzuzuf\u00fcgen:<\/p>\n<ol start=\"1\">\n<li>Beginne damit, zu der Seite oder dem Beitrag zu navigieren, auf der du das Produkt vorstellen m\u00f6chtest. Stell dir vor, du gestaltest ein Produktraster und m\u00f6chtest das vorgestellte Produkt ganz oben platzieren. Erstelle einen Bereich an dieser Stelle und du wirst links einen <strong>+<\/strong> Button sehen.<br \/>\nWenn du einen bestehenden Block in der N\u00e4he der gew\u00fcnschten Stelle hast, kannst du auch auf die drei vertikalen Punkte klicken, damit sich ein Men\u00fc \u00f6ffnet. Du kannst <strong>Vorher hinzuf\u00fcgen<\/strong> oder <strong>Nachher hinzuf\u00fcgen<\/strong>\u00a0w\u00e4hlen.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/menu-dialog.png\" alt=\"Auf der Seite Produkte wird ein Men\u00fc mit den Optionen Kopieren, Vorher hinzuf\u00fcgen, Nachher hinzuf\u00fcgen, Gruppieren, Sperren, Muster erstellen und L\u00f6schen angezeigt.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen des Blocks &#8222;Featured Product&#8220; vor dem Block &#8222;Alle Produkte&#8220;<\/figcaption><\/figure><\/li>\n<li>W\u00e4hle die Schaltfl\u00e4che <strong>&#8222;+<\/strong> &#8220; in der oberen Navigationsleiste, um alle Bl\u00f6cke anzuzeigen und suche nach <strong>Featured Product<\/strong>.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/featured-product-block.png\" alt=\"W\u00e4hle ein Produkt als Featured Product mit dem Block Featured Product aus\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">W\u00e4hle ein Produkt als Featured Product mit dem Block Featured Product aus<\/figcaption><\/figure><\/li>\n<li>W\u00e4hle das Produkt aus, das du anzeigen m\u00f6chtest. Klicke dann auf <strong>Fertig<\/strong>.<\/li>\n<li>Um deinem Produktblock ein einzigartiges Aussehen zu geben, klicke auf <strong>Einstellungen<\/strong>. In den Blockeinstellungen kannst du:\n<ul>\n<li>Entscheiden, ob die Produktbeschreibung und der Preis angezeigt werden sollen.<\/li>\n<li>Konfiguriere, wie deine Medien (Bilder und Videos) angezeigt werden sollen.<\/li>\n<li>Den Alt-Text f\u00fcr das Produktbild festlegen.<\/li>\n<li>Die Farbe f\u00fcr die \u00dcberlagerung des Blocks w\u00e4hlen.<\/li>\n<li>Stelle die Deckkraft des Blocks ein.<\/li>\n<\/ul>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/block-settings-featured-product.png\" alt=\"Anpassen der Einstellungen f\u00fcr den Featured Product-Block\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Anpassen der Einstellungen f\u00fcr den Featured Product-Block<\/figcaption><\/figure><\/li>\n<li>Wenn du alle notwendigen Anpassungen vorgenommen hast, kannst du deine Seite ver\u00f6ffentlichen oder aktualisieren, wenn sie bereits live ist. So kannst du den Block in Aktion sehen und sicherstellen, dass er genau so aussieht, wie du ihn haben willst.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/products-page-1.png\" alt=\"Vorschau auf die aktualisierte Produktseite, auf der die M\u00fctze \u00fcber dem Produktgitter angezeigt wird\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vorschau auf die aktualisierte Produktseite, auf der die M\u00fctze \u00fcber dem Produktgitter angezeigt wird<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Verwendung von Filterbl\u00f6cken in WooCommerce<\/h2>\n<p>Mit Filterbl\u00f6cken k\u00f6nnen deine Kunden die Produktsuche nach bestimmten Kriterien verfeinern und so schnell die Produkte finden, die ihren Vorlieben oder Anforderungen entsprechen.<\/p>\n<ol start=\"1\">\n<li>Navigiere zu der Seite oder dem Beitrag, zu dem du die Bl\u00f6cke hinzuf\u00fcgen m\u00f6chtest. In dieser Anleitung wird dieselbe <strong>Produktseite<\/strong> wie in den vorherigen Schritten verwendet.<\/li>\n<li>W\u00e4hle aus, wo du die Filter hinzuf\u00fcgen m\u00f6chtest.<\/li>\n<li>Klicke auf die Schaltfl\u00e4che <strong>+<\/strong> in der oberen Navigationsleiste, um alle Bl\u00f6cke anzuzeigen. Scrolle nach unten zum Abschnitt <strong>WOOCOMMERCE<\/strong>, um eine Filteroption f\u00fcr Preis, Bestand, Attribut und Bewertung zu sehen. Wenn du zum Beispiel <strong>Filter nach Preis<\/strong> w\u00e4hlst.<\/li>\n<\/ol>\n<h3>Hinzuf\u00fcgen des Blocks Nach Preis filtern<\/h3>\n<p>Wenn du diesen Block ausw\u00e4hlst, kannst du eine Preisspannenleiste anzeigen, mit der die Nutzer\/innen die Produkte auf der Seite nach ihrer gew\u00fcnschten Preisspanne filtern k\u00f6nnen. Du kannst die Einstellungen des Blocks auf der rechten Seite an deine Bed\u00fcrfnisse anpassen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/filter-by-price.png\" alt=\"Hinzuf\u00fcgen des Blocks Filter nach Preis\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen des Blocks Filter nach Preis<\/figcaption><\/figure>\n<h3>Hinzuf\u00fcgen des Blocks Filter nach Attribut<\/h3>\n<p>Du kannst auch den Block Nach <strong>Attributen filtern<\/strong> verwenden.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/filter-by-attribute.png\" alt=\"Hinzuf\u00fcgen eines Filters f\u00fcr ein Attribut mit dem Block Filter nach Attribut\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Ausw\u00e4hlen der Produktattribute<\/figcaption><\/figure>\n<p>Du kannst ein bestimmtes Attribut ausw\u00e4hlen, z. B. <strong>Farbe<\/strong>, und dann die Einstellungen entsprechend konfigurieren. Du kannst z.B. <strong>Produktanzahl anzeigen<\/strong> aktivieren, um die Anzahl der in jeder Farbe verf\u00fcgbaren Produkte anzuzeigen.<\/p>\n<p>Anschlie\u00dfend kannst du die Live-Seite anzeigen und die Funktionalit\u00e4t der Filterschaltfl\u00e4chen testen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/filter-output.png\" alt=\"Oben auf der aktualisierten Produktseite wird ein einstellbarer Schieberegler f\u00fcr die Preisfilterung nach Preis und eine Option zum Filtern nach dem Farbattribut mit Optionen f\u00fcr Blau, Grau, Gr\u00fcn, Rot und Gelb angezeigt.\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vorschau auf die Filterfunktionalit\u00e4t<\/figcaption><\/figure>\n<p>Wenn du diese Schritte befolgst, kannst du deinen Kundinnen und Kunden ein nahtloses Einkaufserlebnis bieten, indem du ihnen die M\u00f6glichkeit gibst, ihre Produktsuche nach verschiedenen Kriterien zu verfeinern, was ihre Zufriedenheit erh\u00f6ht und ihnen hilft, die gew\u00fcnschten Produkte zu finden.<\/p>\n<h2>Warenkorb und Kassenseiten<\/h2>\n<p>Die Einkaufswagen- und Kassenfunktionen deines Webshops m\u00fcssen intuitiv und voll funktionsf\u00e4hig sein, damit der Einkauf f\u00fcr deine Kunden reibungslos verl\u00e4uft. Um ein hervorragendes Kundenerlebnis zu gew\u00e4hrleisten, m\u00fcssen die Artikel im Warenkorb effektiv verwaltet werden und der <a href=\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-checkout\/\">Bestellvorgang muss m\u00fchelos<\/a> vonstattengehen.<\/p>\n<p>WooCommerce erstellt die Seiten <strong>Warenkorb<\/strong> und <strong>Kasse<\/strong>\u00a0standardm\u00e4\u00dfig mit den entsprechenden Bl\u00f6cken. Kunden k\u00f6nnen Produkte in ihren Warenkorb legen und \u00fcber die Navigationsleiste darauf zugreifen.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/cart-page.png\" alt=\"Warenkorbseite mit T-Shirt, Gutscheincode-Option, Zwischensumme, Gesamtbetrag und Kassenbutton\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Die Warenkorb-Seite<\/figcaption><\/figure>\n<p>Nachdem dein Kunde den Inhalt seines Warenkorbs best\u00e4tigt hat, kann er auf die Schaltfl\u00e4che <strong>Zur Kasse gehen<\/strong> klicken, die erforderlichen Angaben ausf\u00fcllen und seine Bestellung aufgeben.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/checkout-page.png\" alt=\"Das Kassenformular enth\u00e4lt Felder f\u00fcr die Kontaktinformationen des Kunden, die Rechnungsadresse und die Zahlungsoption\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Die Kassenseite<\/figcaption><\/figure>\n<h2>Wie du eine eigene Shop-Seite erstellst<\/h2>\n<p>Nachdem du nun gelernt hast, wie du bestimmte WooCommerce-Bl\u00f6cke verwenden kannst, geht es im n\u00e4chsten Schritt darum, sie zu kombinieren, um eine benutzerfreundliche Shop-Seite mit den folgenden Bl\u00f6cken zu erstellen:<\/p>\n<ul>\n<li>Produktsuche<\/li>\n<li>Nach Preis filtern<\/li>\n<li>Produktkategorien<\/li>\n<li>Ausgew\u00e4hltes Produkt<\/li>\n<li>Alle Produkte<\/li>\n<\/ul>\n<p>Um dieses benutzerdefinierte Shop-Layout zu erstellen, erstelle eine neue Seite und befolge die unten stehenden Schritte.<\/p>\n<ol start=\"1\">\n<li>Gib &#8222;Shop&#8220; als Seitentitel ein.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/shop-page.png\" alt=\"Shop-Seiten-Editor mit Text, Farbe, Typografie, Abmessungen und erweiterten Optionen\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Die Shop-Seite im Bearbeitungsmodus<\/figcaption><\/figure><\/li>\n<li>F\u00fcge mit denselben Schritten wie beim Hinzuf\u00fcgen eines Blocks den Block <strong>Produktsuche<\/strong>\u00a0hinzu. Wenden Sie keine Konfigurationen an.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/product-search-block.png\" alt=\"Die Blockauswahl mit der ausgew\u00e4hlten Option Produktsuche\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen des Blocks Produktsuche<\/figcaption><\/figure><\/li>\n<li>Hinzuf\u00fcgen des Blocks <strong>Produktkategorienliste<\/strong>.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/products-categories.png\" alt=\"Hinzuf\u00fcgen des Blocks Produktkategorien-Liste\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen des Blocks Produktkategorien-Liste<\/figcaption><\/figure>\n<p>Setze auf der Blockeinstellungsseite den <strong>DISPLAY STYLE <\/strong>auf <strong>Dropdown<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/product-categories-drop-down.png\" alt=\"Die Blockauswahl mit der Option \"Produktsuche\" Das Editorfenster des Blocks \"Produktkategorienliste\" enth\u00e4lt einen Schalter f\u00fcr den Anzeigestil des Blocks, der auf \"dropdownselected\" eingestellt ist\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Anpassen der Einstellungen des Blocks Produktkategorienliste<\/figcaption><\/figure><\/li>\n<li>Als N\u00e4chstes f\u00fcgst du den Block <strong>Filter nach Preis<\/strong> hinzu. F\u00fcr diesen Block musst du nichts konfigurieren.<\/li>\n<li>F\u00fcge den Block <strong>Featured Product<\/strong> hinzu und w\u00e4hle das Produkt aus, das angezeigt werden soll. Nimm die gleichen Einstellungen vor wie f\u00fcr den Block Featured Product, den du zuvor erstellt hast.\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/featured-product-shop-page.png\" alt=\"Die Shop-Seite zeigt das vorgestellte M\u00fctzenprodukt mit einigen Einstellungen f\u00fcr das vorgestellte Produkt\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Auf der Shop-Seite wird das vorgestellte Produkt mit einigen Einstellungen f\u00fcr das vorgestellte Produkt angezeigt<\/figcaption><\/figure><\/li>\n<li>F\u00fcge den Block <strong>Alle Produkte<\/strong> hinzu.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/product-grid-shop-page.png\" alt=\"Der Block \"Alle Produkte\" wird verwendet, um das Produktraster auf der Shop-Seite hinzuzuf\u00fcgen\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Hinzuf\u00fcgen des Blocks &#8222;Alle Produkte&#8220;<\/figcaption><\/figure>\n<p>Setze bei den Einstellungen dieses Blocks die Werte <strong>COLUMNS <\/strong>und <strong>ROWS<\/strong> auf 2 und entferne die Option <strong>Show Sorting Dropdown<\/strong>.<\/p>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/set-all-products-block.png\" alt=\"Einstellungen auf den Block \"Alle Produkte\" anwenden, um seine Ansicht zu \u00e4ndern\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Anpassen der Einstellungen des Blocks &#8222;Alle Produkte&#8220;<\/figcaption><\/figure><\/li>\n<li>Ver\u00f6ffentliche die Seite und sieh dir die Ergebnisse an.\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/preview-shop-page.png\" alt=\"Vorschau der Shop-Seite nach dem Hinzuf\u00fcgen aller WooCommerce-Bl\u00f6cke\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vorschau auf die Shop-Seite<\/figcaption><\/figure>\n<p><figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinqsta.com\/wp-content\/uploads\/2024\/01\/shop-page-view.png\" alt=\"Auf der Shop-Seite werden die Produkte in einem 2-mal-2-Raster aufgelistet. Unter jedem Artikel befindet sich eine Schaltfl\u00e4che, um ihn in den Warenkorb zu legen oder die Produkte anzusehen\" width=\"1600\" height=\"225\"><figcaption class=\"wp-caption-text\">Vorschau auf die Shop-Seite<\/figcaption><\/figure><\/li>\n<\/ol>\n<h2>Wie man die Leistung der Bl\u00f6cke \u00fcberwacht und analysiert<\/h2>\n<p>Die robusten Tools von Kinsta \u00fcberwachen und analysieren die Leistung von Seiten, die WooCommerce-Bl\u00f6cke verwenden.<\/p>\n<h3>Das APM-Tool von Kinsta<\/h3>\n<p>Mit dem <a href=\"https:\/\/kinqsta.com\/de\/docs\/wordpress-hosting\/wordpress-ueberwachung\/apm-tool\/\">Application Performance Monitoring (APM) Tool<\/a> von Kinsta kannst du die Leistung von Seiten \u00fcberwachen, die WooCommerce-Bl\u00f6cke enthalten. Es erfasst mit Zeitstempeln versehene Informationen \u00fcber PHP-Prozesse, MySQL-Datenbankabfragen und andere wichtige Metriken, mit denen du die von WooCommerce unterst\u00fctzten Transaktionen verfolgen und analysieren kannst.<\/p>\n<p>So kannst du z. B. die Dauer und H\u00e4ufigkeit von Interaktionen und m\u00f6gliche Engp\u00e4sse im Zusammenhang mit diesen Seiten analysieren. Mit diesen Informationen kannst du die Fehlerbehebung und Leistungsoptimierung genau vornehmen.<\/p>\n<h3>Das Analysetool von Kinsta<\/h3>\n<p>Um die Auswirkungen von WooCommerce-Bl\u00f6cken auf das Nutzerengagement und den Umsatz zu bewerten, ist ein vielseitiger Ansatz erforderlich. Die umfassenden Analysetools von Kinsta spielen dabei eine entscheidende Rolle. Mit den WordPress-Analysefunktionen im MyKinsta-Dashboard erh\u00e4ltst du wertvolle Einblicke in verschiedene Leistungskennzahlen, die sich direkt auf das Nutzererlebnis &#8211; und damit auf den Umsatz &#8211; auswirken.<\/p>\n<ul>\n<li>Im Bereich <strong>Ressourcen<\/strong> des MyKinsta-Dashboards kannst du die Gesamtbesuche, den Speicherplatz und die Bandbreitennutzung deiner Website verfolgen. So erh\u00e4ltst du einen quantitativen \u00dcberblick \u00fcber den Website-Verkehr und die Ressourcennutzung.<\/li>\n<\/ul>\n<ul>\n<li>Der Bereich <strong>Leistung<\/strong> enth\u00e4lt Kennzahlen wie die durchschnittliche PHP- und MySQL-Antwortzeit und die AJAX-Nutzung. Diese Statistiken helfen dir, die Reaktionsf\u00e4higkeit und Interaktivit\u00e4t der Seiten mit WooCommerce Bl\u00f6cken zu verfolgen.<\/li>\n<\/ul>\n<ul>\n<li>Der Abschnitt <strong>Antwort<\/strong>\u00a0enth\u00e4lt Aufschl\u00fcsselungen der Antwortcodes und Fehleranalysen, die dir helfen, die Interaktionen der Nutzer und m\u00f6gliche Hindernisse, auf die sie sto\u00dfen k\u00f6nnen, besser zu verstehen.<\/li>\n<\/ul>\n<ul>\n<li>Im <strong>Bereich Geo &#038; IP<\/strong> kannst du die Nutzung des Content Delivery Network (CDN), die Cache-Effizienz und geografische Daten verfolgen. Diese Informationen helfen dir, deine Website anhand von Nutzerverhalten, Standort und Leistungsdaten zu optimieren.<\/li>\n<\/ul>\n<p>Wenn du diese Analysen genau beobachtest, kannst du potenzielle Engp\u00e4sse erkennen und deine Seiten mit WooCommerce Blocks optimieren, um ein nahtloses, ansprechendes Nutzererlebnis zu gew\u00e4hrleisten.<\/p>\n<p>Weitere Tipps findest du in unserem ultimativen Leitfaden \u00fcber <a href=\"https:\/\/kinqsta.com\/de\/blog\/beschleunigung-woocommerce\/\">18 M\u00f6glichkeiten, deinen WooCommerce-Shop zu beschleunigen<\/a>. Geschwindigkeit ist f\u00fcr Online-Shops entscheidend, denn langsam ladende Seiten f\u00fchren zu Frustration bei den Nutzern und zu Umsatzeinbu\u00dfen.<\/p>\n<h2>Zusammenfassung<\/h2>\n<p>In diesem Leitfaden wurden die M\u00f6glichkeiten von WooCommerce-Bl\u00f6cken erl\u00e4utert, vom Hinzuf\u00fcgen von Produktrastern und vorgestellten Produkten bis hin zur Implementierung leistungsstarker Filterbl\u00f6cke. Au\u00dferdem wurde die Bedeutung von Einkaufswagen und Kassenboxen erl\u00e4utert, die f\u00fcr ein reibungsloses Einkaufserlebnis entscheidend sind.<\/p>\n<p>Die strategische Kombination verschiedener WooCommerce-Bl\u00f6cke erm\u00f6glicht ein intuitives und visuell ansprechendes Layout. Dabei m\u00fcssen die Bl\u00f6cke sorgf\u00e4ltig ausgew\u00e4hlt, konfiguriert und angeordnet werden, um bestimmte Funktionen und Kundenw\u00fcnsche zu erf\u00fcllen.<\/p>\n<p>Wenn du dich f\u00fcr den <a href=\"https:\/\/kinqsta.com\/de\/wordpress-hosting\/\">WordPress-Hosting-Dienst<\/a> von Kinsta entscheidest, kannst du die Leistung und Zuverl\u00e4ssigkeit deiner WooCommerce-Websites erheblich steigern. Mit optimierten Serverkonfigurationen, robusten Sicherheitsma\u00dfnahmen und nahtloser Skalierbarkeit sorgt Kinsta daf\u00fcr, dass dein Online-Shop mit h\u00f6chster Effizienz arbeitet.<\/p>\n<p>Egal, ob du WooCommerce-Bl\u00f6cke f\u00fcr Produktanzeigen, Filter oder Warenkorbfunktionen verwendest, die Hosting-Infrastruktur von Kinsta bietet die Geschwindigkeit und Stabilit\u00e4t, die du brauchst, um deinen Kunden ein au\u00dfergew\u00f6hnliches Einkaufserlebnis zu bieten.<\/p>\n<p><em>Hast du schon Erfahrung mit WooCommerce-Bl\u00f6cken? Wenn ja, welcher Block ist dein Favorit und welchen neuen Block w\u00fcrdest du gerne hinzuf\u00fcgen? Teile uns deine Meinung in den Kommentaren mit.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Mit WooCommerce Blocks kannst du individuelle Shop-Seiten erstellen, deine Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern und Suchen hinzuf\u00fcgen &#8211; und das alles, ohne eine einzige &#8230;<\/p>\n","protected":false},"author":287,"featured_media":68416,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[996,1000,999],"class_list":["post-68415","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-woocommerce","topic-wordpress-ecommerce","topic-wordpress-entwicklung"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WooCommerce Bl\u00f6cke - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WooCommerce Bl\u00f6cke: F\u00fcge WooCommerce-Funktionen zu deiner WordPress-Website hinzu\" \/>\n<meta property=\"og:description\" content=\"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-23T18:18:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-26T08:15:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_DE\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"15\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"WooCommerce Bl\u00f6cke: F\u00fcge WooCommerce-Funktionen zu deiner WordPress-Website hinzu\",\"datePublished\":\"2024-01-23T18:18:00+00:00\",\"dateModified\":\"2024-01-26T08:15:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/\"},\"wordCount\":2709,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/\",\"name\":\"WooCommerce Bl\u00f6cke - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"datePublished\":\"2024-01-23T18:18:00+00:00\",\"dateModified\":\"2024-01-26T08:15:28+00:00\",\"description\":\"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinqsta.com\/de\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WooCommerce\",\"item\":\"https:\/\/kinqsta.com\/de\/thema\/woocommerce\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"WooCommerce Bl\u00f6cke: F\u00fcge WooCommerce-Funktionen zu deiner WordPress-Website hinzu\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinqsta.com\/de\/#website\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen\",\"publisher\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinqsta.com\/de\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinqsta.com\/de\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/\",\"https:\/\/x.com\/Kinsta_DE\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinqsta.com\/de\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"WooCommerce Bl\u00f6cke - Kinsta\u00ae","description":"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/","og_locale":"de_DE","og_type":"article","og_title":"WooCommerce Bl\u00f6cke: F\u00fcge WooCommerce-Funktionen zu deiner WordPress-Website hinzu","og_description":"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.","og_url":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","article_published_time":"2024-01-23T18:18:00+00:00","article_modified_time":"2024-01-26T08:15:28+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.","twitter_image":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_DE","twitter_misc":{"Verfasst von":"Joel Olawanle","Gesch\u00e4tzte Lesezeit":"15\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#article","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"WooCommerce Bl\u00f6cke: F\u00fcge WooCommerce-Funktionen zu deiner WordPress-Website hinzu","datePublished":"2024-01-23T18:18:00+00:00","dateModified":"2024-01-26T08:15:28+00:00","mainEntityOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/"},"wordCount":2709,"commentCount":0,"publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg","inLanguage":"de","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/","url":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/","name":"WooCommerce Bl\u00f6cke - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinqsta.com\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage"},"image":{"@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage"},"thumbnailUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg","datePublished":"2024-01-23T18:18:00+00:00","dateModified":"2024-01-26T08:15:28+00:00","description":"Erfahre, wie du benutzerdefinierte Shop-Seiten erstellen, Produkte pr\u00e4sentieren und erweiterte E-Commerce-Funktionen wie Filtern zu Ihrer E-Commerce-Website hinzuf\u00fcgen kannst.","breadcrumb":{"@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#primaryimage","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2024\/01\/woocommerce-blocks-tutorial.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinqsta.com\/de\/blog\/woocommerce-blocke\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinqsta.com\/de\/"},{"@type":"ListItem","position":2,"name":"WooCommerce","item":"https:\/\/kinqsta.com\/de\/thema\/woocommerce\/"},{"@type":"ListItem","position":3,"name":"WooCommerce Bl\u00f6cke: F\u00fcge WooCommerce-Funktionen zu deiner WordPress-Website hinzu"}]},{"@type":"WebSite","@id":"https:\/\/kinqsta.com\/de\/#website","url":"https:\/\/kinqsta.com\/de\/","name":"Kinsta\u00ae","description":"Schnelle, sichere und hochwertige Hosting-L\u00f6sungen","publisher":{"@id":"https:\/\/kinqsta.com\/de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinqsta.com\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/kinqsta.com\/de\/#organization","name":"Kinsta","url":"https:\/\/kinqsta.com\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/","url":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinqsta.com\/de\/wp-content\/uploads\/sites\/5\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinqsta.com\/de\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Kinsta-Deutschland-207459890108303\/","https:\/\/x.com\/Kinsta_DE","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/kinqsta.com\/de\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinqsta.com\/de\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/68415","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/comments?post=68415"}],"version-history":[{"count":5,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/68415\/revisions"}],"predecessor-version":[{"id":68487,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/posts\/68415\/revisions\/68487"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/translations\/es"},{"href":"https:\/\/kinqsta.com\/de\/wp-json\/kinsta\/v1\/posts\/68415\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media\/68416"}],"wp:attachment":[{"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/media?parent=68415"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/tags?post=68415"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinqsta.com\/de\/wp-json\/wp\/v2\/topic?post=68415"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}