WooCommerceの海外仕様っぷりをいかに克服するか
WordPress用プラグイン「WooCommerce」は、標準的なECサイトの機能を無料で使用できる優れたソフトウェアです。そして、対応するTCDテーマ「RIKYU」などを使えば、一昔前では考えられなかったほど簡単に、独自のECサイトが構築できてしまいます。
一方、WooCommerceがグローバル仕様であるがゆえに、日本の商慣習とまったく合わない、という箇所もかなり存在します。そして、TCDテーマではカバーされない、WooCommerce本体の仕様に依拠する部分は、自力で何とかしないといけません。
この記事には、私がWooCommerceの導入直後から行ってきたカスタマイズ内容をまとめ、個人的な備忘録として少しずつ書き足していく予定です。また、本記事はあくまで参考情報であり、以下の点にご注意ください。
「Japanized for WooCommerce」の導入を検討する
「Japanized for WooCommerce」は、導入するだけで、WooCommerceの海外仕様をかなり克服できる素晴らしいプラグインです。このプラグインに頼るだけでも、かなりの部分で日本ならではの独自項目をカバーできます。
後述するように、WooCommerceには「メールに記載される顧客名が『下の名前＋様』になる」という非常にきつい仕様がありますが、こちらのプラグインで「メールテンプレートの顧客名変更」にチェックさえ入れれば問題なくフルネーム表記が可能です。
また、納品書を出力するためのプラグイン導入時（後日の追記予定）も、まず「宛名に『様』がつかない」ことに気づいて愕然としますが、このプラグインで「敬称 (様)」にさえチェックを入れていれば問題は解決します。
このように「Japanized for Woocommerce」は、とりあえず日本でWooCommerceを使おうとするなら、最優先で導入を検討するべきプラグインかもしれません。その上で、なぜ導入を「検討する」なのかと言えば、環境によってはデメリットが生じうるためです。
少なくとも私の環境では、TCD＋KOMOJU Payments（決済サービス）＋Japanized for WooCommerceの組み合わせで、以下のデメリットが生じました。
- 購入手続き画面（レジ）での処理速度が、大幅に低下する
※支払い方法を変更するだけで、3秒ほどかかる - KOMOJU Paymentsとの間に相性問題が発生した（解決済み）
※KOMOJU側の仕様変更時にサイト全体が表示不能に陥った過去あり
また、あまりにも外部プラグインに依存しすぎると、相性問題の発生時や、プラグインの更新が停止された場合などに、自力で問題に対処できる範囲が狭まってしまいます。
まずは、これらのメリット・デメリットを十分に検討した上で、プラグインの導入可否を決定すべきです。なお、ここから先のいくつかの項目には、「Japanized for Woocommerce」の導入を避けた場合のみ必要な内容が含まれています。
自動返信メールの文面を修正する
現在のWooCommerceは日本語に標準対応しており、通常の機能でも、自動返信メールの文章はある程度カスタマイズできます（この点について、以下のコトウリ様の記事がたいへん参考になりました）。
しかし、この標準機能で変更できるのは、メールの最後部など、ごく一部でしかありません。お客様への自動送信メールの冒頭が「注文を処理しました。」「注文の処理が完了しました。」であったり、どこもかしこも英文直訳で、日本の商慣習から外れてしまうのがWooCommerceの泣き所です。
翻訳ファイルを修正し、差し替える
そこで、翻訳ファイルを変更することによって、メール本文の日本語に修正を加え、適切な内容に直す必要が生じます。
この日本語の翻訳ファイルの詳細と変更方法については、以下の記事に詳しく記しておきました1）。翻訳ファイルを開いてメール本文の変更したい文面を検索し、その箇所の日本語訳を書き換える、という方法で対処できるはずです。
1）私の環境では、最近のWooCommerceのバージョンアップ以降、以前からの方法（.mo、.poファイルの修正）が機能しないため、「woocommerce-ja.l10n.php」ファイルを編集する必要があるのです。非常に困っています。
翻訳ファイル変更後の注意点
なお、この方法では、WooCommerceのバージョンアップで新規メッセージが追加された時には、改めて最新の翻訳ファイルを編集し直さないといけません2）。フックを利用して日本語を修正する方法（参考：職人工房さま）の方が安定運用できそうですが、私にはまだ試せていない状態です。
2）昔のファイルを使い回していると、メッセージが新規追加された場所は、英語のまま表示されてしまいます。最近でも、ユーザー登録時のメッセージ（パスワード設定用メールを送った旨の表示）が新たに追加されたようです。
自動返信メールの宛名をフルネームにする
WooCommerceを試用してみて最初に衝撃を受けるのが、お客様宛の自動返信メールに、フルネームが記載されないことです。「学而 太郎」という名前の方なら、「太郎 様」という宛名がメール本文の冒頭に記載されます3）。
3）プラグイン「Japanized for WooCommerce」で「メールテンプレートの顧客名変更」をONにしている場合、この問題は生じません。
この問題を解決するために、自動返信メールのテンプレートファイルに直接、編集を加えます。詳細は、株式会社こまり様による以下の記事が非常に参考になります。
Eメールテンプレートをダウンロードして書き換える
まず、FTPクライアント等で、サーバーから
/wp-content/plugins/woocommerce/templates/emails
ディレクトリの中身をダウンロードします。その中にあるテンプレートファイル（PHPファイル）の修正が必要です。
特に修正が必要なのは、自動返信で多用される以下の6ファイルでしょう。
- customer-refunded-order.php
- customer-processing-order.php
- customer-on-hold-order.php
- customer-note.php
- customer-invoice.php
- customer-completed-order.php
これらのファイルを開き、前述の引用記事を参考にしながら、以下の箇所を「first_name」から「full_name」に書き換えます。
変更前：
<?php printf( esc_html__( 'Hi %s,', 'woocommerce' ), esc_html( $order->get_formatted_billing_first_name() ) ); ?>変更後：
<?php printf( esc_html__( 'Hi %s,', 'woocommerce' ), esc_html( $order->get_formatted_billing_full_name() ) ); ?>サーバー上のEメールテンプレートを差し替える
そして、編集を終えた「woocommerce/emails」ディレクトリを、中身ごと、サーバー上のテーマ用ディレクトリ直下に配置します（wp-content/themes/テーマ名/woocommerce/emails/）。
なお、通常、テーマ更新時に上記のディレクトリは全て吹き飛びます。ただし、子テーマを使用している場合は、子テーマ直下に「woocommerce/emails/」ディレクトリを作成し、そこにテンプレートを保存しておくことで、比較的安定した運用が可能です4）（もちろん、子テーマを通常の手順で更新した場合は吹き飛びます）。
4）プラグイン「Japanized for WooCommerce」で「メールテンプレートの顧客名変更」をONにしていると、子テーマ直下に配置したメールテンプレートの内容が反映されないことが過去に報告されています（参考1、参考2）のでご注意ください。
メールアドレス・パスワード変更時のメール内容を変更する
ここまでで、大抵の自動返信メールはきちんとカスタマイズできたことになりますが、例外があります。アカウント登録者によるメールアドレス変更や、パスワード変更の手続き時には、WordPressの素のメールが発信されるのです。これは、WooCommerceのEメールテンプレート修正では対応できません（おそらく……）。
送信者も「wordpress@ドメイン名」になってしまい、WordPressのことをご存じないお客様にはどう思われるのか、何とも判断がつかないのが悩ましいところです。当サイトでは、「子テーマを作成して、function.phpファイルを書き換える」方法を採用しています。この点については、みらいクリエイターズ様の以下の記事を参考にさせていただきました。
事前に子テーマを導入しておく
さて、テーマ本体のfunction.phpに変更を加えた場合、テーマがアップデートされるたびに変更箇所が吹き飛びます。安定運用のためには、子テーマを導入しておくのが無難です。
RIKYUの子テーマは、以下の方法で作成すると、いちおう動きます（繰り返しになりますが、無保証です）。
子テーマの「function.php」にコードを書き足す
子テーマ用のファイルを作成したら、子テーマの「function.php」に、修正する項目を書き加えます。修正後、子テーマをアップロード・有効化すれば完了です。
①差出人名・差出人メールアドレスを変更
//送信メールの差出人名を変更
function custom_mail_from_name( $email_from ) {
return 'ここに差出人名を入れる';
}
add_filter( 'wp_mail_from_name', 'custom_mail_from_name' );
//差出人のメールアドレスを変更
function custom_mail_from( $email ) {
return 'ここに差出人メールアドレスを入れる';
}
add_filter( 'wp_mail_from', 'custom_mail_from' );②メールアドレス変更時の文面変更（例）：
//メールアドレス変更時に送信されるメールの「件名・メッセージ」を変更
function custom_email_change_email( $email_change_email ) {
//件名を編集
$subject = 'ここに件名を入れる（例：［○○ストア］メールアドレス変更のお知らせ）';
//メッセージを編集
$message = '（汎用の宛名でよい場合）○○ストア ご利用者 様' . "\r\n";
$message .= "\r\n";
$message .= '平素よりご愛顧を賜り、厚く御礼申し上げます。' . "\r\n";
$message .= '○○ストアで、お客様のメールアドレスが変更されました。' . "\r\n";
$message .= "\r\n";
$message .= '新メールアドレス：###NEW_EMAIL###' . "\r\n";
$message .= '旧メールアドレス：###EMAIL###' . "\r\n";
$message .= "\r\n";
$message .= 'もしご自身でメールアドレスを変更した覚えがない場合は、' . "\r\n";
$message .= '当サイトお問い合わせ窓口までご連絡ください。' . "\r\n";
$message .= 'お問い合わせ窓口：' . "\r\n";
$message .= "\r\n";
$message .= '────────────────────────' . "\r\n";
$message .= '○○ストア' . "\r\n";
$message .= 'URL：###SITEURL###' . "\r\n";
$message .= '────────────────────────';
//件名とメッセージを表示
$email_change_email[ 'subject' ] = $subject;
$email_change_email[ 'message' ] = $message;
return $email_change_email;
}
add_filter( 'email_change_email', 'custom_email_change_email' );③パスワード変更時の文面変更（例）：
//パスワード変更時に送信されるメールの「件名・メッセージ」を変更
function custom_password_change_email( $password_change_email ) {
//件名を編集
$subject = 'ここに件名を入れる（例：［○○ストア］パスワード変更のお知らせ）';
//メッセージを編集
$message = '（汎用の宛名でよい場合）○○ストア ご利用者 様' . "\r\n";
$message .= "\r\n";
$message .= '平素よりご愛顧を賜り、厚く御礼申し上げます。' . "\r\n";
$message .= '○○ストアで、お客様のパスワードが変更されました。' . "\r\n";
$message .= "\r\n";
$message .= 'もしご自身でパスワードを変更した覚えがない場合は、' . "\r\n";
$message .= '当サイトお問い合わせ窓口までご連絡ください。' . "\r\n";
$message .= 'お問い合わせ窓口：' . "\r\n";
$message .= "\r\n";
$message .= '────────────────────────' . "\r\n";
$message .= '○○ストア' . "\r\n";
$message .= 'URL：###SITEURL###' . "\r\n";
$message .= '────────────────────────';
//件名とメッセージを表示
$password_change_email[ 'subject' ] = $subject;
$password_change_email[ 'message' ] = $message;
return $password_change_email;
}
add_filter( 'password_change_email', 'custom_password_change_email' );カートと購入手続画面の配色を直す
どうも自分の環境が原因のようなのですが、最近のWooCommerceのバージョンアップ以降、カート周りの配色がおかしくなるトラブルに見舞われました。あちこちの背景や枠線がギラギラした色遣いになり、まったく目に優しくないので、何とかしないといけません5）。
5）一時的な問題かもしれませんので、参考情報程度にお読みください。
そこで、このサイトでは、カスタムCSSに以下の内容を追加してソフトな配色に直しています（TCDテーマ＋KOMOJU用の設定ですのでご注意ください）。カートのメッセージや、支払方法の選択部分の背景が、青～グレーをベースにした、マイルドな色になるはずです（フキダシの△は、うまく調整できないので消しました）。色番号を変えれば、好みの色に変更できます。
/* WooCommerce標準カラー変更への対応 */
.woocommerce-error, .woocommerce-info, .woocommerce-message {
background-color: #f9f9f9;
color: #000000;
}
.woocommerce form .form-row .input-text, .woocommerce form .form-row select {
border-color: #dfdfdf;
}
#add_payment_method #payment, .woocommerce-cart #payment, .woocommerce-checkout #payment {
background: #f2f7ff;
}
#add_payment_method #payment div.payment_box, .woocommerce-cart #payment div.payment_box, .woocommerce-checkout #payment div.payment_box {
background-color: #f7fafe;
}
/* お支払い方法のフキダシから△部分を削除 */
#add_payment_method #payment div.payment_box::before, .woocommerce-cart #payment div.payment_box::before, .woocommerce-checkout #payment div.payment_box::before {
border: none;
}その他、学而図書の私的カスタマイズ内容は、以下の記事でもご確認いただけます。
