Welcartのカートページをカスタマイズする方法

Tweet

Pocket

Welcartのカスタマイズまとめの第４回目は、カートページのカスタマイズについて。WebマーケティングやECセミナーなどでも、カートページの画面遷移の最適化を！と言われるくらい重要なページ。

デフォルトでは４つのページが用意されていますが、表示内容や入力項目をもう少し最適かしたい場合もあると思います。ここではWelcartのカートページをカスタマイズするための基本的なことをまとめていきます。

Welcartのカートページをカスタマイズ

カートページのファイルは、テーマフォルダ->wc_templates->cartフォルダの中。お客様情報や配送設定など各ページごとにテンプレートファイルが用意されています。

なので修正したいページがあればそのテンプレートのみ修正すればOK。ここからは各ページの簡単なカスタマイズ方法についてチェックしていきます。

カートトップページのカスタマイズ

まずはカートトップページ。wc_cart_page.phpがカートトップです。

コードの中身を見るといろいろと書き込まれていますが、やっていることはそれほど難しいことではありません。細かいところを省いてざっくり書くとこんな感じです。

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

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

<div class="post" id="wc_<?php usces_page_name(); ?>">

<!-- ページタイトル -->
<h1 class="cart_page_title"><?php _e('In the cart', 'usces'); ?></h1>
<div class="entry">

<div id="inside-cart">

  <div class="usccart_navi">
    <ol class="ucart">

      <!-- ナビ -->

    </ol>
  </div>

  <!-- カートページ設定のヘッダー -->
  <div class="header_explanation">
    <?php do_action('usces_action_cart_page_header'); ?>
  </div>

  <div class="error_message"><!-- エラー --></div>
  <form action="<?php usces_url('cart'); ?>" ... >
    <?php if( usces_is_cart() ) : ?>

      <!-- カートに入っていれば以下を表示 -->

      <div id="cart">
        <div class="upbutton">
          <!-- メッセージ -->
          <?php _e('Press the `update` ...','usces'); ?>
          <!-- ボタン -->
          <input name="upButton" type="submit" />
        </div>
        <table cellspacing="0" id="cart_table">
          <thead>
            <tr>
              <!-- テーブルのヘッダー部分 -->
            </tr>
          </thead>
          <tbody>
            <!-- カートのデータを取得して表示 -->
            <?php usces_get_cart_rows(); ?>
          </tbody>
          <tfoot>
            <tr>
              <!-- 合計金額の表示 -->
            </tr>
          </tfoot>
        </table>
        <div class="currency_code">通貨：円</div>
        <?php if( $usces_gp ) : ?>

          <!-- 業務パッケージを使用していれば、業務パッケージの画像とメッセージを表示 -->

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

    <?php else : ?>
      <div class="no_cart">商品はありません。</div>
    <?php endif; ?>

    <!-- 投稿内容の表示 -->
    <?php the_content();?>

    <!-- 次のページへなどのボタンを出力 -->
    <div class="send"><?php usces_get_cart_button(); ?></div>
    <?php do_action('usces_action_cart_page_inform'); ?>
  </form>

  <!-- カートページ設定のフッター -->
  <div class="footer_explanation">
  <?php do_action('usces_action_cart_page_footer'); ?>
  </div>

</div><!-- end of inside-cart -->

    </div><!-- end of entry -->
  </div><!-- end of post -->
<?php else: ?>
<?php _e('Sorry, no posts matched your criteria.'); ?>
<?php endif; ?>
</div><!-- end of catbox -->
</div>

<!-- end of content -->

ここで表示されているのは、ヘッダー部分にナビゲーション、上下には設定画面で入力したテキストが表示され、中央部分にカートに入っている商品の情報が出力されています。

ちなみに、_e('...','...')は出力されるテキストを翻訳するためのもの、do_action()はアクションフックの設置。どちらもテンプレートではなく、プラグイン側で設定されています。

お客様情報ページのカスタマイズ

次はお客様情報ページ。こちらはwc_customer_page.phpがテンプレートファイルになってます。コードを眺めてみると、先ほどのカートページとほぼ同じ。中央部分にフォームの入力項目が設定されてるだけです。

<div id="customer-info">

  <div class="usccart_navi">
    <ol class="ucart">
      <!-- ナビ -->
    </ol>
  </div>

  <!-- ヘッダー -->
  <div class="header_explanation">
  <?php do_action('usces_action_customer_page_header'); ?>
  </div><!-- end of header_explanation -->

  <div class="error_message"><?php usces_error_message(); ?></div>
  <?php if( usces_is_membersystem_state() ) : ?>
    <!-- 会員機能が有効なら以下を表示 -->

    <!-- タイトルの表示 -> 会員の方はこちら -->
    <h5><?php _e('The member please enter at here.','usces'); ?></h5>
    <form>
      <!-- 入力フォーム -->
    </form>

    <!-- タイトルの表示 -> 会員でない方はこちら -->
    <h5><?php _e('The nonmember please enter at here.','usces'); ?></h5>
  <?php endif; ?>

  <form>
    <table>
      <!-- メールアドレスの入力 -->

      <?php if( usces_is_membersystem_state() ) : ?>
        <!-- 会員機能が有効ならこの中身を表示 -->

        <!-- パスワードの入力 -->

      <?php endif; ?>

      <!-- 住所の入力フォームを出力 -->
      <?php uesces_addressform( 'customer', $usces_entries, 'echo' ); ?>
    </table>
    <input name="member_regmode" type="hidden" value="<?php echo $member_regmode; ?>" />

    <!-- ボタンの表示 -->
    <div class="send">
    <?php usces_get_customer_button(); ?>
    </div>
    <?php do_action('usces_action_customer_page_inform'); ?>
  </form>

  <div class="footer_explanation">
  <?php do_action('usces_action_customer_page_footer'); ?>
  </div><!-- end of footer_explanation -->
