※ここでは「商品詳細ページのカスタマイズ（基本編）」において「wc_item_single.php」を作成したことを前提にお話します。
商品説明文の幅を広くしたい
Welcartの専用テーマ「welcart_default」では、商品説明部分が写真の右側にあり、幅が狭くなっています。
また、カートボタンが説明より下に来るため、説明部分が長くなると下までスクロールするまで購入できなくなり、ユーザビリティにもよろしくありません。
有名ショッピングサイトのように、商品写真や説明のための画像などを大きく載せる等、この部分を幅広く使いたい時に、この記事をお役立て下さい。
1. 「wc_item_single.php」を開きます。
2. 「<?php the_content(); ?>」を探します。２つあるのですが、これのどちらも削除します。
3. 「<?php usces_assistance_item( $post->ID, __(‘An article concerned’, ‘usces’) ); ?>」を探します。
4. （3）は関連商品一覧を表示するための記述です。
これよりも上に商品説明が欲しいので、この行の上に「<?php the_content(); ?>」を記述します。
5. 保存した「wc_item_single.php」を更新、またはアップロードして下さい。
２枚目以降の写真を、１枚目の写真の下に表示する
Welcartの専用テーマ「welcart_default」では、２枚め以降の写真をページの下部分に表示させています。
ただ、商品説明が長くなると１枚目の写真と間隔が空いてしまいます。
写真は写真、でまとめて見せるために、２枚め以降の写真を１枚目の写真の下に表示させるようカスタマイズします。
1. 「wc_item_single.php」を開きます。
2. 以下の部分を切り取ります。
<div class=”itemsubimg”>
＜ 中略 ＞
</div><!– end of itemsubimg –>
3. （2）を、以下の部分の</div>の直前に貼り付けます。
<div class=”itemimg”>
<a href=”<?php usces_the_itemImageURL(0); ?>” <?php echo apply_filters(‘usces_itemimg_anchor_rel’, NULL); ?>><?php usces_the_itemImage(0, 300, 300, $post); ?></a>
</div>
4. （3）の部分は、以下のようになります。
<div class=”itemimg”>
<a href=”<?php usces_the_itemImageURL(0); ?>” <?php echo apply_filters(‘usces_itemimg_anchor_rel’, NULL); ?>><?php usces_the_itemImage(0, 300, 300, $post); ?></a>
<div class=”itemsubimg”>
＜ 中略 ＞
</div><!– end of itemsubimg –>
</div>
