# すべてのストア画面をブロックで構築できるWooCommerceテーマ URL: https://canvaswp.com/ja/woocommerce/ Updated: 2026-11-05 WooCommerce WordPressのエディターで用意されているブロックを使って、商品ページ、ショップのグリッド、カート、チェックアウトをデザインできます。その後、動作するストアとして読み込まれるデモから始めることもできます。注文はWooCommerceが管理し、デザインはCanvasが担当します。 更新日：2026年11月5日 24 WooCommerceブロック 18 ストアテンプレート 21 インポートできるデモストア ブロック ## 売上につながる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 すべてのプランに含まれます 現在の商品をお客様のウィッシュリストに保存します。商品テンプレートと商品カードで使用してください。 ### 衣料品ストア コレクションページ、可変商品、商品数を表示するヘッダーカートを備えたファッションのカタログです。 [ECサイト向けテーマ](https://canvaswp.com/ja/wordpress-themes/ecommerce/) ### 家具 販売と賃貸を1つのカタログで扱え、商品グリッドと個別商品ページはどちらもブロックとして構成されています。 [インテリアデザインテーマ](https://canvaswp.com/ja/wordpress-themes/interior-design/) ### ワイン デザインが商品写真を引き立て、ショップのページがその背後に配置されたワイナリーのストアです。 [レストラン向けテーマ](https://canvaswp.com/ja/wordpress-themes/restaurant/) 21件のデモストアのうち3件。このページで買い物客が目にする部分はすべて、背後に設定パネルを持つブロックです。 [314個のCanvasブロックすべて](https://canvaswp.com/ja/blocks/) 動作 ## ページを再読み込みせずに、お客様の操作 通常それぞれにプラグインが必要となるショップ機能が3つ、この連携に含まれています。 ### 属性のカラースウォッチ 管理画面で商品属性の項目に色を設定すると、バリエーション商品はドロップダウンの代わりに色の丸やボタン型の選択肢を表示し、購入者は見た目でバリエーションを選べます。 ### AJAXでカートに追加 グリッド、カルーセル、カードのオーバーレイから商品を追加すると、その場でカートが更新されます。購入者は閲覧中のページに留まり、ヘッダーのミニカートは件数を表示し続けます。 ### 商品カードのスタイル カタログの画像をすべて同じ形に固定してカードの高さを揃え、追加のギャラリー画像をホバー時に表示するかスライドショーとして再生するかを選択し、ホバーオーバーレイに表示する内容（購入、クイックビュー、またはその両方）を選べます。 テンプレート ## サイトエディターで使える18件のストアテンプレート ストアの画面はすべて、サイトエディターで開き、編集し、リセットできるブロックテンプレートです。他のブロックテンプレートと同じ方法で編集できます。 ### 個別商品のレイアウト 商品ページは、標準、ギャラリーに追従するスティッキーサマリー、リスト、カラーを生かしたデザイン、ストアデザイン、カスタムリンク付きギャラリーレイアウトの2種類のいずれか、または左サイドバー、右サイドバー、両側サイドバーのバリエーションで配置できます。 ### ショップページのレイアウト ショップページ自体のレイアウトは、全幅、左サイドバー、右サイドバー、または両側のサイドバーから選択でき、フィルターやカテゴリーをカタログに合わせた位置に配置できます。 ### アーカイブ、カート・チェックアウト ショップアーカイブ、商品カテゴリーのアーカイブ、カート、チェックアウトは、それぞれテンプレートとして含まれています。テーマが提供する WooCommerce テンプレートの上書きとあわせてご利用いただけます。 ストアテンプレートは、サイトエディター独自のテンプレートパネルで、Canvasのテンプレートと並んで「woocommerce」の下に表示され、同じ画面からリセットできます。 エディターから商品ごとにレイアウトを割り当てるか、テーマオプションでストア全体のデフォルトを設定できます。サイトエディターでカスタマイズしたテンプレートは、アップデート後もカスタマイズされたまま維持され、Canvasはアップデート後に変更されたテンプレートをお知らせします。 テーマオプション ## 39件のショップオプション、5個のタブ カタログ、商品ページ、カートとチェックアウト、ヘッダーのミニカートについて、ストア全体のデフォルトを設定できます。問い合わせを受け付けるストア向けのカタログモードも含まれます。1ページあたりの商品数、ページネーション、商品画像の形状、ギャラリーの追加画像、カードのオーバーレイはすべてここで設定します。ただし、いずれかを個別に設定したブロックは、配置されたページでは引き続きそちらが優先されます。 - カタログ：画面サイズごとの1行あたりの商品数、画像の形状、ホバー時の動作、セールバッジ - 商品ページ：単一商品画面の表示内容と、固定表示される「カートに追加」バー - カートとチェックアウト：無料配送までの進捗バーと、余計な要素のないチェックアウト画面 - ミニカート：買い物客が商品を追加したときのヘッダーカートの動作 - カタログモード：価格と購入ボタンを非表示にし、問い合わせボタンを表示 [販売を助けるストアオプション](https://docs.canvaswp.com/store-options-that-help-you-sell) [カタログモード](https://docs.canvaswp.com/catalog-mode) [ウィッシュリスト](https://docs.canvaswp.com/the-wishlist) テーマオプション、ショップセクション、カタログタブ。 パフォーマンス ## 5つのWooCommerceスイッチ WooCommerceは、商品を販売しないページも含め、サイトのすべてのページでスクリプトとスタイルシートを読み込みます。この5つのスイッチで、その読み込みを止められます。いずれも元に戻すことができます。 - ストア出力のないページでWooCommerceのJavaScriptを削除 - そのレポートを使わない場合は、注文の流入元トラッキングをオフにしてください - ページの読み込みごとにカートフラグメントのスクリプトが行うポーリングを停止 - アカウントとチェックアウト以外のページではパスワード強度ライブラリを読み込まない - チェックアウトとアカウントのページ以外では、同梱の Select2 ライブラリを読み込まないようにします [すべての35件のパフォーマンス最適化](https://canvaswp.com/ja/performance/) テーマオプション、パフォーマンス、WooCommerceタブ。 デモストア ## 21個のデモはすべて、実際に動作するWooCommerceストアです 商品、カテゴリー、属性、カート、チェックアウトがインポート済みで、すぐにテスト注文を受けられる状態です。決める前に、いずれもライブでプレビューできます。 ### [Bag Store デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/ecommerce/) ショップ・EC · 9ページ · [インストール内容：Bag Store デモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-ecommerce) ### [Barber Shop デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/barber/) 美容・スパ · 7ページ · [インストール内容：Barber Shopデモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-barber) ### [CanvasRoam デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/youtube-creator/) ポートフォリオ・個人 · 10 ページ · [インストール内容：CanvasRoam デモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-youtube-creator) ### [Christmas Store デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/xmas/) ショップ・EC · 6ページ ### [Clothing Store デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/store/) ショップ・EC · 19ページ · [インストール内容：Clothing Store デモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-store) ### [Conference デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/conference/) イベント・ウェディング · 25ページ · [インストール内容：Conferenceデモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-conference) ### [Drone デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/drone/) ショップ・EC · 12ページ ### [eBook デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/ebook/) ショップ・EC · 9ページ ### [Fashion Shop デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/shop/) ショップ・EC · 25ページ ### [Fashion Store デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/fashion-store/) ショップ・EC · 16ページ ### [FORM 2026 デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/event-conference/) イベント・ウェディング · 14ページ · [インストール内容：FORM 2026デモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-event-conference) ### [Furniture デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/furniture/) ショップ・EC · 12ページ ### [Game of Canvas デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/gaming/) エンタメ・コミュニティ · 12ページ · [インストール内容：Game of Canvasデモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-gaming) ### [Illustrator デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/illustrator/) ポートフォリオ・個人 · 7 ページ · [インストール内容：Illustrator デモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-illustrator) ### [Jewelry Boutique デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/jewellery-boutique/) ショップ・EC · 17ページ ### [Podcasts デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/podcasts/) ブログ・マガジン · 13ページ · [インストール内容：Podcastsデモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-podcasts) ### [Pottery Shop デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/shop-2/) ショップ・EC · 12ページ ### [Speaker Store デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/speaker/) ショップ・EC · 11ページ ### [Supplement Store デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/supplements/) ショップ・EC · 13ページ ### [Wildroot Gear デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/gear/) ショップ・EC · 14ページ · [インストール内容：Wildroot Gear デモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-gear) ### [Wine Estate デモ、ライブプレビュー（新しいタブで開きます）](https://demos.canvaswp.com/wine/) フード・ドリンク · 10ページ · [インストール内容：Wine Estateデモのブロックとコンテンツタイプ](https://docs.canvaswp.com/design-wine) [すべての88個のデモ](https://canvaswp.com/ja/demos/) 稼働中のストアへのインポート ## ショップページは複製ではなく、そのまま取り込まれます ストアデザインをインポートするときによくある不安は、気づいたらチェックアウトページが二つになっていることです。Canvasは、デモのWooCommerceページを、お使いのサイトにすでにあるページに割り当てます。 すべてのストアデモが読み込まれる際に使うインポート画面と、それを取り消すロールバック機能です。 ### 1つのショップ、1つのカート、1つのチェックアウト インポーターは既存の WooCommerce ページを見つけ、デモのメニューとリンクをそのページに直接割り当てます。 ### 元に戻せる インポートで作成された内容はすべて記録されているため、1つの画面でデモコンテンツを削除し、インポート前にあった設定とメニューを元に戻せます。 ### 含まれる製品 デモの商品、カテゴリー、属性、スウォッチカラーはデザインに含まれて届くため、自分の商品に差し替えている間もカタログは正しく表示されます。 ### または必要なページだけ ページ単位のインポートを選ぶと、デモのページのみを取り込めます。テーマオプション、メニュー、フロントページは含まれません。 よくある質問 ## Canvasで販売する ストアオーナーが最初によく尋ねる内容です。各ブロックとオプションの詳細は [ドキュメント](https://docs.canvaswp.com/setting-up-your-shop)をご覧ください。 **それでもWooCommerceプラグインは必要ですか？** はい、CanvasはWooCommerceの上にブロック、テンプレート、オプションを追加するもので、WooCommerceの機能を置き換えることはありません。注文、商品、税金、配送、決済はWooCommerceに残り、他の拡張機能が想定する場所で管理されます。ストアのデモから始める場合、インポートを実行する前にセットアップウィザードがWooCommerceをインストールして有効化します。 **ストアのデモをインポートすると、ショップページとチェックアウトページが置き換わりますか？** いいえ。Canvasのインポーターは、サイトに既にあるWooCommerceのページを取り込むため、ショップ、カート、チェックアウト、アカウントのページが二重に作られることはありません。既存の商品と注文は変更されません。 **これらをWooCommerce独自のブロックと組み合わせて使えますか？** はい、Canvasのストア向けブロックは通常の登録済みブロックです。そのため、WooCommerceのブロックやWordPressのコアブロックと同じテンプレートやページに並べて配置でき、レイアウト全体を決めずに1つずつ差し替えられます。 **カラースウォッチはどのように動作しますか？** WordPressの管理画面で商品属性の項目に色を設定すると、Canvas Variation Swatchesブロックが、ドロップダウンの代わりにその属性を色のドットやボタン型のピルとして表示します。表示先は商品ページと、それを使用しているテンプレートです。 **ストア向けブロックは、ご利用のプランに含まれていますか？** はい、24個のCanvasストアブロックはすべてプレミアムブロックで、すべてのプランにすべてのプレミアムブロックが含まれます。ストア向けのアドオンやEC向けの上位プランはありません。他のテーマでは別売りにされていることが多く、クイックビューは [Astra Proの機能](https://canvaswp.com/ja/compare/astra/)です。また、OceanWPは [eCommerce Proプラグイン](https://canvaswp.com/ja/compare/oceanwp/)を別製品として販売しています。