WooCommerce チェックアウトを Shopify のようにする方法

公開: 2023-02-15

デフォルトの WooCommerce チェックアウトを Shopify のチェックアウトページのように見せたいですか?

Shopify は、デザインとユーザーエクスペリエンスに重点を置いています。その結果、チェックアウトページはすっきりとシンプルになり、迅速な販売が促進されます。

幸いなことに、チェックアウトページのデザインにアクセスするためだけに Shopify に切り替える必要はありません。

代わりに、Botiga テーマなどのサードパーティの WooCommerce ツールを使用して、WooCommerce チェックアウトページに Shopify のようなデザインを実装できます。

このチュートリアルでは、Botiga を使用してデフォルトの WooCommerce チェックアウトページを Shopify のように見せる方法を紹介します。

1. Botiga WooCommerce テーマをインストールして有効化する

Botiga は機能豊富な WooCommerce テーマで、無料バージョンと Pro バージョンの両方があります。多数のレイアウト、スタイル、カスタマイズオプションが用意されているため、顧客に合わせて優れたショッピングエクスペリエンスを提供できます。

WordPress サイトにインストールするには、ダッシュボードを開き、 [外観] > [テーマ] > [新規追加]に移動します。

テーマの追加管理ページに、検索バーが表示されます。「Botiga」と入力すると、そのテーマが検索結果に表示されます。

[インストール]ボタンをクリックして、テーマを有効にします。

または、当社の Web サイトから Botiga をダウンロードすることもできます。

次に、WordPress 管理エリアの[外観] > [テーマ] > [新規追加] > [テーマのアップロード]に移動します。

[ファイルを選択]ボタンをクリックしてテーマをアップロードし、 [今すぐインストール]ボタンをクリックします。

インストールが完了したら、 [Activate]リンクをクリックしてテーマを有効にしてください。

2. Botiga Pro プラグインのインストールと有効化

Botiga Pro は、無料の Botiga テーマに多くのプレミアム機能を追加する WordPress プラグインです。

Shopify スタイルのチェックアウトレイアウトにアクセスするには、テーマとプラグインの両方が必要です。

価格プランは年間 69 ドルからで、Botiga Pro を 1 つの WordPress サイトで使用できます。すべてのプランについては、こちらを参照してください。

購入後、Botiga アカウントからプラグインをダウンロードします。

次に、WordPress 管理エリアを開き、 Plugins > Add New > Upload Pluginに移動します。

[ファイルを選択]オプションを使用してプラグインをアップロードし、 [今すぐインストール]ボタンをクリックします。

アップロードプロセスが終了したら、 [プラグインを有効にする] ボタンをクリックします。

次に、ライセンスキーをアクティブ化する必要があります。

Botiga アカウントに移動し、ライセンスキーをコピーします。

次に、WordPress ダッシュボードを開き、 [プラグイン] > [Botiga Pro ライセンス]に移動します。ライセンスキーを入力し、 [変更を保存]ボタンをクリックします。

Botiga Pro プラグインが WordPress サイトにインストールされ、有効化されました。

3. スターターサイトをインポートする (オプション)

スターターサイトまたはデモは、すぐに使用できる、またはわずかに変更して自分に合ったデザインを実現できる、事前に構築された Web サイトデザインです。サイトをゼロから設計する必要がないため、多くの時間と労力を節約できます。

現在、Botiga は、ビューティー、アパレル、家具、ジュエリー、単一製品、マルチベンダーの 6 つのスターターサイトから選択できます。

スターターサイトをインポートせずに Botiga を使用することもできます。この場合、独自のコンテンツを追加し、Botiga のカスタマイザーオプションを使用して設定を構成する必要があります。

スターターサイトをインポートするには、 [外観] > [スターターサイト]メニューをクリックします。 [デモのプレビュー]ボタンをクリックしてデザインをプレビューし、Web サイトにインストールする場合は[インポート]ボタンをクリックします。

