WooCommerceで「購入」を「予約注文」に変える方法：Loco TranslateとカスタムCSSの使い分け

はじめに

WooCommerceで予約商品を販売するとき、サイト上の「購入」という文字を「予約注文」に変えたくなることがあります。お客さんに「これは予約なんだ」と分かってもらうためです。

実際にTwenty Twenty-Fourテーマを使って作業した結果、思っていたより簡単にできることが分かりました。しかし、一部の文字だけは特別な方法が必要でした。その経験を共有します。

Loco Translateで大部分の文字を変更

翻訳プラグインで文字を置き換える

WooCommerceの文字を変更するとき、最初に試すべきはLoco Translateというプラグインです。これは翻訳ファイルを編集するプラグインですが、日本語から日本語への「翻訳」にも使えます¹。

Loco Translateをインストールすると、管理画面に専用のメニューが現れます。「Loco Translate → テーマ → WooCommerce」を選ぶと、変更できる文字の一覧が表示されます。

簡単に変更できる文字

このプラグインで変更できるのは、WooCommerceが標準で用意している文字です。「カートに追加」や「チェックアウト」「注文完了」といった基本的な文字は、ここで「予約カートに追加」「予約注文手続き」などに変更できます。

作業は検索ボックスに変更したい文字を入力し、見つかったら新しい文字に書き換えるだけです。保存すると、サイト全体に反映されます。

特殊な文字はCSSで対応

翻訳ファイルにない文字の存在

ところが、一部の文字はLoco Translateで検索しても見つかりません。「購入手続きに進む」というボタンがその代表例です。

これはWooCommerceブロックという仕組みから作られる文字だからです²。ブロックは動的に文字を生成するため、翻訳ファイルには含まれていません。料理で例えるなら、レシピ（翻訳ファイル）ではなく、シェフが即興で作る料理のようなものです。

HTML構造を確認する

変更したいボタンを右クリックして「検証」を選ぶと、HTMLコードが表示されます。ミニカートのボタンは次のような構造になっています。

<a href="/checkout/" class="wc-block-mini-cart__footer-checkout">
    <span class="wc-block-components-button__text">購入手続きに進む</span>
</a>
Code language: HTML, XML (xml)

このクラス名を使って、CSSで文字を変更します。

CSSによる文字置換の仕組み

CSSの疑似要素という機能を使います³。元の文字を透明にして見えなくし、新しい文字を重ねて表示する方法です。

/* 元の文字を透明にする */
.wc-block-mini-cart__footer-checkout .wc-block-components-button__text {
    font-size: 0 !important;
    color: transparent !important;
}

/* 新しい文字を表示する */
.wc-block-mini-cart__footer-checkout .wc-block-components-button__text::before {
    content: "予約注文に進む";
    font-size: 14px;
    color: white;
    display: inline-block;
    font-weight: inherit;
    line-height: inherit;
}
Code language: CSS (css)

JavaScriptではなくCSSを選ぶ理由

読み込み時の問題

最初はJavaScriptで文字を変更することも考えました。しかし、ページが読み込まれる瞬間に元の文字が一瞬見えてしまう現象が起きます。これをフラッシュ現象と呼びます。

お客さんが「購入手続きに進む」という文字を一瞬でも見てしまうと、予約注文サイトの意味が薄れてしまいます。

CSSの安定性

CSSの疑似要素を使う方法なら、この問題は起きません。ページが表示される最初から正しい文字が見えるからです。また、処理速度も速く、より安定しています。

追加CSSでの適用方法

WordPress標準機能を活用

CSSコードは「外観 → カスタマイズ → 追加CSS」に入力します。この方法が確実に動作する理由は、読み込み順序にあります⁴。

WordPressでは、テーマのCSSファイルより後に追加CSSが読み込まれます。そのため、WooCommerceの元のスタイルを確実に上書きできます。

消費税表示の非表示

予約注文では税込み価格だけ表示すれば十分な場合が多いです。「Including ¥1,707 消費税」のような詳細表示は、次のCSSで非表示にできます。

.wc-block-components-totals-footer-item-tax {
    display: none !important;
}
Code language: CSS (css)

子テーマの必要性について

理論と実際の違い

一般的に、テーマをカスタマイズするときは子テーマを作ることが推奨されます。テーマが更新されても、カスタマイズ内容が失われないからです。

しかし、今回のケースでは子テーマの意味がありませんでした。WooCommerceの「独自のものをデザイン」機能を使うと、作業完了後に自動的に親テーマが有効になってしまうからです。

実用的な対策

Loco Translateの翻訳内容も、追加CSSの内容も、テーマに依存しません。どちらもWordPressのデータベースに保存されるため、テーマが変わっても維持されます。

これは財布とお金の関係に似ています。財布（テーマ）を変えても、中のお金（翻訳とCSS）はそのまま残ります。

効率的な作業順序

段階的なアプローチ

実際の作業では、次の順序で進めると効率的です。

まずLoco Translateで変更できる文字をすべて変更します。これだけで全体の8割以上は完了します。次に、変更できなかった文字をリストアップし、CSSで対応します。

確認作業

変更後は必ず以下の場所を確認します。ミニカートの「予約注文に進む」ボタン、カートページの同ボタン、合計欄の消費税表示が正しく変更されているかチェックします。

技術的なポイント

CSS詳細度の重要性

CSSが正しく適用されない場合、詳細度が不足している可能性があります⁵。!importantを使うか、より具体的なセレクタを書くことで解決できます。

body .wc-block-mini-cart__footer-checkout .wc-block-components-button__text {
    /* より詳細なセレクタ */
}
Code language: CSS (css)

ブロックテーマの特性

Twenty Twenty-Fourのようなブロックテーマでは、従来のPHPファイル編集とは異なるアプローチが必要です⁶。サイトエディターとブロックシステムを理解することが重要です。

まとめ

WooCommerceの文字変更は、Loco Translateによる翻訳ファイル編集が主力となります。しかし、ブロック由来の特殊な文字については、CSSの疑似要素を使った置換が有効です。追加CSS機能を使うことで、テーマの更新に影響されない安定した運用が可能になります。子テーマの作成は、WooCommerceのデザイン機能を使う場合には必ずしも必要ではありません。

Loco Translateは本来多言語対応のためのプラグインですが、同一言語内での文字列置換にも活用できます。 – Loco Translate公式ドキュメント
WooCommerceブロックは、WordPress 5.0以降のブロックエディターに対応した新しいシステムで、従来のPHPテンプレートとは異なる動的な文字生成を行います。 – WooCommerce Blocks Documentation
CSS疑似要素の::beforeや::afterは、HTML要素に対して仮想的な要素を追加する機能で、contentプロパティと組み合わせることでテキストの挿入が可能です。 – MDN Web Docs – CSS 疑似要素
WordPressのCSS読み込み順序は、テーマのstyle.css → プラグインのCSS → カスタマイザーの追加CSSの順になっており、後から読み込まれるものが優先されます。 – WordPress Codex – wp_enqueue_style
CSS詳細度（Specificity）は、同じ要素に複数のCSSルールが適用される場合の優先順位を決定する仕組みです。!importantは最高の詳細度を持ちますが、使いすぎると保守性が低下するため注意が必要です。 – MDN Web Docs – CSS詳細度
ブロックテーマは、WordPress 5.9で導入されたフルサイト編集（FSE）に対応したテーマ形式で、従来のclassicテーマとは根本的に構造が異なります。 – WordPress.org – Block Themes