「ストアーズで商品を販売する予定なのですが、自分のワードプレスのサイトにも連携させたいです」と女性のお客様から相談されました。
ということで、私が調べてみました。
流れとしては、
- STORESに商品を登録し公開
- ワードプレスのサイトに「WooCommerce」のプラグインをインストールし、商品ページを作成
- ワードプレスのサイトに「ELEX WooCommerce Catalog Mode」のプラグインをインストール
- STORESで「ストアボタン」を作成し、コードを生成
- ワードプレスの商品ページに「ストアボタン」のコードを貼り付ける
これで完成となります。
1. まずは、STORESに登録し、商品を登録してください。
2. 次に、あなたのワードプレスのサイトに「WooCommerce」のプラグインをインストールします。このプラグインをインストールすると商品ページを簡単に作成できます。日本語にも対応しているのでわかりやすいです。
ただし、「WooCommerce」を使う場合、注意が必要です。「WooCommerce」をインストールすると「WooCommerce」単体でECサイトを作って運営できます。決済も可能になります。ですが、今回はTORESSと連携させるため「WooCommerce」自体の決済機能等は使用しません。そのため、カートのボタンや数量表示を消す必要があります。
3. そこで「ELEX WooCommerce Catalog Mode」のプラグインをインストールします。このプラグインをインストールすると数量とお買い物カゴボタンの表示を消すことができます。
「Remove Add to Cart」の「Enable」にチェックを入れて「変更を保存」ボタンをクリックします。
数量とお買い物カゴボタンの表示が消えました。
4. TORESSで「ストアボタン」を作成し、コードを生成します。STORESダッシュボード内の左メニューにある「ストア設定」をクリックします。
「ストア設定」をクリックすると「ストア設定」の画面が右に表示されます。その中にある「詳細設定」のリスト内の「ボタンを設置」右横にある「設置する」をクリックします。
以下の画面でボタンのデザインを設定し、ボタンを作りたい販売アイテムを選択します。その後、「貼り付けコードを生成する」をクリックしてください。
貼り付けコードが生成されるので、「コピーする」をクリックしてコードをコピーしておきます。
5. コピーしたコードをワードプレスの商品ページ内にある「商品の簡単な説明」に貼り付けます。その際、必ず「テキスト」タブに切り替えて貼り付けてください。
出来上がりです！
ここで注意点があります。
ボタンコードを貼り付けて保存すると、エラーが表示される場合があります。エラーが表示されたら、レンタルサーバーの「WAF設定」を一時的に「無効」に切り替えてください。切り替え後、5〜10分ほど待つと保存できるようになります。
ロリポップサーバーの場合の切り替え方だけ載せておきますので、参考にしてください。
ワードプレスでの詳しい操作方法までは載せませんので、後はご自分で調べるか私の個別相談に申し込んでください。
商品一覧ページも「WooCommerce」で作成できます。ワードプレスに詳しい人は、以下のサイトも参考にしてください。
お客様から「こんなことできませんか？」と質問されると、Googleを駆使して調べたくなります。私の習性です。
ここまで自分で調べるか調べないかはあなた次第ですが、やらない人が圧倒的に多いです。私のように調べ倒す人は100人中1人ぐらいです。
そのため、いつまでも他の人と差がつきません。調べるなら徹底的に調べてください。Googleで調べると何でも載っています。自分で調べるのが苦手な人は、いつでもご相談ください。一緒に調べましょう。
