WooCommerceのカスタマイズ方法のまとめ

ECサイトプラットフォーム(Shopify/BASE/STORES/MakeShopなど)のメリットは、商品管理やクーポン管理、配送管理などオンラインショップで利用する管理画面があらかじめてついており、かつ様々な決済手段に対応し、テンプレートなどを利用することでプログラムの能力などがなくても簡単に構築できるのが最大のメリットだと思います。また、サイトのデザインもある程度まではカスタマイズができます。

一方で、ある程度カスタマイズはできますが、どうしてもECサイトプラットフォームに依存してしまうところがあり、ページを簡単に追加できなかったり、オリジナルの管理画面を作成できなかったり、またSEO対策なども限定的なものになるため、カスタマイズ性が低い事がデメリットかと思います。

そんな中で、｢Wordpress｣上でオンラインショップの作成ができる｢WooCommerce｣は、無料で利用できるプラグインとなっており、カスタマイズも当然自由にできます。

カスタマイズには、WordpressやWooCommerceのテンプレートや関数などを駆使するので、玄人向けではございますが、ECサイトのプラットフォームに依存しない形で作成ができますので、カスタマイズなどが多いお客様にはぴったりの組み合わせだと思います。
(ただし、無料で利用できる反面、自己責任となりますので、詳しくない方はWeb制作事業者など有識者にお任せする事をお薦めします。)

もちろん、ECプラットフォームと同様に商品管理やクーポン管理、配送管理などもできます。

決済については、WooCommerceプラグインを利用する事でクレジットカード決済を簡単に実装する事ができます。

弊社の最近のおすすめは、決済代行業者の｢Stripe｣がお勧めです。

ということで、今回は｢WooCommerce｣でオンラインショップを構築する時のカスタマイズ方法について、まとめました。

1.WooCommerceの導入

まずは、Wordpressの｢プラグイン｣から｢新規追加｣を押下し、｢WooCommerce｣をインストールしましょう。

｢WooCommerceの導入｣

2.各種設定

WooCommerceのプラグインを｢有効化｣すると｢WooCommerce｣の設定画面が開きます。画面一杯に広がりますが、/wp-admin/ディレクトリに戻れば、後からでも設定はできます。

ストアの詳細:WooCommerceへようこそ

ストア情報の入力画面

オンラインショップの運営元事業者の国・地域(県名)、住所、郵便番号、市区町村、メールアドレスを入力します。
(順番が少し変なのは、英語表記を日本語に翻訳しているためです。)

｢よりよいWooCommerceを構築｣に協力する方は、｢はい。参加します。｣、協力しない方は、｢結構です｣を選択してください。

業界：ストアはどの業界で運営しますか？

販売する商品の業界(業種)を選択

自社で販売する商品の業界(業種)を選択します。

商品タイプ：どんな商品を掲載しますか？

商品のタイプを選択

商品のタイプを選択します。実在商品(物)を販売する際には、｢実在商品｣を選択します。ダウンロード形式の電子媒体を販売する際には、｢ダウンロード｣を選択します。定期購入(サブスクリプション)や会員制、予約販売などは有償の機能となりますので、画面に表示されている費用がかかります。

ビジネスの詳細：ビジネスについて教えて下さい。

ビジネスの詳細を入力

ビジネスの詳細を入力します。販売する商品の種類の数や、他での販売状況、従業員数、年間収益などを入れます。
(画面構成に変わりは無いので、恐らくWooCommerceの利用状況調査だと思います。無料で利用させて頂くので正確な情報を入れてあげましょう。)
弊社のようなWeb制作事業者であれば、｢クライアント向けにストアを設定しています。｣にチェックを入れます。

フリープラン機能：含まれるビジネスプラン機能

無料で利用できる各種ツールを選択

