WooCommerceで作る通販サイト[テーマの設定]

WooCommerceは世界中で使用されているECプラグインのため、沢山の専用テーマが存在します。
また「Storefront」というWooCommerceの公式テーマもあります。

screenshot7

ただし、いずれも英語での使用を前提としたものであり、日本語環境で、レイアウトが崩れたり、翻訳がおかしかったりします。

WooCommerceはウィジェットが豊富に用意されているため、WooCommerceの専用テーマを使わなくても、通常のテーマを少しカスタマイズするだけでWooCommerceを動かすことができます。


ベースとなるテーマを用意

通販サイトはカートシステムを動かすため重くなりがちです。
そのためテーマはできる限りシンプルで軽量なものを選びます。
国産ではありませんが、「Simplenotes」というテーマがありますので、これをベースにカスタマイズしてみます。


通常のテーマをWooCommerceで動かすために必要な作業は、たった3ステップです。

function.phpにコードを追記

33-00

上記のアラートが出ている場合、テーマがWooCommerceに対応していません。
function.phpに以下のコードを追記してください。

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}

woocommerce.phpを用意

single.phpを複製し「woocommerce.php」にリネームします。
ループを回す必要はありませんので、ループの部分はカット。
必要なのは、header、sidebar、footerと、ラップしているdiv要素だけです。

元のsingle.phpから不要な箇所を削除したもの
<?php get_header(); ?>
<!-- start entries -->
<div id="entries">

</div>
<!-- end entries -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
woocommerce.php[完成版]
<?php get_header(); ?>
<!-- start entries -->
<div id="entries">
<!-- Start Woo -->
<?php woocommerce_content(); ?>
<!-- End Woo -->
</div>
<!-- end entries -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

カートの一連の流れのテンプレートとなります。
カート部分のレイアウトは、WooCommerceが制御していますので、テーマ側で用意する必要はありません。
流れを確認し、後ほど文字の大きさなどを修正していきます。