ブログ記事やホームページ、文章の添削や書き方、チラシやカタログのデザイン、資料の作り方を男性に教えるDTPデザイナー歴19年のデザインコンサルタント 秋山アキラ

DTPデザイナー歴19年です。医療機器メーカー世界第2位の外資系企業の内勤デザイナーとして16年間、業界一位の製品カタログを作ってきました。社内ではデジタルマーケティング担当者でもありました。その経験を活かして、集客できるブログ記事の書き方、SEO対策、チラシやカタログのデザイン、資料の作り方を教えています。主に男性の個人事業主やフリーランスからの相談に乗っています。企業からの依頼も引き受けています。外資系企業での人間関係のお悩みにも乗っています。

MENU

storesで販売する商品をWordPressに連携させたいです

「ストアーズで商品を販売する予定なのですが、自分のワードプレスのサイトにも連携させたいです」と女性のお客様から相談されました。

ということで、私が調べてみました。流れとしては、

  1. storesに商品を登録し公開
  2. ワードプレスのサイトに「WooCommerce」のプラグインをインストール
  3. ワードプレスのサイトに「ELEX WooCommerce Catalog Mode」のプラグインをインストール
  4. ワードプレスで商品ページを作成
  5. storesで「ストアボタン」を作成し、コードを生成
  6. ワードプレスの商品ページに「ストアボタン」のコードを貼り付ける

これで完成となります。

 

まずは、storesに登録し、商品を登録してください。「ストアボタン」の作成まで流れが乗っている以下のサイトを参考にしてください。

masamitsu.biz

 

次に、あなたのワードプレスのサイトに「WooCommerce」のプラグインをインストールします。このプラグインをインストールすると商品ページを簡単に作成できます。日本語にも対応しているのでわかりやすいです。

www.vektor-inc.co.jp

ただ、「WooCommerce」を使う場合注意が必要です。「WooCommerce」をインストールすると「WooCommerce」単体でECサイトを作って運営できます。決済も可能になります。ですが、今回はstoresと連携させるため「WooCommerce」自体の決済機能等は使用しません。そのため、カートのボタンや数量表示を消す必要があります。

storesとWordPressの連携

そこで「ELEX WooCommerce Catalog Mode」のプラグインをインストールします。このプラグインをインストールすると数量とお買い物カゴボタンの表示を消すことができます。

「Remove Add to Cart」の「Enable」にチェックを入れて「変更を保存」ボタンをクリックします。

ELEX WooCommerce Catalog Mode

 数量とお買い物カゴボタンの表示が消えました。

storesとWordPressの連携
storesで「ストアボタン」を作成し、コードを生成します。それをワードプレスの商品ページ内にある「商品の簡単な説明」に貼り付けます。その際、必ず「テキスト」タブに切り替えて貼り付けてください。

商品の簡単な説明欄

storesとWordPressの連携
出来上がりです!

 

ここで注意点があります。

ボタンコードを貼り付けて保存すると、エラーが表示される場合があります。エラーが表示されたら、レンタルサーバーの「WAF設定」を一時的に「無効」に切り替えてください。切り替え後、5〜10分ほど待つと保存できるようになります。

ロリポップサーバーの場合の切り替え方だけ載せておきますので、参考にしてください。

lolipop.jp

 

ワードプレスでの詳しい操作方法までは載せませんので、後はご自分で調べるか私の個別相談に申し込んでください。

商品一覧ページも「WooCommerce」で作成できます。便利。ワードプレスに詳しい人は、以下のサイトも参考にしてください。

wcpn.jp

 

お客様から「こんなことできませんか?」と質問されると、Googleを駆使して調べたくなります。私の習性です。ここまで自分で調べるか調べないかはあなた次第ですが、やらない人が圧倒的に多いです。私のように調べ倒す人は100人中1人ぐらいです。そのため、いつまでも他の人と差がつきません。調べるなら徹底的に調べてください。Googleで調べると何でも載っています。Googleを使いこなせるようになりましょう。

blog.akira-workshop.com