すべてのストア画面をブロックで構築できるWooCommerceテーマ
WordPressのエディターで用意されているブロックを使って、商品ページ、ショップのグリッド、カート、チェックアウトをデザインできます。その後、動作するストアとして読み込まれるデモから始めることもできます。注文はWooCommerceが管理し、デザインはCanvasが担当します。
更新日：
売上につながる4つの画面向けの24個のブロック
WooCommerceストアで購入者が目にするすべての要素は、設定パネルを備えたブロックです。そのため、テンプレートファイルに触れることなく、移動、スタイル変更、非表示にすることができます。
商品ページ：11個のブロック
1つの商品レイアウトをブロック単位で組み立てるか、同梱のテンプレートのひとつから始めて、各パーツを移動できます。
Product Images どのプランにも含まれます
WooCommerceの商品のアイキャッチ画像と、任意でギャラリーのサムネイルを表示します。
Product Gallery Linker すべてのプランに含まれています
クリックした画像に合わせて、商品ギャラリーのカルーセルを移動させるサムネイル一覧。
Product Price どのプランにも含まれます
セール価格や通貨書式を含め、WooCommerceの商品価格を表示します。
Product Rating すべてのプランに含まれます
現在のWooCommerce商品の星評価と、必要に応じてレビュー件数を表示します。
Product Meta どのプランにも含まれています
商品メタ情報カードを表示します：SKU、カテゴリー、タグ。
Product Short Description Included with any plan
商品の短い説明を、段落の構造をそのまま保って表示します。
バリエーションスウォッチ すべてのプランに含まれています
可変商品のバリエーションを選択する、カラーのドットやボタン型のピル。
Add to Cart すべてのプランに含まれます
現在の商品の WooCommerce「カートに追加」フォームを表示します。数量入力欄は任意で追加できます。
Product Tabs すべてのプランに含まれます
WooCommerceの商品データタブ（説明、追加情報、レビュー）を表示します。
Product Share すべてのプランに含まれています
現在のWooCommerce商品について、SNSで共有するためのリンクを含む「Share:」カードを表示します。
Related Products すべてのプランに含まれます
現在の商品に関連する WooCommerce 商品のグリッドを表示します。単一商品テンプレートでのみ表示されます。
ショップとカタログの5件のブロック
グリッド、カルーセル、カテゴリーカード、価格フィルターを備えており、いずれもカテゴリー、タグ、検索、手動で選んだリストから表示する商品を取得できます。
商品すべてのプランに含まれます
WooCommerceの商品を、グリッドまたはリスト形式で表示します。ソース、カテゴリー、タグ、並び順で絞り込めます。
Product Categories どのプランにも含まれています
WooCommerceの商品カテゴリーを、サムネイル、名前、商品数付きのレスポンシブなカードグリッドで表示します。
Product Carousel どのプランにも含まれます
WooCommerceの商品を、スクロール可能なowl-carouselで表示します。自動再生、ナビゲーション矢印、ドット、レスポンシブのブレークポイントに対応しています。
Store Price Filter すべてのプランに含まれています
商品グリッドをその場で絞り込む、2つのハンドルを持つ価格範囲コントロールです。
Conference Tickets どのプランにも含まれます
チケット商品のカテゴリーごとの料金ボックス。各ボックスには数量セレクトと、リアルタイムに反映されるカートに追加リンクがあります。
カート3ブロック
デザインできるカートページで、お客様が実際に目にするアップセルも表示できます。
Cart Table どのプランにも含まれます
商品明細、数量、合計を含むWooCommerceのカートテーブルを表示します。
Cart Totals どのプランにも含まれます
小計、配送料、チェックアウトボタンを含む、WooCommerceのカート合計パネルを表示します。
Cross-Sells どのプランにも含まれます
現在のWooCommerceカートからクロスセル商品を表示します。カートが有効で、クロスセル商品が含まれている場合にのみ表示されます。
チェックアウトの3ブロック
請求フォーム、注文内容の確認、購入者に直前に起きたことを知らせる通知。
Checkout Billing どのプランにも含まれます
WooCommerceのチェックアウト請求先住所フォームを表示します。
Checkout Order Review どのプランにも含まれています
明細と合計を含む、WooCommerceのチェックアウト注文レビューの概要を表示します。
WooCommerce Notices すべてのプランに含まれます
WooCommerceの通知を表示します：エラー、成功メッセージ、情報通知。
ストア内のほかの場所 2個のブロック
上記の4つの画面に含まれないストアブロックです。
ウィッシュリスト すべてのプランに含まれます
お客様が保存した商品を、価格、在庫状況、カートに追加ボタンとともに表示します。テーマオプションのウィッシュリストで選んだページに配置してください。
Wishlist Button すべてのプランに含まれます
現在の商品をお客様のウィッシュリストに保存します。商品テンプレートと商品カードで使用してください。
21件のデモストアのうち3件。このページで買い物客が目にする部分はすべて、背後に設定パネルを持つブロックです。
ページを再読み込みせずに、お客様の操作
通常それぞれにプラグインが必要となるショップ機能が3つ、この連携に含まれています。
属性のカラースウォッチ
管理画面で商品属性の項目に色を設定すると、バリエーション商品はドロップダウンの代わりに色の丸やボタン型の選択肢を表示し、購入者は見た目でバリエーションを選べます。
AJAXでカートに追加
グリッド、カルーセル、カードのオーバーレイから商品を追加すると、その場でカートが更新されます。購入者は閲覧中のページに留まり、ヘッダーのミニカートは件数を表示し続けます。
商品カードのスタイル
カタログの画像をすべて同じ形に固定してカードの高さを揃え、追加のギャラリー画像をホバー時に表示するかスライドショーとして再生するかを選択し、ホバーオーバーレイに表示する内容（購入、クイックビュー、またはその両方）を選べます。
サイトエディターで使える18件のストアテンプレート
ストアの画面はすべて、サイトエディターで開き、編集し、リセットできるブロックテンプレートです。他のブロックテンプレートと同じ方法で編集できます。
個別商品のレイアウト
商品ページは、標準、ギャラリーに追従するスティッキーサマリー、リスト、カラーを生かしたデザイン、ストアデザイン、カスタムリンク付きギャラリーレイアウトの2種類のいずれか、または左サイドバー、右サイドバー、両側サイドバーのバリエーションで配置できます。
ショップページのレイアウト
ショップページ自体のレイアウトは、全幅、左サイドバー、右サイドバー、または両側のサイドバーから選択でき、フィルターやカテゴリーをカタログに合わせた位置に配置できます。
アーカイブ、カート・チェックアウト
ショップアーカイブ、商品カテゴリーのアーカイブ、カート、チェックアウトは、それぞれテンプレートとして含まれています。テーマが提供する WooCommerce テンプレートの上書きとあわせてご利用いただけます。
ストアテンプレートは、サイトエディター独自のテンプレートパネルで、Canvasのテンプレートと並んで「woocommerce」の下に表示され、同じ画面からリセットできます。
エディターから商品ごとにレイアウトを割り当てるか、テーマオプションでストア全体のデフォルトを設定できます。サイトエディターでカスタマイズしたテンプレートは、アップデート後もカスタマイズされたまま維持され、Canvasはアップデート後に変更されたテンプレートをお知らせします。
39件のショップオプション、5個のタブ
カタログ、商品ページ、カートとチェックアウト、ヘッダーのミニカートについて、ストア全体のデフォルトを設定できます。問い合わせを受け付けるストア向けのカタログモードも含まれます。1ページあたりの商品数、ページネーション、商品画像の形状、ギャラリーの追加画像、カードのオーバーレイはすべてここで設定します。ただし、いずれかを個別に設定したブロックは、配置されたページでは引き続きそちらが優先されます。
- カタログ：画面サイズごとの1行あたりの商品数、画像の形状、ホバー時の動作、セールバッジ
- 商品ページ：単一商品画面の表示内容と、固定表示される「カートに追加」バー
- カートとチェックアウト：無料配送までの進捗バーと、余計な要素のないチェックアウト画面
- ミニカート：買い物客が商品を追加したときのヘッダーカートの動作
- カタログモード：価格と購入ボタンを非表示にし、問い合わせボタンを表示
5つのWooCommerceスイッチ
WooCommerceは、商品を販売しないページも含め、サイトのすべてのページでスクリプトとスタイルシートを読み込みます。この5つのスイッチで、その読み込みを止められます。いずれも元に戻すことができます。
- ストア出力のないページでWooCommerceのJavaScriptを削除
- そのレポートを使わない場合は、注文の流入元トラッキングをオフにしてください
- ページの読み込みごとにカートフラグメントのスクリプトが行うポーリングを停止
- アカウントとチェックアウト以外のページではパスワード強度ライブラリを読み込まない
- チェックアウトとアカウントのページ以外では、同梱の Select2 ライブラリを読み込まないようにします
21個のデモはすべて、実際に動作するWooCommerceストアです
商品、カテゴリー、属性、カート、チェックアウトがインポート済みで、すぐにテスト注文を受けられる状態です。決める前に、いずれもライブでプレビューできます。
Bag Store デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 9ページ · インストール内容：Bag Store デモのブロックとコンテンツタイプ
CanvasRoam デモ、ライブプレビュー（新しいタブで開きます）
ポートフォリオ・個人 · 10 ページ · インストール内容：CanvasRoam デモのブロックとコンテンツタイプ
Christmas Store デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 6ページ
Conference デモ、ライブプレビュー（新しいタブで開きます）
イベント・ウェディング · 25ページ · インストール内容：Conferenceデモのブロックとコンテンツタイプ
Drone デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 12ページ
eBook デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 9ページ
Fashion Shop デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 25ページ
Fashion Store デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 16ページ
FORM 2026 デモ、ライブプレビュー（新しいタブで開きます）
イベント・ウェディング · 14ページ · インストール内容：FORM 2026デモのブロックとコンテンツタイプ
Furniture デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 12ページ
Game of Canvas デモ、ライブプレビュー（新しいタブで開きます）
エンタメ・コミュニティ · 12ページ · インストール内容：Game of Canvasデモのブロックとコンテンツタイプ
Illustrator デモ、ライブプレビュー（新しいタブで開きます）
ポートフォリオ・個人 · 7 ページ · インストール内容：Illustrator デモのブロックとコンテンツタイプ
Jewelry Boutique デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 17ページ
Podcasts デモ、ライブプレビュー（新しいタブで開きます）
ブログ・マガジン · 13ページ · インストール内容：Podcastsデモのブロックとコンテンツタイプ
Pottery Shop デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 12ページ
Speaker Store デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 11ページ
Supplement Store デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 13ページ
Wildroot Gear デモ、ライブプレビュー（新しいタブで開きます）
ショップ・EC · 14ページ · インストール内容：Wildroot Gear デモのブロックとコンテンツタイプ
Wine Estate デモ、ライブプレビュー（新しいタブで開きます）
フード・ドリンク · 10ページ · インストール内容：Wine Estateデモのブロックとコンテンツタイプショップページは複製ではなく、そのまま取り込まれます
ストアデザインをインポートするときによくある不安は、気づいたらチェックアウトページが二つになっていることです。Canvasは、デモのWooCommerceページを、お使いのサイトにすでにあるページに割り当てます。
すべてのストアデモが読み込まれる際に使うインポート画面と、それを取り消すロールバック機能です。
1つのショップ、1つのカート、1つのチェックアウト
インポーターは既存の WooCommerce ページを見つけ、デモのメニューとリンクをそのページに直接割り当てます。
元に戻せる
インポートで作成された内容はすべて記録されているため、1つの画面でデモコンテンツを削除し、インポート前にあった設定とメニューを元に戻せます。
含まれる製品
デモの商品、カテゴリー、属性、スウォッチカラーはデザインに含まれて届くため、自分の商品に差し替えている間もカタログは正しく表示されます。
または必要なページだけ
ページ単位のインポートを選ぶと、デモのページのみを取り込めます。テーマオプション、メニュー、フロントページは含まれません。
それでもWooCommerceプラグインは必要ですか？
はい、CanvasはWooCommerceの上にブロック、テンプレート、オプションを追加するもので、WooCommerceの機能を置き換えることはありません。注文、商品、税金、配送、決済はWooCommerceに残り、他の拡張機能が想定する場所で管理されます。ストアのデモから始める場合、インポートを実行する前にセットアップウィザードがWooCommerceをインストールして有効化します。
ストアのデモをインポートすると、ショップページとチェックアウトページが置き換わりますか？
いいえ。Canvasのインポーターは、サイトに既にあるWooCommerceのページを取り込むため、ショップ、カート、チェックアウト、アカウントのページが二重に作られることはありません。既存の商品と注文は変更されません。
これらをWooCommerce独自のブロックと組み合わせて使えますか？
はい、Canvasのストア向けブロックは通常の登録済みブロックです。そのため、WooCommerceのブロックやWordPressのコアブロックと同じテンプレートやページに並べて配置でき、レイアウト全体を決めずに1つずつ差し替えられます。
カラースウォッチはどのように動作しますか？
WordPressの管理画面で商品属性の項目に色を設定すると、Canvas Variation Swatchesブロックが、ドロップダウンの代わりにその属性を色のドットやボタン型のピルとして表示します。表示先は商品ページと、それを使用しているテンプレートです。
ストア向けブロックは、ご利用のプランに含まれていますか？
はい、24個のCanvasストアブロックはすべてプレミアムブロックで、すべてのプランにすべてのプレミアムブロックが含まれます。ストア向けのアドオンやEC向けの上位プランはありません。他のテーマでは別売りにされていることが多く、クイックビューはAstra Proの機能です。また、OceanWPはeCommerce Proプラグインを別製品として販売しています。
裏方の仕組みではなく、ストアを作る
すべてのプランには、24個のストアブロック、18個のストアテンプレート、21件のデモストアがすべて含まれています。EC向けの上位プランはありません。