WooCommerceライトボックスを作成する方法
公開: 2019-06-05オンラインショッピングで消費者が直面する最大の障害の1つは、商品情報をすばやく見つけることです。 実際、Forresterのレポートによると、米国のオンライン成人の45％は、質問に対する迅速な回答が見つからない場合、オンライン購入を断念します。
クイックビュー機能を備えたWooCommerceライトボックスをオンラインストアに追加することで、スムーズなユーザーフローを作成し、摩擦のないオンラインショッピング体験を顧客に提供できます。 つまり、顧客は、クリックして1つの製品ページに移動することなく、必要なすべてのもの（製品、製品の詳細、価格情報）を見つけることができます。
この記事では、オンラインストアでWooCommerceライトボックスプラグインの使用を検討する理由について詳しく説明します。 また、ステップバイステップのチュートリアルを紹介し、4つの簡単なステップでクイックビューを備えたWooCommerceライトボックスを作成する方法を示します。
始めましょう！
WooCommerceライトボックスプラグインが必要な理由
WooCommerceストアの所有者として、顧客が各製品の詳細を知るために個々の製品ページにアクセスする必要があることをすでにご存知でしょう。 ただし、これが必ずしも直感的でユーザーフレンドリーなショッピング体験になるとは限りません。
WooCommerceライトボックスプラグインを使用すると、顧客に次のことを許可できます。
- 製品の画像、ギャラリー、詳細をライトボックスで表示します。
- 商品オプション（バリエーションや数量など）を選択して、ショッピングカートに追加します。
そして最良の部分は、メインショップページまたはカテゴリページからこれらすべてを直接実行できることです。 商品の画像やギャラリー、バリエーションと属性、数量セレクター、カートに追加ボタン、価格、レビュー、カテゴリなどの追加の商品詳細などの情報を含めることを選択できます。
デフォルトのWooCommerceユーザーフローとは対照的に、ギャラリー機能も備えたWooCommerceライトボックスプラグインを使用すると、顧客のオンラインショッピングエクスペリエンスを向上させることができます。 これにより、製品の画像やギャラリーを簡単に表示し、WooCommerceの重要な製品の詳細をすばやく見つけることができます。 これは、衣料品、宝飾品、写真、ギフトなどの画像中心の商品を販売するオンラインストアで特に役立ちます。
プラグインを使用してクイックビュー機能を備えたライトボックスを作成する主な利点のいくつかを次に示します。
- PHPファイルを編集する必要はありません。 プラグインをインストールしてアクティブ化すると、クイックビューライトボックスが自動的に作成されます。 features.phpファイルを編集する必要はありません。
- CSSを使用したカスタムスタイル。 CSSファイルを編集しなくても、ブランドに合わせてライトボックスをカスタマイズできます。
- サポート。 また、プラグインの開発者、つまりBarn2Mediaからカスタマーサポートにアクセスすることもできます。
WooCommerce Quick ViewProを使用してクイックビューライトボックスを作成する方法
クイックビュー機能を備えたWooCommerceライトボックスを作成するために必要なものは次のとおりです。
- いくつかの製品が追加されたWooCommerceを利用したストア。
- WooCommerce Quick View Pro —レスポンシブなWooCommerceライトボックスプラグイン。
ステップ1：WooCommerce Quick ViewProをインストールしてアクティブ化する
WooCommerce Quick View Proプラグインを購入したら、WordPress Webサイトにログインし、インストールしてアクティブ化します。 次に、WordPressダッシュボードからプラグインの設定ページ（ WooCommerce >設定>製品>クイックビュー）に移動します。
購入確認メールで受け取ったライセンスキーを[ライセンスキー]オプションに入力します。 画面の下部にある[変更を保存]ボタンをクリックして続行します。
オンラインストアのメインショップページにアクセスすると、商品画像のすぐ下にクイックビューボタンが追加されていることがわかります。 使用しているテーマによっては、次のようになります。
クリックすると、WooCommerceライトボックスが起動し、製品の画像、ギャラリー、名前、価格、説明、SKU、およびカテゴリが表示されます。
ステップ2：顧客がWooCommerceライトボックスを起動する方法を選択する
WooCommerce Quick View Proを使用すると、顧客が製品のライトボックスを起動する方法を選択できます。 WooCommerce >設定>製品>クイックビューにもう一度移動し、オプションセクションを見つけます。
次のいずれかの方法で、顧客にライトボックスを起動させることができます。
- ショップにクイックビューボタンを表示します。 各商品画像のすぐ下にある[クイックビュー]ボタンをクリックします。 ボタンのテキストを変更して、ボタンアイコンの表示/非表示を選択することもできます。
- ショップで商品名または画像をクリックしてクイックビューを開きます。 製品の名前または画像をクリックします。
オプションのいずれかまたは両方を有効にすることを選択できます。 デフォルトでは、製品の名前または画像をクリックすると、顧客が単一の製品ページに移動することを覚えておくことも重要です。 [ショップ内の製品名または画像]オプションをクリックして[クイックビューを開く]を有効にすると、このオプションを無効にできます。
ステップ3：ライトボックスに商品画像を表示する（クイックビュー付き）
WooCommerce Quick View Proで提供される優れた機能の1つは、ライトボックスに表示するものを選択できることです。
- 画像中心の製品。 画像中心の商品（衣服、靴、宝飾品など）を販売している場合は、顧客がライトボックス内の商品の画像やギャラリーを画像ズームで表示できるようにする必要があります。
- スペックと詳細を備えた製品。 卸売製品、コンピューターパーツ、または音楽を販売している場合は、ライトボックスに製品の詳細のみを表示することをお勧めします。
- カスタマイズ可能な製品。 カスタマイズ可能な商品やバリエーションのある商品を販売している場合は、商品の画像と詳細の両方をライトボックスに表示する必要があります。
プラグインの設定画面から、クイックビュー表示オプションを見つけて、ライトボックスビューに画像のみ、製品の詳細のみ、または画像と製品の詳細を表示するかどうかを決定します。
たとえば、商品の詳細のみを表示する場合、WooCommerceライトボックスは次のようになります。
また、ライトボックスに画像を表示する場合は、サムネイルまたは箇条書きのいずれかで画像を表示することもできます。 ギャラリーサムネイルスタイルオプションを箇条書きに設定して画像と製品の詳細の両方を表示した場合、WooCommerceライトボックスは次のようになります。
注：商品ギャラリーを表示する場合は、商品の[商品の編集]画面から商品ギャラリーに画像を追加してください。 複数の画像を表示するWooCommerce製品ごとにこれを行うことができます。
ステップ4：表示する製品の詳細を決定する
WooCommerceライトボックスに製品の詳細（または画像と製品の詳細）を表示することを選択した場合は、クイックビューライトボックスに含める製品の詳細を決定するオプションもあります。
プラグインの設定ページから、[製品の詳細]オプションを使用して、ライトボックスに表示される製品の詳細をチェックできます。
- レビュー
- 価格
- 簡単な説明
- カートに追加ボタン
- メタ情報（SKUやカテゴリなど）
たとえば、購入オプションを表示したくない場合は、 [カートに追加]ボタンのチェックボックスをオフのままにします。 WooCommerceライトボックスは次のようになります。
結論
クイックビューを備えたWooCommerceライトボックスにより、顧客は次のことができます。
- 彼らが探している製品の詳細をすばやく見つける
- 商品画像を見る
- バリエーションを選択
- カートに商品を追加する
…最初に単一の製品ページにアクセスする必要はありません。
WooCommerce Quick View Proを使用すると、ユーザーはクイックビュー機能を備えたライトボックスをメインのショップページとカテゴリページに追加できます。 また、ライトボックスのルックアンドフィールと顧客がライトボックスを操作する方法を簡単にカスタマイズできます。
クイックビュー機能を備えたWooCommerceライトボックスが顧客のオンラインショッピング体験を向上させることに同意しますか？ 以下のコメントセクションであなたの考えを共有してください！