Honmaru Manual

   

【Welcartカスタマイズ】商品説明文の幅を広くしたい(PHP/上級者向け)

18 1月 17
北川 哲平
,
No Comments

※ここでは「商品詳細ページのカスタマイズ(基本編)」において「wc_item_single.php」を作成したことを前提にお話します。

商品説明文の幅を広くしたい

Welcartの専用テーマ「welcart_default」では、商品説明部分が写真の右側にあり、幅が狭くなっています。
また、カートボタンが説明より下に来るため、説明部分が長くなると下までスクロールするまで購入できなくなり、ユーザビリティにもよろしくありません。

有名ショッピングサイトのように、商品写真や説明のための画像などを大きく載せる等、この部分を幅広く使いたい時に、この記事をお役立て下さい。

1. 「wc_item_single.php」を開きます。

2. 「<?php the_content(); ?>」を探します。2つあるのですが、これのどちらも削除します。

3. 「<?php usces_assistance_item( $post->ID, __(‘An article concerned’, ‘usces’) ); ?>」を探します。

4. (3)は関連商品一覧を表示するための記述です。
これよりも上に商品説明が欲しいので、この行の上に「<?php the_content(); ?>」を記述します。

5. 保存した「wc_item_single.php」を更新、またはアップロードして下さい。

 

2枚目以降の写真を、1枚目の写真の下に表示する

Welcartの専用テーマ「welcart_default」では、2枚め以降の写真をページの下部分に表示させています。

ただ、商品説明が長くなると1枚目の写真と間隔が空いてしまいます。

写真は写真、でまとめて見せるために、2枚め以降の写真を1枚目の写真の下に表示させるようカスタマイズします。

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>