Welcartの商品詳細ページをカスタマイズする方法

このエントリーをはてなブックマークに追加
Pocket

welcartのカスタマイズ方法

Welcartの商品詳細ページをカスタマイズ

商品詳細テンプレートの全体構造

商品詳細のテンプレートは、wc_item_single.phpに記述されています。デフォルトではskuの数によってレイアウトが異なっており、以下のような構造になっています。

<div id="content" class="two-column">
<div class="catbox">

<?php if (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">

  <!-- 商品名 -->
  <h1 class="item_page_title"><?php the_title(); ?></h1>
  <div class="storycontent">

    <?php usces_remove_filter(); ?>
    <?php usces_the_item(); ?>

    <div id="itempage">
      <!-- 左カラム -->
      <div class="itemimg">

        <!-- メイン画像の表示 -->

      </div>

      <?php if(usces_sku_num() === 1) : usces_have_skus(); ?>

        <!-- 商品種類が１つだけの場合はこちらを表示 -->

      <?php elseif(usces_sku_num() > 1) : usces_have_skus(); ?>

        <!-- 商品種類が複数ある場合はこちらを表示 -->

      <?php endif; ?>

      <div class="itemsubimg">

         <!-- サブイメージの表示 -->

      </div><!-- end of itemsubimg -->

    </div><!-- end of itemspage -->
  </div><!-- end of storycontent -->
</div>

<?php else: ?>
<p>商品が見つかりませんでした。</p>
<?php endif; ?>

</div><!-- end of catbox -->
</div><!-- end of content -->

どちらのレイアウトでも左カラムには商品のメイン画像が表示され、右カラムには説明文などが表示されます。CSSスタイルのカスタマイズをする際に参考になるクラス名一覧が、オンラインドキュメントに載っているので参考にしてください。

skuが１つだけの場合の表示とカスタマイズ方法

Welcartのデフォルトテンプレートではskuが１つだけの場合と複数ある場合でレイアウトが異なっています。どちらも表示する内容は同じです。

skuが１つだけの場合は以下のようなレイアウトになっています。
welcartでskuが１つだけの場合のレイアウト

コードの中身はこんな感じ。右カラムに価格と在庫表示、その下に投稿エリアで記述した投稿内容が表示されます。一番したにはオプションや数量などの選択エリアとカートボタンが配置されています。

<!-- 商品種類が１つだけの場合はこちらを表示 -->
<?php if(usces_sku_num() === 1) : usces_have_skus(); ?>
  <!-- 商品情報：タイトル、価格、在庫状況など -->
  <!--1SKU-->
  <h2 class="item_name">タイトル (商品コード)</h2>
  <div class="exp clearfix">
    <div class="field">
    <!-- 通常価格が0以上なら表示 -->
    <?php if( usces_the_itemCprice('return') > 0 ) : ?>

      <!-- 通常価格 -->

    <?php endif; ?>

      <!-- 販売価格 -->

    </div>

    <div class="field">

      <!-- 在庫状況 -->

    </div>

    <!-- itemカスタムの表示？ -->
    <?php ?>
    <div class="field"><?php echo $item_custom; ?></div>
    <?php endif; ?>

    <!-- 投稿エリアの商品説明 -->
    <?php the_content(); ?>

  </div><!-- end of exp -->

  <form action="<?php echo USCES_CART_URL; ?>" method="post">

    <!-- 業務パック適用表示 -->
    <?php usces_the_itemGpExp(); ?>

    <div class="skuform" align="right">
      <!-- カラー、サイズなどのオプションがあれば表示 -->
      <?php if (usces_is_options()) : ?>

        <!-- オプションの表示処理 -->

      <?php endif; ?>
      <!-- 在庫がなければこちらを表示 -->
      <?php if( !usces_have_zaiko() ) : ?>

        <!-- 在庫ステータス表示 -->

      <?php else : ?>

        <!-- 数量とカートへ入れるボタン表示 -->

      <?php endif; ?>
    </div><!-- end of skuform -->

  </form>

複数のskuがある場合の表示とカスタマイズ方法

２つ以上のskuが存在する場合は以下のようなレイアウトになっています。
welcartでskuが２つ以上の場合のレイアウト

コード内容は以下のようになります。表示しているものはsku１つの場合と同じですが、レイアウトが異なっています。

<!-- 商品種類が複数ある場合はこちらを表示 -->
<?php elseif(usces_sku_num() > 1) : usces_have_skus(); ?>
  <!--some SKU-->
  <h2 class="item_name">商品名 (商品コード)</h2>
  <div class="exp clearfix">
    <!-- 投稿エリアの内容 -->
    <?php the_content(); ?>

    <!-- itemカスタムの表示？ -->
    <?php if( $item_custom = usces_get_item_custom( $post->ID, 'list', 'return' ) ) : ?>
      <div class="field">
        <?php echo $item_custom; ?>
      </div>
    <?php endif; ?>
  </div><!-- end of exp -->

  <form action="<?php echo USCES_CART_URL; ?>" method="post">
  <div class="skuform">
    <table class="skumulti">
      <!-- テーブルのヘッダー -->
      <thead>
      <tr>
        <th rowspan="2" class="thborder">注文番号</th>
        <th colspan="2">タイトル</th>

        <?php if( usces_the_itemCprice('return') > 0 ) : ?>
          <!-- 通常価格が0より大きい場合に表示 -->
        <?php else : ?>
          <!-- 通常価格がなければこちら -->
        <?php endif; ?>

      </tr>
      <tr>
        <th class="thborder">在庫</th>
        <th class="thborder">数量</th>
        <th class="thborder">単位</th>
        <th class="thborder"> </th>
      </tr>
      </thead>
      <!-- テーブルのボディー -->
      <tbody>
        <!-- do-whileでskuを表示 -->
        <?php do { ?>
          <tr>
            <td rowspan="2">
              <!-- skuコード -->
              <?php usces_the_itemSku(); ?>
            </td>
            <td colspan="2" class="skudisp subborder">
              <!-- sku表示名 -->
              <?php usces_the_itemSkuDisp(); ?>
              <!-- オプションがあれば表示 -->
              <?php if (usces_is_options()) : ?>

                <!-- オプションの表示処理 -->

              <?php endif; ?>
            </td>
            <td colspan="2" class="subborder price">

              <?php if( usces_the_itemCprice('return') > 0 ) : ?>
                <!-- 通常価格が0より大きい場合に表示 -->
              <?php endif; ?>     
              <span class="price">
                <!-- 販売価格の表示 -->
              </span>
              <br />
              <!-- 業務オプション -->
              <?php usces_the_itemGpExp(); ?>
            </td>
          </tr>
          <tr>
            <td class="zaiko">在庫状況</td>
            <td class="quant">数量入力</td>
            <td class="unit">単位表示</td>
            <?php if( !usces_have_zaiko() ) : ?>
              <!-- 在庫がなければ、在庫状況の表示 -->
            <?php else : ?>
              <!-- 在庫があれば、カートボタンを表示 -->
            <?php endif; ?>
          </tr>
          <tr>
            <td colspan="5" class="error_message">
              <!-- エラーメッセージ -->
            </td>
          </tr>
        <?php } while (usces_have_skus()); ?>
      </tbody>
    </table>
  </div><!-- end of skuform -->

  </form>
<?php endif; ?>

Welcartのカスタマイズ注意点

CSSだけでもある程度見た目のカスタマイズは可能ですが、レイアウトも大きく変えようと思うとテンプレート側の修正も必要になってきます。

テンプレートで何が表示されているかがわかればテーブルで表示されているものをBootstrapのカラムに切り替えることも可能。その場合に注意したいのはモジュールなどとの競合。なかにはid名やclass名からテンプレート内のデータを取得するものもあるので、テンプレートの中身を大きく変える場合は注意が必要です。