製品評価ブロックは、WooCommerce製品の星評価を単一製品テンプレートに表示します。各製品の「レビュー」タブから直接評価データを取得するため、訪問者は製品ページを離れることなく顧客満足度を即座に視覚的に確認できます。
このブロックは、単一商品テンプレート内での使用を目的として設計されています。ご使用前に、WooCommerceがインストールされ、商品レビュー機能が有効になっていることを確認してください。星のサイズ、間隔、色をカスタマイズして、ストアのブランディングに合わせて調整できます。
ページに商品評価ブロックを追加する
SeedProdの単一商品テンプレートに商品評価ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン ＞ ブロック ＞ WooCommerce テンプレートタグ ＞ 追加情報 の下で、商品評価ブロックを商品詳細ページのテンプレートの任意のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、商品評価ブロックをクリックして設定を開きます。コンテンツタブの星評価セクションには、以下のオプションが表示されます：
- 配置:星評価の水平方向の配置を設定します — 左、中央、または右 — デスクトップ、タブレット、モバイルごとに個別に制御できます。
- サイズ:スライダーを使用して星アイコンのサイズを設定します。
- スペースの間隔：スライダーを使用して個々の星の間の水平方向の間隔を設定します。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、製品評価ブロックの外観をカスタマイズできます。
スタイル:
- 星の色：アクティブな（塗りつぶされた）星の塗りつぶし色を設定します。
- 空の星の色：塗りつぶされていない星の色を設定します。
スペース:
- 余白：ブロックの周囲の四辺の外側の間隔を設定します。デスクトップ、タブレット、モバイルそれぞれで独立して制御できます。
- パディング：ブロックラッパー内の四辺すべてに内側の間隔を設定し、デバイスごとの制御を行います。
属性：
- カスタムクラス:ブロックラッパーに1つ以上のカスタムCSSクラスを追加し、対象を絞ったスタイル設定を行います。
- CSS ID:SeedProdはこのブロックに対して一意のCSS IDを自動生成します。カスタムCSSやJavaScriptでブロックを参照する際に使用できます。
- カスタム属性:ブロックラッパー要素にカスタムHTML属性を追加します。各属性をキー|値形式で改行して入力してください。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で表示した際にブロックを非表示にするか切り替えます。
- タブレットで非表示:タブレット画面で表示時にブロックを非表示にするか切り替えます。
- モバイルで非表示:モバイル画面で表示される際にこのブロックを非表示にするか切り替えます。
アニメーション効果：
- スクロール効果：ブロックにスクロール連動アニメーションを適用します。垂直スクロールと水平スクロールのオプションを含み、方向、速度、ビューポートオフセットを制御できます。
- マウス効果：ブロックにマウスの動きに基づく視差効果を適用します。
ステップ4: 変更を保存する
製品評価ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
商品評価ブロックを商品詳細ページのテンプレートに追加できました！星評価は顧客が自信を持って購入判断を下すための強力な信頼の証です。星の色やサイズをカスタマイズして、評価表示が商品ページデザインに自然に溶け込むように調整しましょう。