WooCommerceとBricksの相性は非常に良く、ECサイト構築を効率よく進めることができます。
今後もWooCommerce関連の情報を随時更新していく予定ですので、解説してほしい機能があれば、ぜひコメント欄でお知らせください。
さて今回は、Bricksを使ってWooCommerceのカートページをカスタマイズする方法について解説します。
WooCommerceについて
WooCommerceは、WordPressにEC機能を追加できるプラグインで、すでに利用されている方も多いと思います。
海外で開発されたプラグインのため、日本向けにカスタマイズしたい箇所も少なくありません。
カートページやチェックアウトページもそのひとつです。
本記事では、Bricksを使ったカートページのカスタマイズ方法を中心に解説しますので、ぜひ参考にしてみてください。
WooCommerceの設定
WooCommerceは、インストールして有効化するだけで基本的な設定はほぼ完了します。
今回はカートページのカスタマイズが目的なので、該当ページの設定を確認します。
カートページ・チェックアウトページの確認
WooCommerceの
［設定］→［高度な設定］
から、以下のページが正しく設定されているか確認してください。（下図参照）
- チェックアウトページ
- カートページ
固定ページの作成（未設定の場合）
もし正しく設定されていない場合は、固定ページを新規作成します。
固定ページを作成し、カートページでしたら以下のショートコードのみを記述します。
SEO的にはノーインデックスで良いと思います。
[woocommerce_cart]チェックアウトページも同様に固定ページを作成し、以下のショートコードを記述します。
[woocommerce_checkout]⚠ 注意点
これらのページは直接Bricksで編集しません。
実際のデザイン編集は、次に説明するBricksのテンプレートで行います。
Bricksでテンプレートを作成
Bricksには、WooCommerce専用のテンプレートが用意されています。
主なテンプレートは以下の通りです（下図も参照ください）。
- 商品一覧
- 商品詳細
- カート
- カート（空）
- チェックアウト
- 支払いページ
- サンキューページ
- 注文受付ページ
今回は、先ほど設定した
「カートページ」 と 「チェックアウトページ」
を中心にカスタマイズします。
カートページのカスタマイズ
まずは、Bricksのテンプレートでカートページ用テンプレートを作成します。（下図参照）
カートページでは、以下のWooCommerceエレメントが表示されます。
その中でも、赤枠で囲まれたエレメントを主に使用するケースが多いでしょう。
- カートトータル
- カートアイテム
一般的なレイアウトとしては、
左にカートアイテム、右にカートトータル
という構成がよく使われます。
クーポンやパンくずリストなども、必要に応じて配置可能です。
編集画面への直接アクセス
一度テンプレートを公開すると、カートページから直接Bricksの編集画面へ移動できるようになります。
- カートに商品が入っていない状態
- カートに商品が入っている状態
どちらの画面も編集できるため、非常に便利です。（下図参照）
カートが空の場合
カートが空のときは、先ほどのカートエレメントは使用せず、
- サイトTOP
- ショップへ戻るボタン
などを配置するのが一般的です。
チェックアウトページのカスタマイズ
チェックアウトページも同様に、Bricksのテンプレートから作成します。
テンプレートを作成すると、チェックアウトページからチェックアウトページ・ありがとうございますページの両方を直接編集できるようになります。（下図参照）
チェックアウトページでは、カートページとは異なるエレメントが表示されます。
一般的なレイアウトは以下の通りです。
- 左：カスタマー詳細
- 右：オーダーレビュー
こちらも、クーポンやパンくずリストなどを追加できます。
注文完了（サンキュウ）ページについて
注文完了ページでは、以下のエレメントが表示されます。
赤枠で囲んだサンキュウエレメントを配置すると、
- 注文内容
- 注文番号
などが表示されます。
なお、この「ありがとうございます」ページは、サンキューページとしての役割を持たせることもできますが、Bricks上では「注文完了ページ」に該当します。
まとめ
一見ややこしく感じるかもしれませんが、ポイントは以下の1点だけです。
固定ページは編集せず、Bricksのテンプレートを編集する
カートページやチェックアウトページは固定ページとして存在しますが、実際のデザインは Bricksのテンプレートを通じて自動的に反映されます。
この仕組みを理解しておけば、WooCommerce × Bricksでのカートページカスタマイズはスムーズに進められるでしょう。
