WordPressの代表的なECサイトプラグインであるWooCommerceのデザインカスタマイズ方法をご紹介します。
Contents
WooCommerceにおけるレイアウト／デザインの基礎知識
WooCommerceは基本的に「設定」と「プラグイン」でレイアウト／デザインを構築する設計思想があるようです。
その背景にはシステム（WooCommerceプラグイン)のアップデートの妨げになるようなカスタマイズは行って欲しくないという良心的な考えがあるのだと思います。
なので、ソースを改修してデザインを変更することが非常にやり難いシステムと言えます。
WooCommerceのデザインは、通常のWordpress同様テーマによって決定されますが、このテーマもWooCommerceの性質を受け継いでいるので、非常にカスタマイズがやりにくく、また、結局はテーマだけでなく、WooCommerceをカスタマイズしなければいけないケースが多々あります。
とは言っても、ソースを改修してカスタマイズできないわけではありません。WooCommerceはその方法もちゃんと用意しています。
ちょっと面倒ですが、やり方さえ理解すればWooCommerceの強力な機能を自分の求めるデザインで使うことができますので、十分その価値はあります。
このページでは、その方法をご紹介致しますので、ご興味ある方が続きをお読みください。
WooCommerceのデザイン構造
前述したようにWooCommerceはテーマで指定できるデザインが限られています。むしろ大部分はWooCommerceによるところが大きいでしょう。
基本的にWooCommerceのデザインは次のようになっています。
- レイアウトデザイン → テーマ
- パーツデザイン → WooCommerce
つまり、テーマをカスタマイズしてできることは大まかなレイアウトデザインで、細部のデザインを変更しようとするとWooCommerce自体をカスタマイズする必要があります。