WooCommerceチェックアウトブロックの文言変更が困難な理由とその対処法

はじめに

WooCommerceでECサイトを構築していると、チェックアウトページの「Add a note to your order」や「(optional)」といった英語表記を日本語に変更したくなることがあります。従来のWooCommerceであれば翻訳ファイルを編集するだけで済んでいましたが、新しいチェックアウトブロック¹では事情が異なります。

今回は、この問題に直面した際の調査結果と、なぜ従来の方法では解決できないのかを詳しく解説します。

問題の発生状況

WooCommerceの新しいチェックアウトブロックを使用している際、以下のような英語表記が日本語に変更されない問題が発生しました。

「Add a note to your order」（注文メモのチェックボックス）
「(optional)」（任意項目の表示）
「ADD+」「SELECT+」（動的に追加される操作ボタン）

これらの文言は、WordPressの管理画面で言語設定を日本語にし、WooCommerceの翻訳ファイルも適用されている状況でも英語のまま表示されます。

従来の翻訳方法との違い

従来のWooCommerce（ショートコード版）

従来のWooCommerceでは、すべての表示テキストがPHPで生成され、__() 関数による国際化（i18n）システム²で翻訳されていました。これは料理のレシピのようなもので、材料（英語テキスト）を決まった手順（翻訳ファイル）で調理すれば、必ず同じ結果（日本語表示）が得られる仕組みでした。

新しいWooCommerceブロック

一方、新しいチェックアウトブロックはJavaScriptとReactで構築されています。これは従来のレシピとは全く異なる調理法で、材料や手順も独立しているため、従来の翻訳ファイルが効かない部分が存在します。

技術的な原因の詳細

ブロックシステムの仕組み

WooCommerceブロックは、Gutenbergブロックエディター³上で動作する独立したJavaScriptアプリケーションです。これらのブロックは以下の特徴を持ちます。

動的レンダリング: ページ読み込み後にJavaScriptによって内容が生成される 独立した翻訳システム: PHPベースの従来翻訳とは別のJavaScript国際化システムを使用 コンポーネント指向: 小さな部品を組み合わせてページを構築する設計

具体的な問題箇所

調査の結果、問題の文言は以下の場所で生成されていることが判明しました。

PHPファイル: plugins/woocommerce/includes/class-wc-frontend-scripts.php⁴

関数: get_script_data() メソッド内の 'wc-address-i18n' ケース

case 'wc-address-i18n':
    return array(
        'locale' => wp_json_encode( WC()->countries->get_country_locale() ),
        'locale_fields' => wp_json_encode( WC()->countries->get_country_locale_field_selectors() ),
        'i18n_required_text' => esc_attr__( 'required', 'woocommerce' ),
        'i18n_optional_text' => esc_html__( 'optional', 'woocommerce' ),
    );
Code language: PHP (php)

このコードは確かに翻訳可能な形で記述されていますが、チェックアウトブロック側でこれらのデータが正しく利用されていない状況があります。

解決方法の検討

registerCheckoutFiltersの調査

WooCommerceブロックには registerCheckoutFilters という公式のカスタマイズ方法⁵が存在します。これはブロック内の表示内容を変更するためのフィルターシステムです。

しかし、現在利用可能なフィルターを調査したところ、「ADD+」「SELECT+」「(optional)」などの動的に生成される要素を変更するフィルターは提供されていない⁶ことが分かりました。

利用可能な主要フィルターは以下の通りです。

cartItemPrice: カートアイテムの価格表示変更
itemName: 商品名の変更
proceedToCheckoutButtonLabel: チェックアウトボタンのラベル変更
placeOrderButtonLabel: 注文ボタンのラベル変更

実用的な解決策：CSSによる文言置き換え

現時点で最も確実な解決方法は、CSSの疑似要素を使用した文言の置き換えです。

/* WooCommerce注文メモの文言変更 */
.wc-block-components-checkbox__label {
    font-size: 0 !important;
}

.wc-block-components-checkbox__label::after {
    content: "注文の備考";
    font-size: 14px !important;
}
Code language: CSS (css)

この方法では、元のテキストを非表示にし、疑似要素で新しいテキストを表示します。視覚的にはちらつきもなく、自然な日本語表示を実現できます。

翻訳ファイル編集の限界

Loco Translateなどのプラグイン⁷を使用して .po ファイルに翻訳を追加する方法も検討しましたが、以下の理由で効果が限定的です。

ブロックの独立性: JavaScriptで生成される部分は、PHPの翻訳システムと連携していない場合がある 実装の不統一: WooCommerceブロックの一部機能で、従来の翻訳システムが完全に適用されていない アップデート時のリスク: 翻訳ファイルの変更が将来のアップデートで上書きされる可能性

現状の技術的制約と今後の展望

ブロックシステムの課題

WooCommerceブロックは比較的新しい技術で、従来のWooCommerceとの互換性を保ちながら新機能を実装している過渡期にあります。この状況では、翻訳システムの統合が完全でない部分が存在することは技術的に避けられない課題です。

開発者向けの状況

GitHubでの調査によると、WooCommerceの開発チームもこの問題を認識しており、ブロック内の文言カスタマイズに関する議論⁸が継続的に行われています。しかし、コンバージョン率を重視したブロック設計により、多くの要素が意図的にロック（変更不可）されている現状があります。

まとめ

WooCommerceチェックアウトブロックの文言変更が困難な理由は、ブロックシステムの独立性と従来翻訳システムとの連携不足にあります。現時点では、CSSによる疑似要素を使用した文言置き換えが最も確実で実用的な解決方法となります。翻訳ファイルの編集は理論的には可能ですが、実際の効果は限定的であり、技術的な制約により完全な解決には至りません。

WooCommerce 8.3以降でデフォルトとなったGutenbergブロックベースのチェックアウトシステム。従来のショートコードベースとは構造が大きく異なる – WooCommerce Checkout Block Documentation
internationalizationの略。ソフトウェアを複数の言語や地域に対応させるためのプロセス。WordPressでは__()、_e()などの関数を使用してテキストを翻訳可能にする – WordPress I18n Developer Handbook
WordPress 5.0で導入されたブロックベースのエディター。ReactベースのJavaScriptフレームワークを使用してコンテンツを作成・編集する – Gutenberg Handbook
WooCommerceのフロントエンド用JavaScriptに翻訳データを提供するPHPクラス。wp_localize_script()を使用してJavaScriptに翻訳済みテキストを渡す役割を持つ – WooCommerce Frontend Scripts Class
WooCommerce Blocks専用のフィルターシステム。従来のPHPフックとは異なり、JavaScriptベースでブロックの表示内容を変更できる – Getting to Know Woo: Modifying existing Cart and Checkout Block Fields
2025年時点では、registerCheckoutFiltersで利用可能なフィルターは主にカート表示、価格表示、ボタンラベル変更に限定されており、フォームフィールドのオプショナルテキストなどは対象外 – Cart and Checkout Filters Documentation
WordPressプラグインの翻訳を管理できる人気のプラグイン。.poファイルの編集、.moファイルの生成、翻訳の管理を視覚的なインターフェースで行える – Loco Translate Plugin
WooCommerceのGitHubリポジトリでは、チェックアウトブロックの翻訳やカスタマイズに関する複数のイシューが継続的に議論されている – WooCommerce Blocks GitHub Issues