概要
WooCommerce は、WooCommerce 固有のテーマではなく、正式にサポートを宣言していなくても、バージョン3.3以降のすべての WordPress テーマで見栄えがよくなります。 テンプレートはコンテンツ内にレンダリングされます。これにより、サイト上ですべてが自然に見えます。
これは、WooCommerce 以外の同じ WooCommerce テーマの前後です。左側は3.3なしのテーマです。 右側は3.3を使ったテーマです。
※以下の画像は公式サイト（WooCommerce.com）から転載しております。
WooCommerce 非対応のテーマは、デフォルトで次のようになります。
- ズーム機能が有効 – 商品画像を拡大/縮小する機能
- ライトボックス機能が有効になりました – 商品ギャラリーの画像がポップアップ表示され、詳細を確認できます
- レビューではなくコメントを有効にする – 訪問者/購入者は投稿と同じようにコメントを残すことができ、商品の評価やレビューはできません
3.3より前のバージョンの WooCommerce を使用している場合は、最新バージョンにアップデートすることをお勧めします。 テーマに関する問題を経験しているなら、解決策になる可能性があるので、まずアップデートするべきです。
WooCommerce 3.3 を使用していないサイト/ストア
デフォルトの WooCommerce コンテンツラッパーが選択したテーマと一致しない場合に問題が発生します。 これは、WooCommerce ページのレイアウトを崩し、サイドバーを誤った位置に移動させることによって現れます。
WooCommerce は独自のテンプレートを使用してこれらのページを表示しているため、ショップページ、単一の商品ページ、分類ページ（カテゴリやタグ）に影響を与える可能性があります。 他のページ（チェックアウト、カート、アカウント）はテーマの page.php テンプレートを使用するので影響を受けません。
これを解決するには2つの方法があります。
- フックを使う（上級ユーザー/開発者向け）
- テーマ内で包括的な woocommerce_content() 関数を使用する
注：これは開発者レベルのドキュメントです。コードやテンプレートに慣れておらず、競合の可能性がある場合は、開発者に相談することをご検討ください。 WooCommerce 特化したご相談には WooCommerce のコアコントリビューターが在籍する職人工房が有料サポートしております。良かったらお問い合わせください。
互換性のないテーマ
すでに述べたように、サイトが WooCommerce 3.3 以上を使用している場合、ほとんどのテーマは WooCommerce で動作します。 しかし、これらのテーマは WooCommerce と互換性がない状態となります。
WooCommerce と互換性がないテーマはいくつかの理由で問題が発生する場合があります。 WordPress のコアフィルターなどを誤って使用しているばあいなどです。 結果として、WooCommerce や WooCommerce の機能拡張プラグインなどを壊してしまい、サポートすることが出来ません。ご注意ください。
woocommerce_content() の利用
このソリューションでは、WooCommerce のすべてのタクソノミーおよび投稿タイプの表示に使用される新しいテンプレートページをテーマ内に作成できます。 簡単なキャッチオールソリューションですが、このテンプレートがすべての WC タクソノミー（商品カテゴリなど）および投稿タイプ（商品アーカイブ、単一商品ページ）に使用されるという欠点があります。 開発者は代わりにフックを使用することをお勧めします。
テンプレートページを設定する
Duplicate page.php
テーマの page.php ファイルを複製して、 woocommerce.php という名前を付けます。 このファイルは、 wp-content/themes/YOURTHEME/woocommerce.php のようになります。
ページを編集（woocommerce.php）
新しく作成した woocommerce.php をテキストエディタ、または利用しているエディタで開きます。
ループを置き換える
次にループを見つける必要があります（The_Loopを参照）。 ループは通常次のもので始まります。
<?php if ( have_posts() ) :
そして、通常は以下で終わります。
<?php endif; ?>
これはテーマによって異なります。 見つけたら、それを削除します。 その代わりに、以下を入れます。
<?php woocommerce_content(); ?>
これにより、 WooCommerce のループが代わりに使用されます。 ファイルを保存してください。 これで終わりです。
フックを使う
フックを利用する方法は woocommerce_content を使用するよりも複雑ですが、より柔軟です。 これは、テーマを作成するときに使用する方法と似ています。 それはまた私達が Twenty Ten から Twenty Sixteen のテーマとうまく統合するために使用する方法です。
テーマの functions.php ファイルに数行を挿入します。
まず WooCommerce ラッパーのフックを外します。
remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);
それからあなたのテーマが必要とするラッパーを表示するためにあなた自身の関数をフックします。
add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);
function my_theme_wrapper_start() {
echo '<section id="main">';
}
function my_theme_wrapper_end() {
echo '</section>';
}
マークアップがあなたのテーマのものと一致することを確認してください。 どのクラスまたは ID を使用するべきかわからない場合は、テーマの page.php を参照してください。
WooCommerce テーマを使用する
上記の方法を解決できない場合や開発者を参加させることができない場合は、手間のかからないソリューションとしてそのまま使用できる WooCommerce テーマを検討することをお勧めします。
このサイトのコンテンツは公式サイトの以下ページを参考に作っています。
Third party / custom / non-WC theme compatibility