【WordPress】WooCommerceのショッピングカートの文言を修正する

WordPressのプラグイン「WooCommerce」、使えるやつですが海外のプラグインのため、日本語翻訳がもう少しこうだったら良いのに・・・と思う箇所がところどころ出てきます。

今回はカート画面の文言を修正していきます。

 

前提

・プラグイン「WooCommerce」インストール済み

・プラグイン「WooCommerce For Japan」インストール済み

・子テーマ作成済み

 

変更前のカート画面

WooCommerceのカート画面ですが、1という数の前に「数」と表示されているのが不要だと感じました。

また、タイトル「数」よりも「数量」の方が個人的には違和感がないので、修正することにします。

ついでに、削除と画像のタイトルは空白になっているので、これらにも「削除」「画像」と追加し、「商品」も「商品名」に修正します。

 

対象ファイルのコピー

プラグインのファイルを直接修正すると、アップデートの度に手動で修正し直さなければならなくなるなどの不都合が生じてしまうので、子テーマ内にファイルをコピーしてから修正していきます。

コピー元ファイル1：/wp-content/plugins/woocommerce/templates/cart/cart.php
コピー元ファイル2：/wp-content/plugins/woocommerce/templates/global/quantity-input.php

wp-content
  └plugins
    └woocommerce
      └templates
        └cart
          └cart.php
        └global
          └quantity-input.php

コピー先ファイル1：/wp-content/themes/子テーマフォルダ/woocommerce/cart/cart.php
コピー先ファイル2：/wp-content/themes/子テーマフォルダ/woocommerce/global/quantity-input.php

wp-content
  └themes
    └子テーマフォルダ
      └woocommerce
        └cart
          └cart.php
        └global
          └quantity-input.php

コピー元とは異なり、「templates」のフォルダは作成不要なのでご注意下さい。

 

cart.phpのカスタマイズ

子テーマフォルダ内にコピーしてきたcart.phpを編集していきます。

対象ファイル1：/wp-content/themes/子テーマフォルダ/woocommerce/cart/cart.php

cart.php 変更前

<form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
	<?php do_action( 'woocommerce_before_cart_table' ); ?>

	<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
		<thead>
			<tr>
				<th class="product-remove">&nbsp;</th>
				<th class="product-thumbnail">&nbsp;</th>
				<th class="product-name"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
				<th class="product-price"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
				<th class="product-quantity"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
				<th class="product-subtotal"><?php esc_html_e( 'Total', 'woocommerce' ); ?></th>
			</tr>
		</thead>
		<tbody>
			<?php do_action( 'woocommerce_before_cart_contents' ); ?>

cart.php 変更後

<form class="woocommerce-cart-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
	<?php do_action( 'woocommerce_before_cart_table' ); ?>

	<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
		<thead>
			<tr>
				<th class="product-remove">削除</th>
				<th class="product-thumbnail">画像</th>
				<th class="product-name">商品名</th>
				<th class="product-price"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
				<th class="product-quantity">数量</th>
				<th class="product-subtotal"><?php esc_html_e( 'Total', 'woocommerce' ); ?></th>
			</tr>
		</thead>
		<tbody>
			<?php do_action( 'woocommerce_before_cart_contents' ); ?>

33行目で空白→削除に、34行目で空白→画像に、35行目で商品→商品名に、37行目で数→数量に修正しました。

子テーマということで深く考えずにダイレクトに日本語で置き換えました。

 

quantity-input.phpのカスタマイズ

子テーマフォルダ内にコピーしてきたquantity-input.phpを編集していきます。

対象ファイル2：/wp-content/themes/子テーマフォルダ/woocommerce/global/quantity-input.php

quantity-input.php 変更前

	<div class="quantity">
		<label class="screen-reader-text" for="<?php echo esc_attr( $input_id ); ?>"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></label>
		<input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" aria-labelledby="<?php echo ! empty( $args['product_name'] ) ? sprintf( esc_attr__( '%s quantity', 'woocommerce' ), $args['product_name'] ) : ''; ?>" />
	</div>

quantity-input.php 変更後

	<div class="quantity">
		<input type="number" id="<?php echo esc_attr( $input_id ); ?>" class="input-text qty text" step="<?php echo esc_attr( $step ); ?>" min="<?php echo esc_attr( $min_value ); ?>" max="<?php echo esc_attr( 0 < $max_value ? $max_value : '' ); ?>" name="<?php echo esc_attr( $input_name ); ?>" value="<?php echo esc_attr( $input_value ); ?>" title="<?php echo esc_attr_x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) ?>" size="4" pattern="<?php echo esc_attr( $pattern ); ?>" inputmode="<?php echo esc_attr( $inputmode ); ?>" aria-labelledby="<?php echo ! empty( $args['product_name'] ) ? sprintf( esc_attr__( '%s quantity', 'woocommerce' ), $args['product_name'] ) : ''; ?>" />
	</div>

32行目の<label 〜を丸ごと削除することで、数量の前の「数」が表示されなくなります。

 

変更後のカート画面

思い通りに修正することが出来ました。

 

最後に

子テーマにファイルをコピーしてくることで、元のプラグインに手を加えることなく修正することが可能となります。
子テーマの作成方法はここでは割愛しますが、まだの方は作成してから試してみてくださいね。