WooCommerceでクイックビューを追加する方法
公開: 2020-11-24サイトにクイックビュー機能を含めますか？ WooCommerceストアにクイックビューボタンを追加してカスタマイズする方法を学びます。
すべてのWooCommerceショップで、顧客は製品ページで製品に関する詳細情報を見ることができます。 ただし、デフォルトのショップページでは、商品に添付されている説明、バリエーション、その他の情報を確認することはできません。 買い物客がショップページにいるときは、商品の画像またはリンクをクリックして商品ページに移動し、その商品に関する詳細情報を表示する必要があります。 これは、購入プロセスにステップを追加し、顧客が引き続き商品を閲覧したい場合は、ショップページに戻る必要があるため、理想的ではありません。
ただし、 WooCommerceショップページにクイックビューボタンを追加して、ユーザーエクスペリエンスを向上させることができます。 そうすれば、買い物客はショップページを離れることなく製品に関するすべての情報を見ることができます。 クイックボタンビューの機能と、それをストアに追加する方法を詳しく見てみましょう。
クイックビューボタンとは何ですか？
クイックビューボタンを使用すると、顧客はショップページで商品の詳細を確認でき、関心のある各商品の商品ページを開かなくてもかまいません。このようにして、買い物客はショップページから商品をナビゲートして、購入経験。 ユーザーがクイックビューボタンをクリックすると、ポップアップが開き、製品に関連するすべての情報が同じページに表示されます。 ショップページをリロードしたり、ユーザーを別のページにリダイレクトしたりする必要はありません。
WooCommerceショップページにクイックビューボタンを追加する方法
クイックビューボタンをストアに追加する最も簡単な方法は、プラグインを使用することです。 このデモでは、WooCommerceに最適なチェックアウトプラグインの1つであるDirectCheckoutを使用します。 ダイレクトチェックアウトには無料バージョンがありますが、クイックビューボタンを追加するにはプレミアムバージョンが必要です。 わずか19米ドル（1回払い）から始まる3つのプレミアムプランのいずれかを選択できます。
ダイレクトチェックアウトのインストールとアクティブ化
まず、ダイレクトチェックアウトをインストールします。 ここから無料版を入手し、このリンクからプレミアム版の1つを入手する必要があります。 クイックビュー機能のロックを解除するには、プラグインの無料バージョンとプレミアムバージョンの両方をインストールしてアクティブ化する必要があることに注意してください。 両方をインストールしたら、 WooCommerce> Direct Checkout> Archivesに移動し、 Add quickviewボタンオプションをアクティブにします。 
このセクションでは、[カートに追加]ボタンのデフォルトのテキストを置き換えることもできます。 これは、クイックビューボタンの動作にはまったく影響しないことに注意してください。 それでおしまい！ WooCommerceショップページにクイックビューボタンを追加しました。 StoreFrontテーマを使用している場合、ボタンは次のように表示されます。 
クイックビューボタンをクリックすると、モーダルポップアップが表示され、次のようになります。 
すべての製品情報がクイックビューポップアップに表示されることに注意してください。 [カートに追加]ボタンもあり、顧客はポップアップから直接カートに商品を追加できます。 それでは、さらに一歩進んで、CSSを少し使ってクイックビューボタンをカスタマイズする方法を見てみましょう。
WooCommerceクイックビューをカスタマイズする方法
このセクションでは、CSSを少し使用して、クイックビューボタンとクイックビューモーダルポップアップの両方をカスタマイズする方法を学習します。 CSSスクリプトは多くのタスクに非常に役立つため、初心者であっても、CSSの基本的な概念をいくつか学ぶ価値があります。 次に、クイックビューボタンとクイックビューモーダルポップアップの両方のさまざまな要素をカスタマイズする方法を見てみましょう。
子テーマのstyle.cssファイルまたはテーマカスタマイザーの[追加のCSS]ボックスに次のコードを貼り付ける必要があることに注意してください。 子テーマがない場合は、この投稿をチェックして作成するか、これらのプラグインの1つを使用できます。
3.1クイックビューボタンを編集する
クイックビューボタンの幅を変更する
li.product .qlwcdc_quick_view.button{
width: 40%;
}
背景色を編集する
li.product .qlwcdc_quick_view.button{
background: #79b0f7;
}
アイコンの色を編集する
li.product .qlwcdc_quick_view.button{
color:red;
}
丸みを帯びた境界線を追加
li.product .qlwcdc_quick_view.button{
border-radius: 5px;
}
画像をボタンとして使用する
li.product .qlwcdc_quick_view.button{
width:75px;
content:url('https://pbs.twimg.com/profile_images/476389199621275648/G6c2Zoe__400x400.jpeg');
}
アイコンをテキストに置き換えます
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
content: "quick view text";
color:white;
background:black;
padding:10px;
}
ホバー効果を追加
li.product .qlwcdc_quick_view.button:hover{
color:black;
background:yellow;
}
3.2）クイックビューモーダルポップアップを編集する
次に、クイックビューモーダルポップアップをカスタマイズするためのコードをいくつか見てみましょう。
背景色を変更する
#qlwcdc_quick_view_modal>div>div>div.modal-body{
background:greenyellow;
}
製品メタを非表示
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div .summary .product_meta{
display:none;
}
数量を非表示にしてカートに追加
#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{
display:none;
}#qlwcdc_quick_view_modal>div>div>div.modal-body>div>div>div>div.summary>form.cart{のクイックビューボタンのさまざまな側面をカスタマイズするためのさまざまなスクリプトを見てきました。 CSSで何ができるかについてもっと知りたい場合は、このガイドをチェックしてください。
display:none;
}
サンプルCSSスクリプト
WooCommerceのクイックビューに基本的なカスタマイズを追加して行う方法を学習したので、さらに一歩進んでみましょう。 以下に、クイックビューボタンを編集してショップページに少し味を加えるための3つの例を示します。
カスタムアイコン付きの丸ボタン
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
font-family: "Font Awesome 5 Free";
content: "\f002";
color:white;
background:black;
padding: 15px;
border-radius:50%;
}
スタイル付きテキストボタン
li.product .qlwcdc_quick_view.button{
visibility: hidden;
}
li.product .qlwcdc_quick_view.button:before{
visibility: visible;
font-style:normal;
content: "view";
color:black;
background:#eeeeee;
padding:8px 18px;
border:3px solid brown;
border-radius:15px 3px;
}
ボタンとして画像を使用する
li.product > a.button.add_to_cart_button{
bottom:30px;
position:relative;
}
li.product .qlwcdc_quick_view.button{
background:transparent;
width:85px;
content:url('https://icons.iconarchive.com/icons/iynque/flurry-extras-9/512/Quick-Look-Droplet-icon.png');
}
結論
全体として、クイックビューボタンを追加することで、顧客の購入体験を向上させることができます。 見たい商品の商品ページを開かなくても、ショップページで商品の主な詳細を直接見ることができます。 WooCommerceにクイックビューボタンを追加する最も簡単で便利な方法は、DirectCheckoutプラグインを使用することです。 このツールを使用すると、数回クリックするだけでショップページにクイックビューボタンを追加できます。 次に、さらに一歩進んでボタンとポップアップの両方をカスタマイズしたい場合は、CSSを少し使用できます。
ストアにクイックビューボタンを含める他の方法を知っていますか？ ガイドに従って問題が発生しましたか？ 以下のコメントセクションでお知らせください。できる限りサポートさせていただきます。
ストアをカスタマイズする方法の詳細については、次のガイドを確認することをお勧めします。
- WooCommerceショップページをカスタマイズする方法
- WooCommerceの[カートに追加]ボタンをカスタマイズする方法
- WooCommerceチェックアウトページを編集する