T.N.K.Japan

【WooCommerce】自作テーマが参照するテンプレートは？

2020年4月2日

WordPressでECサイトが作れる無料プラグインWooCommerce。子テーマを自作したり、既存のテーマをWooCommerceに適用させる方も増えているようです。当記事ではWooCommerceの商品ページやカテゴリ一覧ページがどのテンプレートを参照するかについて解説します。

当記事の環境：WordPress バージョン 5.3.2、WooCommerceバージョン 4.0.1

WooCommerce対応テーマの作り方

WooCommerce対応テーマを自作する、または既存テーマをWooCommerce対応にする方法はWooCommerce公式のドキュメントで説明されています。
Third party / custom / non-WC theme compatibility（英語）
日本語でも多くの方が記事を書いてくださっています。「Woocommerce 自作テーマ」で検索すると日本語の記事がたくさんヒットします。
そこで紹介されている方法は大体以下のような手順です。

1. page.phpをコピーしてwoocommerce.phpというテンプレートを作る
2. woocommerce.phpを開き以下の記述を削除し、

   <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
   

   <?php endwhile; endif; ?>
   

   以下の1行を挿入する。

   <?php woocommerce_content(); ?>
   

3. WooCommerceサポートを宣言する。
   具体的にはfunctions.phpに以下のコードを追加する。（add_actionとfunctionの上下が逆の場合もあります。）

   add_action( 'after_setup_theme', 'woocommerce_support' );
   function woocommerce_support() {
   add_theme_support( 'woocommerce' );
   }
   

4. woocommerce.phpとfunctions.phpをテーマディレクトリにアップロードする。

以上で、あなたのテーマがWooCommerceのテーマになりました。

WooCommerceサポート宣言の確認方法

WooCommerceサポート宣言とは「このテーマはWooCommerceをサポートしています」という宣言です。管理画面の WooCommerce > ステータス から確認できます。ステータス画面のかなり下の方に「テーマ」という項目があります。

もし、現在のテーマがWooCommerceサポート宣言されていなければ赤字で「宣言されていません」と表示されます。

上記手順3のようにサポート宣言をすると以下のような表示になります。

参照されるテンプレートを変えたい

以上ご紹介した手順をおこなうと、WooCommerceで作られるページはを商品一覧ページもカテゴリ一覧ページも商品詳細ページも、みんなwoocommerce.phpが参照されます。
そんなのイヤだ！私はどうしても商品一覧ページと商品詳細ページのテンプレートを分けたい！
という場合は、woocommerce.phpの代わりに、single-product.phpとarchive-product.phpを作成します。方法は上記手順の1と同じです。その後single-product.phpとarchive-product.phpをお好みに編集します。

WooCommerce関係テンプレートまとめ

本記事でご紹介した内容を表にまとめました。

ページ種類	URL	woocommerce.phpがあるとき	woocommerce.phpがないとき
ショップのトップページ	https://yoursite/shop/	woocommerce.php	archive-product.php
カテゴリ一覧ページ	https://yoursite/product-category/カテゴリスラッグ/	woocommerce.php	taxonomy-product_cat.php archive-product.php
タグ一覧ページ	https://yoursite/product-tag/タグスラッグ/	woocommerce.php	taxonomy-product_tag.php archive-product.php
商品詳細ページ	https://yoursite/product/商品ID/	woocommerce.php	single-product.php

※複数のテンプレートがある場合は上が優先されます。
※そのテンプレートが無い場合はplugins/woocommerce/template 内のテンプレートが参照されます。

参照サイト

当記事では以下のサイト参照いたしました。制作者に感謝いたします。
Third party / custom / non-WC theme compatibility（英語）
WooCommerceのショップページを既存テーマでカスタマイズする最も簡単な方法