DiviやElementorでWooCommerceのチェックアウト&サンキューページをノーコード(NoCode)でデザインする方法

こんにちはナオミです。

皆さんはWooCommerceを使っていて

「WooCommerceのチェックアウトページがカッコ悪い」
「WooCommerceのサンキューページに動画を入れたい」

そんな風に思ったことありませんか？
今回の記事ではどうやってチェックアウトページとサンキューページを見たまま編集できるDiviやElementorでスタイルするのか説明していきます。

DiviやElementorでWooCommerceのチェックアウト&サンキューページをノーコード(NoCode)でデザインする方法を動画でご覧になりたい方はこちらからどうぞ！

動画も作りましたので合わせて見ていただけると嬉しいです。
それでは始めましょう！

スタイルするのに必要なプラグインはCartFlows

WooCommerceだけでは通常チェックアウトページやサンキューページは編集できません。
そこで使われるのがCartFlowsです。

CartFlowsとDiviやElementorを組み合わせることによって、チェックアウトページとサンキューページを編集できるようになるんです。
プラグインは無料ですので、是非試してみてください。

WordPressのプラグイン検索に『cartflow』と入力すると出てきますので、インストールして有効化してください。
有効化しますとメニューに『CartFlows』が追加されますので、選択して設定していきます。

設定に入りますとまずは『General Settings』で自分の使うページビルダーを選択して保存してください。
DiviとElementorどちらかを選べます。

設定が完了しましたら、次にメニューの『Flow』を選択し、『Add New』を押して”チェックアウトページ”と”サンクスページ”を編集していきます。

”Flow”というのはWooCommerceで買い物をするユーザーさんにどのような順番でページが表示されるのかの流れのことです。

ランディングページ→チェックアウトページ（決済）→サンクスページ（注文完了）

このユーザーさんが見ていくページの流れを構築していくのが『Cart Flows』というプラグインです。

テンプレートがいくつかありますので、今回はそれを使います。
『Create Your Own』を選択すると自分で最初から作ることができます。

するとFlowの編集画面に入ります。
分かりやすいように名前をつけて、『Enable Test Mode』にチェックを入れてテストモードにしてください。

そして編集したいページの『Edit』を押します。

すると今回はテンプレートを選んだので、すでに完成されたチェックアウトページが表示されます。
上のメニューから『Elementorで編集』（Diviの場合はDivi Builderで編集）を選ぶと、画像を入れたり、文字を入れたりして自由にページを編集できます。

注意点としては、『請求先情報の入力』の部分はWooCommerceが出力しているものですので、自由に編集することはできません。（位置を変えたり、背景色を変えたりはできます）

また、決済画面に150ユーロと表示されていますが、こちらは先ほど設定したテストモードが自動的に生成してる架空の商品ですので、安心してください。

今回は”チェックアウトページ”を編集しますが、”サンクスページ”も同じように『Edit』から編集できます。

編集したFlowをサイトに反映させる

『Cart Flows』は編集して保存しただけでは実はサイトには反映されません。

WordPressダッシュボードの

Cart Flows→Setting→Genneral Settings

こちらの『Global Checkout』をから先ほど編集したチェックアウトページを選択して保存します。

これでサイトに編集した”チェックアウトページ”と”サンクスページ”が反映されるようになります。

いかがでしたか？
今回使用したプラグイン『Cart Flows』は無料ですので、皆さんもぜひ試してみてください。

おしゃれでかっこいいショッピングサイトはもう目の前です！

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか？
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから７日間は無料で合わないなと思えばいつでもキャンセル可能です。