WordPressでECサイトを作るとき、よく使われるのが WooCommerce。

無料で強力なプラグインなんですが、いざ「オリジナルテーマでWooCommerceを動かしたい」と思うと、日本語の情報が少なくてちょっとハードル高いんですよね。

オリジナルテーマにWooCommerceを入れて動かしてみたので、そのときの流れをメモしておきます。

同じように「既製テーマだと自由度足りないな…」と感じている方の参考になれば嬉しいです。

WooCommerceを導入する

まずはプラグインをインストールして有効化。これで「ショップ」「カート」「チェックアウト」「マイアカウント」など必要なページが自動で追加されます。

テーマ側では functions.php にこんな感じで書いてWooCommerce対応を宣言します。

これで商品画像の拡大やスライダーも使えるようになります。

テンプレートをコピーしてカスタマイズ

WooCommerceのテンプレートはプラグイン内の
wp-content/plugins/woocommerce/templates/ にあります。

例えば…

  • archive-product.php → 商品一覧
  • single-product.php → 商品詳細
  • cart/cart.php → カート
  • checkout/form-checkout.php → チェックアウト

必要なものだけテーマの woocommerce/ フォルダにコピーして編集すればOKです。

ラッパーを外して、自分のレイアウトに合わせる

WooCommerceは標準で<div id=”primary”>… みたいなラッパーを勝手に出力します。
これがオリジナルテーマのレイアウトと合わないので、以下で外しました。

そのうえで、テンプレートの中に

という構造を直接書くようにしました。

⭐️ 注意点⭐️
woocommerce_before_main_content と woocommerce_after_main_content は呼んでおかないと 構造化データ（Websiteスキーマ） が出なくなるので、テンプレート内で do_action を呼ぶのは忘れないようにしました。

商品一覧ページの例（archive-product.php）

「見出し・パンくず」と「商品グリッド」をセクションで分けています。

見た目の統一感が出るし、あとでデザイン調整しやすいです。

商品詳細ページの例（single-product.php）

こちらもセクションを分割。関連商品は別セクションにしました。

実際の案件でのメリット

・デザインの統一感

LPや既存ページと同じ「セクション＋コンテナ」構造にできるので、サイト全体の雰囲気が崩れません。

・管理画面はWordPress＋WooCommerceの標準UIのまま

クライアントさんはWordPressの管理画面から商品管理できるので、操作に迷いません。

・SEO的にも安心

構造化データを保ちながらオリジナルテーマで構築できました。

まとめ

WooCommerceをオリジナルテーマに組み込むのは最初ちょっと大変ですが、フックとテンプレート構造を理解すれば意外とシンプルです。

「既製テーマだとイメージ通りのデザインが出せない」「オリジナルテーマにECを追加したい」という方には、このやり方がおすすめ。

同じように困っている制作者の方の参考になれば嬉しいですし、もし「自社サイトにWooCommerceを組み込みたい！」という企業・個人の方がいたら、ぜひお気軽にご相談ください。

記事一覧を見る

Labo