WoodMartによる製品クイックビューポップアップ

クイックビュー機能により、購入者は別ページにジャンプすることなく、商品一覧ページで直接商品詳細を確認することができます。WoodMartには、追加のプラグインをインストールすることなく、この機能が搭載されており、設定も非常に簡単で、以下のような場合に適しています。Eコマースサイト商品閲覧の効率化

クイックビューの有効化

Backstage → WoodMart → Theme Settings → Shop をクリックします。

クイックビュー "オプションを見つけ、"有効 "にチェックを入れる。

また、クイックビューのポップアップの表示方法を調整することもできます：

• レイアウトスタイル：水平表示（左画像、右テキスト）または垂直表示（上部と下部）
• 表示情報：商品説明、価格、バリエーション選択、評価、在庫状況など。
• 画像スタイル：サムネイルの回転を有効にするかどうか

調整が完了したら「保存」をクリックし、ページを更新すると反映されます。

製品リストで エレメンタ もしかしたら WPベーカリー ビルドでは、ボタンも同様に自動的に統合され、個別のアクションは必要ない。

ボタンのスタイルとテキストを変更する

テーマ設定 → スタイルと色 → ボタン

下にスクロールして追加ルールを見つけ、クイックビューをカートに追加を選択します：

• ボタンの色、ボーダー、フォントサイズを変更できます。
• ボタンのテキストを変更する。例えば、「クイックビュー」を「クリックしてプレビュー」や「商品詳細」に変更する。
• カスタムアイコンのアップロードやアイコンフォント（Font Awesomeなど）の使用をサポート。

Elementor Loop Builderを使用して商品リストをカスタマイズする場合は、ボタンのクラス名を統一することをお勧めします。 クイックビューボタンそして テーマのカスタムCSSまたはElementorのカスタムCSS 例えば、統一されたスタイルで：

クイックビューボタン
  background-colour: #111；
  color: #fff；
  
  border-radius: 4px; }.
}

モバイル表示の最適化

ウッドマートは、クイックビューのポップアップウィンドウをレスポンシブ適応すると、モバイルはフルスクリーンで表示されます。

これはカスタムCSSでさらに最適化できる：

.クイックビューポップアップ .商品概要 { {.
  font-size: 16px；
}
media(max-width:768px){
  .quick-view-popup .product-image-gallery { { {.quick-view-popup.商品画像ギャラリー
    display: none; /* 画像ギャラリーを非表示にして読み込みを高速化 */
  }
}

さらにモバイルメイン画像、価格、購入ボタンなどの主要情報のみを残し、邪魔なコンテンツを減らすことをお勧めします。読み込み速度の向上.

ファスト・トラック・アプローチ

• ポップアップが表示されない：有効になっているか確認キャッシュプラグインテストしたい場合は、キャッシュをクリアしてからもう一度テストしてください。
• スタイルが正しくない：CSSがカスタマイズされているか、テーマが最新かどうかを確認する。
• variant loading failure: variant の設定が完全で、属性や画像の欠落がないことを確認してください。

短い

ウッドマート クイックビュー機能は、プラグインをインストールする必要がなく、設定インターフェースとスタイルコントロールが付属しており、商品一覧ページのインタラクティブ性を素早く向上させることができます。優れたスタイルとモバイル最適化によって、コンバージョン効率をさらに向上させることもできます。購入者が閲覧や比較、注文をしやすくするために、すべての商品でこの機能を有効にすることをお勧めします。

最近の更新

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み