WooCommerceでは、無料で利用できるツールをここで選択することができます。
Jetpackはサイトスピードやセキュリティを強化するプラグイン。
Mailpoetはメルマガ発行などのメールマーケティング用のプラグイン。
Googleリストおよび広告は、Web広告用のプラグイン。
その他にも無料で利用できるプラグインが用意されていますが、個人的にはいずれも使いにくいので、お客様の要件にあわせて個別に利用しやすい方法で実装したり、別のプラグインを導入したりしています。

基本設定完了

ストアの詳細登録完了

これで初期設定は完了ですので、後は販売する｢商品の設定｣や｢配送設定｣、｢決済手段｣、｢クーポン｣等を設定していけば完了です。
今回はこれらの各種設定方法の詳細は記述しませんので、個別にネットの情報などを参考にして下さい。

3.その他、導入すると便利なプラグイン

あわせて導入すると、便利なプラグインについても紹介しておきます。

Japanized For WooCommerce

こちらは日本のエリアに合わせた形にしてくれます。例えば決済手段に｢銀行振込｣を選択すると日本の銀行の振込形式(｢銀行名｣、｢店名｣、｢普通/当座｣、｢口座番号｣)にしてくれます。

Product Gallery Slider for WooCommerce

商品詳細の商品画像の表示をカスタマイズできます。Amazon のECサイトのような商品画像の表示形式を簡単に実現できます。

あとは決済手段に応じて各種決済代行業者に対応したプラグインも合わせて導入してください。

4.ご利用テーマを｢WooCommerce｣に対応させる(サポート宣言)

まずは、ご利用のテーマが｢WooCommerce｣に対応しているかどうかを表すサポート宣言がされているか確認しましょう。

WooCommerceのサポート宣言を確認

｢WooCommerce｣→｢ステータス｣→｢WooCommerceサポート(英語)｣を確認します。
上記画面のように｢！宣言されていません｣と表示されている場合には、ご利用のテーマに対して｢サポート宣言｣をする必要があります。

ご利用テーマのfunctions.phpに以下の記載を行います。

本サポート宣言を行えば、ご利用のテーマにてWooCommerceサポートがチェックされます。
反映されるタイミングがあるようで、もし正しく記載しているにも関わらず反映されないのであれば、作業を進めて頂き、再度ご確認ください。

5.カスタマイズの準備

WooCommerceのプラグインが導入されているディレクトリのtemplatesディレクトリに入っているファイルがテンプレートファイルです。この内容をご利用のテーマ配下にコピーし、ディレクトリ名をwoocommerceに変更します。
(移動ではなくコピーです。全てコピーしても構わないですし、カスタマイズ対象ファイルのみでも可能です。)

/wp-content/plugins/woocommerce/templates/

WooCommerceの”templates”ディレクトリ

これをお使いのテーマ配下にコピーし、ディレクトリ名を”woocommerce“に変更します。

/wp-content/themes/(テーマ名)/

ご利用テーマ配下にコピーしディレクトリ名称変更

カスタマイズ作業は、ご利用テーマの”woocommerce“ディレクトリ配下の各テンプレートファイルを編集することで可能となります。

6.よく利用するテンプレートファイルのまとめ

woocommerce配下でよく利用するテンプレートファイルは以下です。

各ページは、このファイルを編集する事で自由にカスタマイズする事ができます。

7.まとめ

WooCommerceは、WordpressでECサイトが作成ができるので、手軽にオンラインショップが始められるだけでなく、ECサイトのプラットフォームに依存しないため、カスタマイズ性(自由度)が非常に高いです。ただし、カスタマイズするには、ある程度のWordpressやWooCommerceの知識、またサーバーサイドのプログラム開発能力(PHP)が必要となります。
以前は、ほとんどの最新情報はすべて英語なので、Webサイト制作業者の方でもカスタマイズには若干苦労する面も多かったと思うのですが、最近はChatGPTが出たことで、簡単にカスタマイズができるようになったかなと思います。
知識がない方は、有識者の方に依頼することをお薦めします。

以上、皆さまのお役に立てれば幸いです。