WooCommerceで商品情報を取得してテンプレートを作る①

最近、これから事業を始めたり今までのものをリニューアルしたいというホームページの仕事が増えています。

そんな中で自分のサイト上で商品を売りたいという方が増えてくるのではないかと思って、WooCommerceを勉強しております。

過去にEC-CUBEやらBASEやらshopifyやらを使用したことはあるのですが、EC-CUBEは自社サイトに入れるとプログラムの更新などのメンテナンスを怠ると大変なことになる（EC-CUBEのプラットフォームを使用するパターンもある）し、メジャーバージョンが上がるとテンプレートに使っているフレームワークが変わったりするのでその辺も大変でした。ショッピングサイトを専門にするならまだしも、専門でない場合はちょっとハードルが高い。

BASEやshopifyはセキュリティの更新などはプラットフォーム側でやってくれるしテンプレートも易しいですが、更新費用や売上に対する手数料などがありこれから事業を始める人にはそのコストがネックになります。

とっかかりとして商品点数も少ない間であれば、wordpressのプラグインで始めるのがハードル低いかなと思っています。

元々はwordpressのテーマの開発元で開発されたものみたいなのですが、現在はwordpressの開発元に買収されているようでセキュリティ的にもより安心できるかなと思っています。

単純に実装するだけならプラグインをインストールして、woocommerce.phpってテンプレートをつくってループ処理を入れて、functions.phpにテンプレート使うよって宣言をすれば実装できるので超簡単です。

しかし、作っているとこだわりが出てきてレイアウトなどもカスタマイズしたくなってくるのが世の常。

カスタマイズも大元のテンプレートを自分のテーマのフォルダにコピーしてそれを変更すれば簡単！という触れ込みだったのですが、ドキュメントが英語なのとチュートリアル的なサイトが少なく、けっこうハードルが高い。

テンプレート内のアクションフックにhtmlタグを入れるのもあまり美しくない…かといってCSSだけカスタマイズするのでは物足りない…

とりあえず前者のやり方でデザインの変更を試みたのですが、かなり難しい…ちょっと今のレベルでは厳しそう。

仕方がないので下記のページを参考にさせてもらって折衷案を取ろうろ思います。

b-risk.jp

WooCommerceの導入とカスタマイズ方法まとめ | 東京のホームページ制作 / WEB制作...

https://b-risk.jp/blog/2021/11/woocommerce-usage/

ここ数年でオンラインショップの普及がすごい進んだような気がします。こんなご時世なので、通常よりもさらにオンラ

ショップのページの一覧ページと商品詳細ページはオリジナル、それ以降のカートシステムに関してはそのままのテンプレートを使用します。

カートシステム以降はセキュリティ的なことも考えてあまりいじらないほうがいいのではないかという判断です。変にフォームを自作で作ってXSSなどの危険に晒されるのもいやなので…

一覧ページに関しては表示してid拾ってカートに投げるだけですもんね。カート以降はテンプレートにあるクラスのデザインをCSSで変更する手段でいきます。

一覧ページなどのテンプレートだと価格なんかは標準価格もセール価格もpriceタグで囲まれているだけでCSSだけでは変化がつけられなさそうだったりしたのでここは自分で作ったほうがたぶん早い。

そうなると商品情報を格納しているオブジェクトが欲しくなるのですが、$productという変数に配列で入っているみたいです。

先ほど参考にしたページだけだと欲しい情報が足りなかったり、他のページもまちまちだったので備忘録的にまとめたいと思います。

お知らせ

株式会社プラン・ドゥでは一番くじなどで馴染みのあるミシン目の入ったくじの販売を行なっております。

他社ではなかなかできない製品を最適な価格でご案内させていただいておりますのでぜひお問い合わせください。その他の取扱商品はこちらからご覧いただけます。
https://plando-inc.co.jp/product

お問い合わせはこちら

前の記事次の記事