商品評価ブロックは、シングル商品テンプレートにWooCommerce商品の星評価を表示します。各商品のレビュータブから直接評価データを取得し、訪問者が商品ページを離れることなく、顧客満足度を視覚的に即座に把握できるようにします。
このブロックは、シングル商品テンプレート内での使用に限定されています。使用する前に、WooCommerceがインストールされており、商品レビューが有効になっていることを確認してください。ストアのブランディングに合わせて、星のサイズ、間隔、色をカスタマイズできます。
商品評価ブロックをページに追加する
SeedProdシングル商品テンプレートに商品評価ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグ > 追加情報の下にある商品評価ブロックを、シングル商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品評価ブロックをクリックして設定を開きます。コンテンツタブの星評価セクションで、次のオプションが見つかります。
- 配置：デスクトップ、タブレット、モバイルのデバイスごとのコントロールを使用して、星評価の水平方向の配置（左、中央、右）を設定します。
- サイズ：スライダーを使用して星アイコンのサイズを設定します。
- 間隔：スライダーを使用して、個々の星の間の水平方向の間隔を設定します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、商品評価ブロックの視覚的な外観をカスタマイズできます。
スタイル:
- 星の色：アクティブな（塗りつぶされた）星の塗りつぶし色を設定します。
- 空の星の色：塗りつぶされていない星の色を設定します。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存
商品評価ブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
シングル商品テンプレートに商品評価ブロックを正常に追加しました！星評価は、顧客が自信を持って購入を決定するのに役立つ強力な信頼シグナルです。星の色とサイズをカスタマイズして、評価表示が商品ページのデザインに自然に溶け込むようにしてください。