プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

WordPressサイトにお手軽に決済機能を追加する2つの方法

はじめに

タイトルの通り、お手軽にというのが本記事のポイントなので、決済手段はこだわりがないがとにかくEC機能を簡単に追加するための方法と割り切って紹介していきます。

まずWordpress製のサイトに決済機能を追加する方法としては大きく2つあります。

  • プラグインを使って決済機能を追加する
  • 外部のECサービスを利用しWordpress内に外部カートボタンとして埋め込む

前者はWordpress内でのみ完結するのでシンプルです。
後者は別サイトを利用しなければいけないという手間はありますがWordpress側で作り込む必要が一切ないので、こちらもお手軽かと存じます。

そのため、この記事では上記2つの方法を試していきます。

プラグインを使って決済機能を追加する

プラグインで決済機能を追加する場合は「WooCommerce(ウーコマース)」、または「Welcart」の2つが候補として挙がります。

WooCommerce(ウーコマース)は世界で使われているプラグインですが、日本語化のプラグインを追加したり、クレジット決済のためにstripe等を組み合わせたりと少し手間がかかりそうです。

対してWelcartは日本製なのでもちろん日本語対応、かつ多くの導入実績があるようなので、今回はこちらで試したいと思います。(Welcartの公式サイトはこちら)

ただ一点注意事項としては、Welcartは有形商品の販売が対象となっています。
情報商材やクラウドサービス等の無形商品の販売を考えている場合、後ほど紹介する外部のECサービスを利用する方法をご参照下さい。

Welcartを使ってWordpressサイトに決済機能を追加

まずはお決まりの「プラグイン>新規追加」からWelcartを検索

インストールして、有効化します。

続いてWelcartのサイトに無料で会員登録し、無料の「Welcart Basic」というテーマをダウンロードします。

ダウンロードしたテーマをWordpressの管理画面からアップロード、またはapp\public\wp-content\themesの下に解凍したフォルダを移動させます。

「外観>テーマ」にダウンロードしたテーマが表示されますので、有効化をクリック

なんとこれだけでWordpress+ECサイトの基本的な機能を兼ね揃えたサイトを表示することができます

WordPressの管理画面に「WelcartShop」というのが追加されていますので、そこから「配送設定」「支払い方法」を設定します。
その後、「新規商品追加」から商品を登録できるようになります。

試しに商品を一つ登録してみました。(ローカル環境にてテストしています。)

しっかりと商品が表示されました。

注文してみました。
受注リストにステータスが表示されています。

Welcartを使ったWordpressへのEC機能の追加の流れはこのような感じで、とても簡単でした。
ただテーマのカスタマイズをしたりオリジナリティを出していく必要はありますね。

まとめると、Welcartを使いたい場合は、SEOに強いブログコンテンツと併用した有形商品の販売に特化しているといえると思います。

ただ商品を販売したいならBASE等もっと手軽なサイトがありますが、Wordpressと組み合わせる醍醐味としてはやはりここですね。

雑貨屋さんなどでもいいと思いますし、アパレルショップ等も適しているかなと思います。
商品の販売と同時にブログでもコーデを載せて商品の魅力を発信できると素敵ですよね。

続いて外部のECサービスと連携しWordpress内に外部カートボタンとして埋め込む方法をご紹介します。

外部のECサービスを利用しWordpress内に外部カートボタンとして埋め込む

まず外部のECサービスとしては先述したBASEやSTORES等のASPを利用する方法、またはWordpressのようなオープンソースのEC-CUBE等が候補に挙がるかと思います。

この記事では、無形商品もOK。導入、利用は無料、決済手数料も安いSTORESをオススメとし紹介していきます。

STORESで会員登録を行う

STORESの会員登録はこちらから

メール認証と必要事項を入力し、会員登録を済ませます。

ダッシュボードにログインできるようになるので、商品を登録してみましょう

商品の登録が完了したら、該当商品へのボタンを設置します
ボタンの設置についての説明はこちら

上記のタグをWordpressサイトの任意の場所に貼り付けて使います。

WordPressのデフォルトテーマ内にウィジェットとして追加してみました。

ボタンをクリックすると、Wordpress内部でモーダルが立ち上がります。
さらに次のステップに進むことでSTORESへ遷移するといった形になります。

とてもシンプルですね。

まとめ

今回はWelcartを使ってWordpress自体をECサイト化する方法、STORESを使って外部ECサイトと連携し購入ボタンを埋め込む方法の2つを紹介しました。

設定難易度はどちらも変わらないくらい簡単ですが、
販売対象が有形商品なら2つから選択できますが、無形商品の場合はSTORESがオススメとなります。

また、できるだけドメイン間を遷移せず購入までスムーズな導線を引きたい場合にはWelcartのほうがいいかもしれません。

最後までご覧いただきありがとうございました。