WEB技術

WooCommerce でサイトを作ってみる2 カスタマイズ 編

どうやら、プラグインと深く連携しているらしい。

当たり前っちゃー当たり前なんですが、WooCommerce機能の部分はプラグインと密接に関連しており、通常のwordpress編集のやり方は通用しないっぽいです。
それ以外のブログ的な部分は一般的なテンプレートが適用されると思いますので、storefrontテーマを元にsingle.phpなどを追加してあげれば理想の見た目になると思います。

上記の理由から、おそらく一から作るのはオススメできず、あくまでstore-frontの子テーマとして作成するのが正攻法と言えるでしょう。

https://logzitsu.tlog.work/woocommerce/

とりあえず現状の気に入らないところをリストアップ

  • バナーを設置できるようなスライドショーが欲しい
  • ランキングは上に欲しい
  • 下の方にお知らせ一覧が欲しい

それくらいあればよくあるECサイトの見た目になる気がします。

つまりはトップページのみカスタマイズしたいのです。

下層の会員ページとか、カートページ・購入ページはCSSの見た目変更だけで問題なく、
ブログの部分などもおそらくwordpressテーマを作ったことのある人なら問題なく自由にカスタマイズできるでしょう。

つまり、TOPページの作成さえできればいい。しかも、ニュース(ブログ)の一覧はWordpress的な文法で解決できるでしょう。
スライドショーも同様。(プラグインを入れてもいいし、普通に追加してもいい。自分はACFでバナー追加できるようにするかなー)

  • ランキングの読み込み(表示)
  • 商品一覧の読み込み(表示)

これさえわかればとりあえず大体の制作に対応できる気がします。

テンプレートを見たら、なんかカスタマイズの方法が書いてあった。

Homepage Control プラグインの追加で、TOPのコンテンツを操作できるよ、と。
入れたらカスタマイズで表示非表示の切り替えと、並び替えが可能になっていました。

多分これで問題ないかな・・・?

でもやっぱ物足りないと思って調べたら商品は「product」カスタム投稿だった

ここまでわかれば、様々な問題が解決したも同然。TOPでサブループを回せば商品一覧は表示できそうです。


<? //single slug は 「product」 //ページリンクURL the_permalink(); //商品名 the_title(); //商品説明 the_content(); //商品画像 the_post_thumbnail(); //金額 echo get_post_meta( get_the_ID(), '_price', true ); ?> //カートに追加するボタン <a href="/?add-to-cart=<?php the_ID(); ?>">カートに追加</a>

上記で大体事足りるのではないでしょうか?

Homepage Control と ニュースの出力など組み合わせれば色々できるし、ACFプラグインも使えば楽天のように長いLPの後に購入の入力欄のあるページも作ることが可能なのではないでしょうか。
ながーい記事に付属するタイプのものであれば、記事に商品IDのカスタムフィールドを作り商品と連携するのも容易いかもしれません。

実際運用して見ないことには足りない機能や不満などがわからないと思いますので、実際のECサイトを運用し、半年後くらいに所見を共有できたらいいなと思います。

(とりあえず現状の)

まとめ

  • woocommerceは無料のプラグインで簡単に wordpressの ECサイトが作れる
  • ほかのショッピングサイト作成ツールと異なり、wordpressの制作スキルが行かせることが大きい
  • 便利な拡張機能や、かっこいいテーマは有料である
  • しかし無料の範囲でも多くのことができるし、購入テーマを使うなら初心者でもおすすめかもしれない
  • カートや、会員ページなどはめっちゃ使える品質。カスタマイズが必要なのは主にTOPページ
  • 商品はslug product のカスタム投稿なので、いわゆるカスタム投稿の表示方法で操作できる
  • 決済は「paypal」と「Stripe」 要アカウント

てなところです。

こちらの記事もおすすめ!