「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマEGO.:ヘッダー右上カート部分の「チェックアウト」の文言を変更する方法

Q.カートに商品を追加してからヘッダーの右側カートアイコンにマウスカーソルを合わせると表示される「チェックアウト」という文字を変更したいです。

▼変更箇所イメージ
変更箇所イメージ

A.下記の方法でカスタマイズしてください。

・Welcart版

編集するファイル: template-parts/header-view-cart.php
編集する箇所: 40行目付近

<a class="p-button" href="<?php echo esc_attr( USCES_CUSTOMER_URL ); ?>"><?php _e( 'Checkout', 'tcd-w' ); ?></a>

 ↓

<a class="p-button" href="<?php echo esc_attr( USCES_CUSTOMER_URL ); ?>"><?php _e( 'テキスト' ); ?></a>
・WooCommerce版

編集するファイル: functions/woocommerce.php
編集する箇所: 869行目付近

echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="p-button checkout wc-forward">' . esc_html__( 'Checkout', 'tcd-w' ) . '</a>';

 ↓

echo '<a href="' . esc_url( wc_get_checkout_url() ) . '" class="p-button checkout wc-forward">' . esc_html__( 'テキスト' ) . '</a>';
・文字サイズと余白を調整したい場合

文字数によってはすべてのテキストが表示しきれない(表示領域からはみ出る)ことも考えられます。あまり多くの文字数を表示することを想定した仕様となっておりませんが、TCDテーマ>基本設定>カスタムCSSに以下を入力し調整をお試しください。

.p-header-view-cart__buttons .p-button { font-size: 〇px; padding: 0 ●px; }

※〇に文字の大きさ、●に左右余白について任意の数値に変更してください。
※左側の「カートを見る」にも同じスタイルが適用されます。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事