次の瞬間に、サイトにインポートされるすべてのプラグインとコンテンツを示すポップアップが表示されます。

[インポート]ボタンを選択し、プロセスが終了するまで待ちます。

スターターサイトがインポートされたら、ホームページを開いて、WooCommerce ストアの新しいデザインをチェックしてください。

4.カスタマイザーを開く

カスタマイザーを開くには、WordPress ダッシュボードで[外観] > [カスタマイズ]メニューをクリックします。

Web サイトのホームページに移動し、カスタマイザーインターフェイスが画面の左側に表示されます。

カスタマイザーメニューには、WooCommerce チェックアウトページのレイアウトを Shopify チェックアウトページのようなレイアウトに変換するオプションがあります。

5. チェックアウトページのレイアウトデザインを選択する

カスタマイザーでWooCommerce > Checkoutに移動します。ここでは、チェックアウトページの 5 つのレイアウトオプションが表示されます。

Botiga には、Shopify と同様のユーザーエクスペリエンスを提供する 2 つのチェックアウトページレイアウトがあります。

レイアウト 4 – Shopify マルチステップチェックアウト。これにより、顧客は情報を段階的に入力できます。
レイアウト 5 – Shopify ワンステップチェックアウト。1 ページにすべての情報が含まれます。

Shopify との比較を確認するために、Shopify のチェックアウトページのスクリーンショットを次に示します。

Botiga のマルチステップ Shopify レイアウト(レイアウト 4)の最初のページは次のようになります。

そして、これがLayout 5 、Botiga のワンステップ Shopify のようなチェックアウトページです。

ニーズに最適なレイアウトを選択し、カスタマイザーインターフェイスの上部にある[公開]ボタンをクリックして、変更を実装します。

それでおしまい。 WooCommerce のチェックアウトページが Shopify のように見えるようになりました。

6.チェックアウトページでオプション機能を有効または無効にする

チェックアウトページで有効または無効にできる機能がいくつかあります。カスタマイザーのチェックアウトレイアウトのすぐ下にあります。

次の 3 つのオプションをオンまたはオフに切り替えることができます。

クーポンフォームを表示する– このオプションはデフォルトで有効になっています。無効にすることを選択できます。
スティッキーチェックアウト合計ボックス– 合計ボックスをスティッキーにすることができるため、顧客が上下にスクロールしても、ボックスは画面の右側に固定されたままになります。
気が散らないチェックアウト– このオプションでは、ヘッダーとフッターのコンテンツが削除され、顧客がチェックアウトプロセスに集中できるようになります。

次の 3 つのフォームフィールドをrequired 、 optional 、またはhiddenに設定することもできます。

会社名
住所2
電話

最後に、2 つの重要な法的文書をチェックアウトページに追加できます。

プライバシーポリシー
規約と条件

最初に、 [ページ] > [新規追加]メニューからこれらのページを作成する必要があります。次に、ドロップダウンに表示され、チェックアウトページに追加できます。

結論

WooCommerce は優れた e コマースプラットフォームですが、ストアの特定の領域を改善したい場合は、サードパーティのツールが大いに役立ちます。

たとえば、Botiga を使用して、デフォルトの WooCommerce チェックアウトページを、クリーンでシンプルな Shopify チェックアウトエクスペリエンスに似たものにすることができます。

Botiga は、コンバージョン率の高いオンラインストアを構築するために設計された強力な WooCommerce テーマです。テーマは無料ですが、高度な機能を有効にするには、プレミアム Botiga Pro プラグインとペアリングする必要があります.

Botiga の Shopify のようなチェックアウトページレイアウトを使用するには、テーマとプラグインの両方が必要です。

それらを Web サイトにインストールし、スターターサイトをインポートして、カスタマイザーからチェックアウトレイアウトを有効にします。

これらの手順を実行すると、Shopify のようなチェックアウトページが WooCommerce ストアですぐに稼働します!