# Ein WooCommerce-Theme mit Blöcken für jede Shop-Ansicht URL: https://canvaswp.com/de/woocommerce/ Updated: 2026-11-04 WooCommerce Gestalten Sie die Produktseite, das Shop-Raster, den Warenkorb und die Kasse mit Blöcken im Editor, den WordPress bereitstellt. Starten Sie danach mit einer Demo, die als funktionierender Shop geliefert wird. WooCommerce verwaltet die Bestellungen, Canvas gibt dem Shop ein Design. Zuletzt aktualisiert am 4. November 2026 24 WooCommerce-Blöcke 18 Shop-Templates 21 Demo-Shops, die Sie importieren können Die Blöcke ## 24 Blöcke für die vier Ansichten, die verkaufen Jeder Teil eines WooCommerce-Shops, den Kundinnen und Kunden sehen, ist ein Block mit eigenem Einstellungsbereich. So können Sie ihn verschieben, anders gestalten oder weglassen, ohne eine Template-Datei zu berühren. ### Die Produktseite 11 Blöcke Erstellen Sie ein einzelnes Produktlayout Block für Block, oder starten Sie mit einem der mitgelieferten Templates und verschieben Sie die Elemente. #### Produktbilder In jedem Tarif enthalten Zeigt das Produktbild von WooCommerce sowie optionale Galerie-Vorschaubilder an. #### Product Gallery Linker In jedem Tarif enthalten Eine Miniaturbildleiste, mit der sich das Produktgalerie-Karussell auf das angeklickte Bild umschaltet. #### Product Price In jedem Tarif enthalten Zeigt den WooCommerce-Produktpreis einschließlich Angebotspreis und Währungsformatierung an. #### Product Rating In jedem Tarif enthalten Zeigt die Sternebewertung und optional die Anzahl der Bewertungen für das aktuelle WooCommerce-Produkt an. #### Product Meta In jedem Tarif enthalten Zeigt die Produkt-Metakarte mit SKU, Kategorien und Schlagwörtern. #### Product Short Description In jedem Tarif enthalten Zeigt die Kurzbeschreibung des Produkts einschließlich ihrer Absatzstruktur unverändert an. #### Variation Swatches In jedem Tarif enthalten Farbpunkte oder pillenförmige Buttons, über die sich die Variante eines variablen Produkts auswählen lässt. #### Add to Cart In jedem Tarif enthalten Rendert das WooCommerce-Formular zum Hinzufügen in den Warenkorb für das aktuelle Produkt, optional mit Mengenfeld. #### Product Tabs In jedem Tarif enthalten Zeigt die WooCommerce-Produktdaten-Tabs an: Beschreibung, Zusätzliche Informationen und Bewertungen. #### Product Share In jedem Tarif enthalten Zeigt die Karte „Share:“ mit Links zum Teilen in sozialen Netzwerken für das aktuelle WooCommerce-Produkt an. #### Verwandte Produkte In jedem Tarif enthalten Zeigt ein Raster mit WooCommerce-Produkten an, die mit dem aktuellen Produkt zusammenhängen. Wird nur auf Einzelprodukt-Templates angezeigt. ### Der Shop und sein Katalog: 5 Blöcke Raster, Karussells, Kategoriekarten und ein Preisfilter, die jeweils Inhalte aus einer Kategorie, einem Schlagwort, einer Suche oder einer handverlesenen Liste beziehen können. #### Produkte In jedem Tarif enthalten Zeigt WooCommerce-Produkte in einem Raster- oder Listenlayout an. Filtern Sie nach Quelle, Kategorie, Schlagwort und Sortierung. #### Product Categories In jedem Tarif enthalten Zeigt WooCommerce-Produktkategorien als responsives Kartenraster mit Vorschaubildern, Namen und Produktanzahl an. #### Product Carousel Bei jedem Tarif enthalten Zeigt WooCommerce-Produkte in einem scrollbaren owl-carousel an. Unterstützt Autoplay, Navigationspfeile, Punkte und responsive Breakpoints. #### Store Price Filter In jedem Tarif enthalten Ein Preisbereichsregler mit zwei Griffen, der ein Produktraster direkt filtert. #### Conference Tickets In jedem Tarif enthalten Preisboxen für eine Kategorie von Ticketprodukten, jeweils mit einer Mengenauswahl und einem dynamischen Link „In den Warenkorb“. ### Warenkorb 3 Blöcke Eine Warenkorbseite, die Sie gestalten, mit dem Upsell, das Kunden tatsächlich sehen. #### Cart Table In jedem Tarif enthalten Zeigt die WooCommerce-Warenkorbtabelle mit Positionen, Mengen und Summen an. #### Cart Totals In jedem Tarif enthalten Zeigt das Panel mit den Warenkorb-Summen von WooCommerce an, einschließlich Zwischensumme, Versand und Schaltfläche zur Kasse. #### Cross-Sells In jedem Tarif enthalten Zeigt Cross-Sell-Produkte aus dem aktuellen WooCommerce-Warenkorb an. Wird nur angezeigt, wenn der Warenkorb aktiv ist und Cross-Sell-Produkte enthält. ### Der Checkout 3 Blöcke Das Rechnungsformular, die Bestellübersicht und die Hinweise, die Käufer über den letzten Vorgang informieren. #### Checkout Billing In jedem Tarif enthalten Zeigt das Rechnungsadressformular der WooCommerce-Kasse an. #### Checkout Order Review In jedem Tarif enthalten Zeigt die Bestellübersicht des WooCommerce-Checkouts mit Positionen und Summen an. #### WooCommerce Notices In jedem Tarif enthalten Zeigt WooCommerce-Hinweise an: Fehler, Erfolgsmeldungen oder Informationshinweise. ### Außerdem im Shop 2 Blöcke Shop-Blöcke, die nicht zu den vier oben genannten Bereichen gehören. #### Wunschliste In jedem Tarif enthalten Die Produkte, die ein Kunde gespeichert hat, mit Preis, Lagerbestand und einer Schaltfläche „In den Warenkorb“. Fügen Sie ihn auf der Seite ein, die in den Theme-Optionen unter Wunschliste gewählt ist. #### Wishlist Button In jedem Tarif enthalten Speichert das aktuelle Produkt auf der Wunschliste des Käufers. Verwenden Sie ihn in Produktvorlagen und Produktkarten. ### Bekleidungsshop Ein Modekatalog mit Kollektionsseiten, variablen Produkten und einem Header-Warenkorb, der die Anzahl laufend anzeigt. [E-Commerce-Themes](https://canvaswp.com/de/wordpress-themes/ecommerce/) ### Möbel Verkauf und Vermietung in einem Katalog, wobei Produktraster und Einzelproduktseite beide als Blöcke aufgebaut sind. [Themes für Interior Design](https://canvaswp.com/de/wordpress-themes/interior-design/) ### Wein Ein Weingut-Shop, in dem das Design die Produktfotografie trägt und die Shop-Seiten dahinter liegen. [Restaurant-Themes](https://canvaswp.com/de/wordpress-themes/restaurant/) Drei der 21 Demo-Shops. Jeder Teil, den ein Kunde auf diesen Seiten betrachtet, ist ein Block mit einem dahinterliegenden Einstellungsbereich. [Alle 314 Canvas-Blöcke](https://canvaswp.com/de/blocks/) Verhalten ## Was Käufer tun, ohne die Seite neu zu laden Drei Shop-Funktionen, für die sonst meist je ein Plugin nötig ist, sind Teil der Integration. ### Farbmuster für Attribute Weisen Sie einem Produktattributwert im Admin eine Farbe zu, und variable Produkte zeigen Farbpunkte oder Buttons statt eines Dropdown-Menüs an, damit Käufer eine Variante auf einen Blick auswählen können. ### AJAX-Button „In den Warenkorb“ Das Hinzufügen eines Produkts aus einem Raster, einem Karussell oder einem Kartenoverlay aktualisiert den Warenkorb direkt. Besucher bleiben auf der Seite, die sie gerade durchstöbern, und der Mini-Warenkorb im Header zeigt die Anzahl weiterhin an. ### Stile der Produktkarten Legen Sie für jedes Katalogbild eine einheitliche Form fest, damit die Karten bündig ausgerichtet sind, wählen Sie, ob weitere Galeriebilder beim Hover erscheinen oder als Diashow ablaufen, und bestimmen Sie, was das Hover-Overlay anbietet: Kaufen, Schnellansicht oder beides. Templates ## 18 Shop-Templates im Website-Editor Jede Shop-Ansicht ist eine Block-Vorlage, die Sie im Website-Editor öffnen, bearbeiten und zurücksetzen, genauso wie jede andere Block-Vorlage. ### Layouts für Einzelprodukte Legen Sie das Layout einer Produktseite fest: als Standard, mit einer fixierten Zusammenfassung, die der Galerie folgt, als Liste, im farbbetonten Design, im Store-Design, in einem von zwei Galerie-Layouts mit individueller Verlinkung oder in einer Variante mit linker, rechter oder zwei Seitenleisten. ### Layouts für Shop-Seiten Gestalten Sie den Shop selbst vollbreit, mit einer linken Seitenleiste, mit einer rechten Seitenleiste oder mit Seitenleisten auf beiden Seiten, damit Filter und Kategorien dort stehen, wo Ihr Katalog sie braucht. ### Archive, Warenkorb und Kasse Das Shop-Archiv, die Archive der Produktkategorien, der Warenkorb und die Kasse werden jeweils als Template mitgeliefert, zusätzlich zu den Template-Überschreibungen für WooCommerce, die das Theme bereitstellt. Shop-Templates werden im eigenen Templates-Bereich des Website-Editors unter woocommerce aufgeführt, neben den Canvas-Templates, und lassen sich über denselben Bildschirm zurücksetzen. Weisen Sie jedem Produkt im Editor ein Layout zu oder legen Sie in den Theme-Optionen den Standard für den gesamten Shop fest. Ein Template, das Sie im Website-Editor anpassen, bleibt auch nach Updates angepasst, und Canvas zeigt Ihnen an, welche Templates sich nach einem Update geändert haben. Theme-Optionen ## 39 Shop-Optionen, 5 Tabs Standardwerte für den gesamten Shop, etwa für den Katalog, die Produktseite, den Warenkorb und die Kasse sowie den Mini-Warenkorb im Header, dazu ein Katalogmodus für Shops, die Anfragen annehmen. Produkte pro Seite, Paginierung, Form der Produktbilder, zusätzliche Galeriebilder und das Overlay der Produktkarten werden alle hier festgelegt. Ein Block, der eine dieser Einstellungen selbst setzt, hat auf der Seite, auf der er platziert ist, weiterhin Vorrang. - Katalog: Produkte pro Zeile auf jeder Bildschirmgröße, Bildform, Verhalten beim Hover, das Sale-Badge - Produktseite: was die Einzelproduktansicht anzeigt und eine fixierte Leiste „In den Warenkorb“ - Warenkorb und Kasse: eine Fortschrittsanzeige für kostenlosen Versand und eine Kasse ohne jede Ablenkung - Mini-Warenkorb: Was im Header-Warenkorb passiert, wenn ein Kunde einen Artikel hinzufügt - Katalogmodus: Preise und Kaufbutton ausblenden, Anfragebutton anzeigen [Shop-Optionen, die den Verkauf unterstützen](https://docs.canvaswp.com/store-options-that-help-you-sell) [Katalogmodus](https://docs.canvaswp.com/catalog-mode) [Die Wunschliste](https://docs.canvaswp.com/the-wishlist) Theme-Optionen, Bereich Shop, Reiter Katalog. Performance ## Fünf Schalter für WooCommerce WooCommerce lädt auf jeder Seite einer Website Skripte und Stylesheets, auch auf denen, die nichts verkaufen. Mit diesen fünf Schaltern nehmen Sie das wieder zurück, und jeder davon lässt sich rückgängig machen. - JavaScript von WooCommerce auf Seiten ohne Shop-Ausgabe entfernen - Deaktivieren Sie das Tracking der Bestellzuordnung, wenn Sie diese Berichte nicht nutzen - Verhindert das wiederholte Abfragen des Cart-Fragments-Skripts bei jedem Seitenaufruf - Deaktivieren Sie die Bibliothek zur Prüfung der Passwortstärke außerhalb der Konto- und Checkout-Seiten - Mitgelieferte Select2-Bibliothek außerhalb der Kassen- und Kontoseiten nicht laden [Alle 35 Performance-Optimierungen](https://canvaswp.com/de/performance/) Theme-Optionen, Performance, Tab WooCommerce. Demo-Shops ## 21 Demos sind funktionierende WooCommerce-Shops Produkte, Kategorien, Attribute, ein Warenkorb und eine Kasse, importiert und bereit für eine Testbestellung. Sehen Sie sich jede davon vorab live an, bevor Sie sich entscheiden. ### [Bag Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/ecommerce/) Shop & E-Commerce · 9 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo Bag Store](https://docs.canvaswp.com/design-ecommerce) ### [Barber Shop-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/barber/) Beauty & Spa · 7 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Barber Shop-Demo](https://docs.canvaswp.com/design-barber) ### [CanvasRoam-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/youtube-creator/) Portfolio & Persönlich · 10 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der CanvasRoam-Demo](https://docs.canvaswp.com/design-youtube-creator) ### [Christmas Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/xmas/) Shop & E-Commerce · 6 Seiten ### [Clothing Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/store/) Shop & E-Commerce · 19 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo Clothing Store](https://docs.canvaswp.com/design-store) ### [Conference-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/conference/) Events & Hochzeiten · 25 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo Conference](https://docs.canvaswp.com/design-conference) ### [Drone-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/drone/) Shop & E-Commerce · 12 Seiten ### [eBook-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/ebook/) Shop & E-Commerce · 9 Seiten ### [Fashion Shop-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/shop/) Shop & E-Commerce · 25 Seiten ### [Fashion Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/fashion-store/) Shop & E-Commerce · 16 Seiten ### [FORM 2026-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/event-conference/) Events & Hochzeiten · 14 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo FORM 2026](https://docs.canvaswp.com/design-event-conference) ### [Furniture-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/furniture/) Shop & E-Commerce · 12 Seiten ### [Game of Canvas-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/gaming/) Unterhaltung & Community · 12 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo Game of Canvas](https://docs.canvaswp.com/design-gaming) ### [Illustrator-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/illustrator/) Portfolio & Persönlich · 7 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Illustrator-Demo](https://docs.canvaswp.com/design-illustrator) ### [Jewelry Boutique-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/jewellery-boutique/) Shop & E-Commerce · 17 Seiten ### [Podcasts-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/podcasts/) Blog & Magazin · 13 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo Podcasts](https://docs.canvaswp.com/design-podcasts) ### [Pottery Shop-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/shop-2/) Shop & E-Commerce · 12 Seiten ### [Speaker Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/speaker/) Shop & E-Commerce · 11 Seiten ### [Supplement Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/supplements/) Shop & E-Commerce · 13 Seiten ### [Wildroot Gear-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/gear/) Shop & E-Commerce · 14 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo Wildroot Gear](https://docs.canvaswp.com/design-gear) ### [Wine Estate-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)](https://demos.canvaswp.com/wine/) Essen & Trinken · 10 Seiten · [Was installiert wird: die Blöcke und Inhaltstypen der Demo Wine Estate](https://docs.canvaswp.com/design-wine) [Alle 88 Demos](https://canvaswp.com/de/demos/) Import in einen Live-Shop ## Ihre Shop-Seiten werden übernommen, nicht dupliziert Die übliche Sorge beim Import eines Shop-Designs: Am Ende gibt es zwei Kassen. Canvas ordnet die WooCommerce-Seiten der Demo denen zu, die Ihre Website bereits hat. Der Importbildschirm, über den jede Shop-Demo eingespielt wird, mit dem Rollback, der sie rückgängig macht. ### Ein Shop, ein Warenkorb, eine Kasse Der Importer findet Ihre vorhandenen WooCommerce-Seiten und verweist die Menüs und Links der Demo direkt auf diese. ### Reversibel Alles, was der Import angelegt hat, wird erfasst, sodass ein einziger Bildschirm die Demo-Inhalte entfernt und die zuvor vorhandenen Optionen und Menüs wiederherstellt. ### Enthaltene Produkte Demo-Produkte, Kategorien, Attribute und Farbmuster werden mit dem Design geliefert, damit der Katalog korrekt angezeigt wird, während Sie sie durch Ihre eigenen ersetzen. ### Oder nur die Seiten Wählen Sie den seitenbezogenen Import, übernehmen Sie die Seiten der Demo, aber nicht deren Theme-Optionen, Menüs oder Startseite. Fragen ## Verkaufen mit Canvas Was Shop-Betreiber zuerst fragen. Die [Dokumentation](https://docs.canvaswp.com/setting-up-your-shop) beschreibt jeden Block und jede Option im Detail. **Brauche ich das WooCommerce-Plugin noch?** Ja, Canvas erweitert WooCommerce um Blöcke, Templates und Optionen und ersetzt nichts davon. Bestellungen, Produkte, Steuern, Versand und Zahlungen bleiben in WooCommerce, wo Ihre übrigen Erweiterungen sie erwarten. Wenn Sie von einer Shop-Demo starten, installiert und aktiviert der Einrichtungsassistent WooCommerce für Sie, bevor der Import läuft. **Ersetzt der Import einer Shop-Demo meine Shop- und Kassenseiten?** Nein, der Canvas-Importer übernimmt die WooCommerce-Seiten, die Ihre Website bereits hat, sodass keine zweite Shop-, Warenkorb-, Kassen- oder Kontoseite erscheint. Ihre vorhandenen Produkte und Bestellungen bleiben unverändert. **Kann ich diese mit den eigenen Blöcken von WooCommerce kombinieren?** Ja, die Shop-Blöcke von Canvas sind gewöhnliche registrierte Blöcke. Sie stehen deshalb neben WooCommerce-Blöcken und Core-Blöcken im selben Template und auf derselben Seite, und Sie können sie einzeln austauschen, ohne sich auf ein ganzes Layout festzulegen. **Wie funktionieren Farbmuster?** Weisen Sie einem Produktattribut-Begriff im WordPress-Adminbereich eine Farbe zu. Dann stellt der Block Canvas Variation Swatches dieses Attribut anstelle eines Dropdowns als Farbpunkte oder Pill-Buttons dar, auf der Produktseite und in den Templates, die es verwenden. **Sind die Shop-Blöcke in Ihrem Tarif enthalten?** Ja: Alle 24 Canvas-Shop-Blöcke sind Premium-Blöcke, und jeder Tarif enthält jeden Premium-Block. Es gibt kein Shop-Add-on und keine E-Commerce-Stufe. Andere Themes verkaufen das oft separat: Die Schnellansicht ist [ein Feature von Astra Pro](https://canvaswp.com/de/compare/astra/), und OceanWP verkauft [sein eCommerce Pro Plugin](https://canvaswp.com/de/compare/oceanwp/) als eigenständiges Produkt.