</div>

<!-- end of customer-info -->

１つ目のフォームは登録済み会員のログインフォーム、２つめは新規会員のフォームとなっています。

発送・支払い方法のカスタマイズ

Welcartの発送・支払いページのカスタマイズは、wc_delivery_page.phpから行えます。こちらもフォームを読み込んでいるだけなので特に難しいところはありません。

<div class="post" id="wc_<?php usces_page_name(); ?>">

<h1 class="cart_page_title"><?php _e('Shipping / Payment options', 'usces'); ?></h1>
<div class="entry">

<div id="delivery-info">

  <div class="usccart_navi">
    <ol class="ucart">
      <!-- ナビ -->
    </ol>
  </div>

  <div class="header_explanation">
<?php do_action('usces_action_delivery_page_header'); ?>
  </div>

  <div class="error_message"><?php usces_error_message(); ?></div>
  <form action="<?php usces_url('cart'); ?>" method="post">
    <table class="customer_form">
      <tr>
        <!-- ラジオボタン１ -->
      </tr>
      <tr>
        <!-- ラジオボタン２ -->
      </tr>
    </table>
    <?php do_action( 'usces_action_delivery_flag' ); ?>

    <table class="customer_form" id="delivery_table">
      <!-- ラジオボタン２が選択されたらこちらを表示 -->
      <?php echo uesces_addressform( 'delivery', $usces_entries ); ?>
    </table>
    <table class="customer_form" id="time">
      <!-- 配送方法などのフォームを出力 -->
    </table>

    <?php usces_delivery_secure_form(); ?>

    <!-- カスタムオーダーで設定したフォームを出力 -->
    <?php $meta = usces_has_custom_field_meta('order'); ?>
    <?php if(!empty($meta) and is_array($meta)) : ?>
      <table class="customer_form" id="custom_order">
      <?php usces_custom_field_input($usces_entries, 'order', ''); ?>
      </table>
    <?php endif; ?>


    <table class="customer_form" id="notes_table">
      <!-- 備考欄の標示 -->
    </table>

    <div class="send">
      <!-- ボタンの表示 -->
    </div>
    <?php do_action('usces_action_delivery_page_inform'); ?>
  </form>

  <div class="footer_explanation">
    <?php do_action('usces_action_delivery_page_footer'); ?>
  </div>
</div>

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

<!-- end of post -->

内容確認ページのカスタマイズ

最後は内容確認ページ。wc_confirm_page.phpからカスタマイズできます。このページもフォームの値を出力しているだけなので、それほど大きく変更することもないと思います。

表示する内容を変更するには、必要のないところを削除するのが一番簡単。

<div class="post" id="wc_<?php usces_page_name(); ?>">

<h1 class="cart_page_title"><?php _e('Confirmation', 'usces'); ?></h1>
<div class="entry">

<div id="info-confirm">
  <div class="confiem_notice">
  <?php _e('Please do not change product addition and amount of it with the other window with displaying this page.','usces'); ?>
  </div>

  <div class="usccart_navi">
    <ol class="ucart">
    <!-- ナビ -->
    </ol>
  </div>

  <!-- ヘッダー -->
  <div class="header_explanation">
    <?php do_action('usces_action_confirm_page_header'); ?>
  </div><!-- end of header_explanation -->

  <!-- エラーメッセージ -->
  <div class="error_message"><?php usces_error_message(); ?></div>
  <div id="cart">
    <!-- 通貨 -->
    <div class="currency_code"><?php _e('Currency','usces'); ?> : <?php usces_crcode(); ?></div>

    <table cellspacing="0" id="cart_table">
      <thead>
      <!-- 商品テーブルのヘッダー -->
      </thead>
      <tbody>
        <!-- テーブルボディ -->
      </tbody>
      <tfoot>
      <!-- テーブルフッター -->
      </tfoot>
    </table>

    <?php if( usces_is_member_system() && usces_is_member_system_point() &&  usces_is_login() ) : ?>
        <!-- ポイントシステムが有効なら表示 -->
    <?php endif; ?>

    <?php do_action('usces_action_confirm_after_form'); ?>
  </div>

  <table id="confirm_table">
    <!-- 確認内容表示 -->
  </table>

  <?php usces_purchase_button(); ?>

  <!-- フッター -->
  <div class="footer_explanation">
    <?php do_action('usces_action_confirm_page_footer'); ?>
  </div><!-- end of footer_explanation -->

</div><!-- end of info-confirm -->

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

<!-- end of post -->

Welcartでもっと高度なカスタマイズをするには？

ここではテンプレートのカスタマイズを目的としているため、内部のシステム部分には触れていません。Welcartに新しい機能を追加したり、カートシステム自体に手を加えるにはプラグインのクラスファイルを変更する必要があります。

システム側を変更した場合どのような不具合が発生するか分からないので、自己責任で行って下さい。ただ、様々な機能を追加できればさらに使い勝手の良いカートシステムを作ることも可能です。