WooCommereのチェックアウトを改良
WooCommerceを使っているけどチェックアウトの画面が使いにくい、綺麗じゃない。ダサい。
そんなふうに思っているあなた、今日その問題が解決できます。
カートフローズは米国のカリフォルニア州のCartflows社によって開発されたSales Funnel またはランディングページにフローを作成できるプラグインです。
WordPressのECサイト、課金システムのスタンダードであるWooCommerceと連携して高機能なセールスファネル・ランディングページのフローを作成できます。
カートフローズはファネルやLPに使用しなくても、あなたのECサイトのチェックアウトをカスタマイズするのにとても役に立つプラグインです。
このビデオではCartflowsを使ってcheckout ページのかっこよくする方法を
No.1 リアルタイムアカウントチェック機能
メールを入れるだけでアカウントがあるか判断してくれる。
WooCommerceは素晴らしいプラグインですが、コンバージョンやUIを考えた時に必ずしもモダンではなく、またShopify Amazonなどに比べると少し使いづらさを感じます。
そのひとつがチェックアウトでアカウントがあるかどうの判断です。
WooCommerce標準ではチェックアウトでメールアドレスを入れ、その他住所等全ての情報を入れた後に、購入ボタンを押して、もし既にアカウントがある場合、弾かれてログインするように勧められます。
だったら最初から言ってほしいと思いますよね？
カートフローズはこのイライラを解消してくれます。
No.2 チェックアウトの最初にメールフィールドがくる
カートフローズに新しいテンプレートでは最初にメールアドレスを入れる項目が出てきます。自然とお客様がそこから入力しはじめます。メールアドレスを入れると、システムが自動検索をかけて、もしそのメールアドレスでアカウントが存在する場合は、パスワードを入れろと聞いてきます。
これはとても便利です。
そしてもしアカウントがなければ、パスワードを入れてアカウントを作る項目が出てくる仕組みになっています。
No.3 フィールドフォーカス機能
名前や住所などの選択中のフィールドが色でハイライトされます。
自分が今どのフィールドを入力しているのかがすぐにわかります。
No.4 ヘルプテキストのコンパクト表示
標準のWooCommerce決済ページは名前や住所などのフィールド説明ラベルがフィールドの上に常に表示されています。
CartFlowsのモダンチェックアウトではフィールドの内部にラベルが表示され、クリックした瞬間に縮小し邪魔にならず、でも内容が見えるようになります。これにより決済ページがよりコンパクトになります。
No.5 Google Map 住所確認機能
GoogleのMapの住所検索APIとの融合により、番地を入力すると該当する住所のオート入力ができるようになります。
No.6 ご注文要約セクションの新デザイン
WooCommerce標準の「ご注文」内訳セクションは必要な情報は表示されますが、見にくく、内容がわかりにくいです。
カートフローズを入れることで、商品のサムネイルが表示されるのを初め、小計、送料の欄スペースや合計金額が大きく太字になるなど、劇的ではないが、見やすくなる工夫が施されています。
No.7 読み込みスピンから流行りのスケルトンローダーへ
WooCoommerce標準の読み込み中スピンはかなりベーシックなもので見た目も悪く、また古いイメージがあり、サイトの印象アップにも貢献しません。近年はスケルトンローダーと呼ばれる文字や画像は入っていないがその場所が読み込み中に見える読み込み画面が流行っており、今回のカートフローズのアップデートではこの読み込み画面が採用されています。
これがあるだけで決済画面が一気にモダンなイメージに変わります。
No.8 アコーディオン式支払いオプション表示
好きな支払い方法を選ぶとその部分がアコーディオン展開で大きく表示され詳細を入力するスタイル。アマゾンやShopfiyサイトなどにも採用されているこの方式に慣れているお客様も多いはず。以前より明確に自分が選択する決済方法がわかり、さらにモダンなイメージも持たせられます。
No.9 注文ボタンの装飾オプション
通常WooCommerceの購入ボタンは「注文する」の一言だけですが、Cartflowsの新オプションで決済金額表示、文章変更、鍵アイコンの追加ができるようになりました。
Cartflowsを使わなければカスタムコードをしないといけないので、これはとても助かりますね。
No.10 – エキスプレスチェックアウト（Apple Pay or Google Pay)
人気のクレジットカード決済システム「Stripe」を使うことで
Google PayやApple Pay を導入できる機能です。
これを使用するにはWooCommerce標準のStripeプラグインではなく、
こちらのプラグインが必要になります。
このプラグインとCartflowsとの組み合わせの良いところは、Apple Pay Google Payが決済画面の一番上に出てくることです。
結局のところApple Pay Google Payを使用したい人は情報を入力するのが面倒で、それをスキップできるところに魅力がありますから、決済画面の’一番上に出てくるのが最も自然ですよね。Cartflowsを使うとそれが出来るようになります。
また決済ページではなく、カート画面に表示することもできます。