WooCommerceの各画面をカスタマイズする方法

WordPressのECカートプラグイン「WooCommerce」で、カートの画面などの各画面をカスタマイズするには、次のような手順でテンプレートを上書きしていきます。

add_theme_supportでwoocommerceを有効にする

利用しているテーマフォルダー内のfunctions.phpなどで、次のようにadd_theme_supportを使って、テーマ内でWooCommerceを利用できるようにします。

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

これで準備完了です。

テンプレートファイルの場所を探す

WooCommerceのテンプレートファイルは、次の場所に配置してあります。

/wp-content/plugins/woocommerce/templates/

この中に、画面ごとにテンプレートファイルが準備されているので、カスタマイズしたい画面やパーツのテンプレートファイルを探しましょう。見つかったら、そのファイルをコピーします。

カスタマイズ用フォルダーを作る

そしたら、テーマフォルダー内に「woocommerce」という名前のフォルダーを作成します。そして、今コピーしたファイルをディレクトリー構造を保ったままペーストします。例えば、以下のファイルをコピーした場合は、

/wp-content/plugins/woocommerce/templates/auth/header.php

次のフォルダーにコピーします。なお「templates」フォルダーは不要です。

/wp-content/themes/(mytheme)/woocommerce/auth/header.php

後は、このファイルをカスタマイズすれば、このファイルがテンプレートファイルとして利用されるようになります。

こうして、WooCommerceの各画面をカスタマイズしていきましょう。

この記事を書いた人

谷口 允(たにぐち まこと)

エイチツーオー・スペース代表。関連会社でオンライン教育コンテンツ制作会社「ともすた」代表も勤める。

「ウェブをちゃんと」をテーマに、ウェブや動画を「ちゃんと」活用するためのアドバイスなどを行う。
主な著書に「よくわかるPHPの教科書」や、「マンガでざっくり学ぶプログラミング(監修)」など。