Ein WooCommerce-Theme mit Blöcken für jede Shop-Ansicht
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
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
Möbel
Verkauf und Vermietung in einem Katalog, wobei Produktraster und Einzelproduktseite beide als Blöcke aufgebaut sind.
Themes für Interior Design
Wein
Ein Weingut-Shop, in dem das Design die Produktfotografie trägt und die Shop-Seiten dahinter liegen.
Restaurant-ThemesDrei der 21 Demo-Shops. Jeder Teil, den ein Kunde auf diesen Seiten betrachtet, ist ein Block mit einem dahinterliegenden Einstellungsbereich.
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.
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.
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 Katalogmodus Die Wunschliste
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
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.
CanvasRoam-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Portfolio & Persönlich · 10 Seiten · Was installiert wird: die Blöcke und Inhaltstypen der CanvasRoam-Demo
Christmas Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 6 Seiten
Conference-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Events & Hochzeiten · 25 Seiten · Was installiert wird: die Blöcke und Inhaltstypen der Demo Conference
Drone-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 12 Seiten
eBook-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 9 Seiten
Fashion Shop-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 25 Seiten
Fashion Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 16 Seiten
FORM 2026-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Events & Hochzeiten · 14 Seiten · Was installiert wird: die Blöcke und Inhaltstypen der Demo FORM 2026
Furniture-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 12 Seiten
Game of Canvas-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Unterhaltung & Community · 12 Seiten · Was installiert wird: die Blöcke und Inhaltstypen der Demo Game of Canvas
Illustrator-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Portfolio & Persönlich · 7 Seiten · Was installiert wird: die Blöcke und Inhaltstypen der Illustrator-Demo
Jewelry Boutique-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 17 Seiten
Pottery Shop-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 12 Seiten
Speaker Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 11 Seiten
Supplement Store-Demo, Live-Vorschau (öffnet sich in einem neuen Tab)
Shop & E-Commerce · 13 Seiten
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.
Verkaufen mit Canvas
Was Shop-Betreiber zuerst fragen. Die Dokumentation 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, und OceanWP verkauft sein eCommerce Pro Plugin als eigenständiges Produkt.
Bauen Sie den Shop, nicht die Technik dahinter
Jeder Tarif enthält alle 24 Shop-Blöcke, alle 18 Shop-Templates und alle 21 Demo-Shops. Es gibt keine E-Commerce-Stufe, auf die Sie upgraden müssten.