こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
今回は商品詳細ページで、表示したくない商品情報があった場合に
そこだけを非表示にする方法をご紹介したいと思います！
こんなお悩みありませんか？
・商品詳細ページの商品情報で見せたくない項目がある…
商品情報を表示するタグについて
まずは、タグのおさらいです。商品詳細ページの商品情報は、2通り表示する方法があります。
【1】それぞれの商品情報タグを使って、個別に表示する方法
→表示したい項目のタグを自由に配置してデザインすることができます。
【2】商品情報をまとめて表示する[INFO]タグを使って表示する方法
→かんたんに商品情報を一括で表示することができます。
ただ、情報の内容や順番は固定で表示されるので、細かく設定したいショップには不向きかもしれません。
商品詳細ページに見せたくない商品情報があった場合はどうするの？
【1】の「それぞれの商品情報タグを使っている」場合は、見せたくない項目のタグだけを削除すればOKです。
タグの書き方に自信がない場合や、もともと[INFO]タグを使っている場合は
[INFO]タグを使いつつ、見せたくない情報だけを非表示にする方法を一緒に見ていきましょう。
[INFO]タグの表示について
その前に、[INFO]タグをかくとどのように情報が表示されるか、改めて見てみましょう。
【ショップデザイン（PC）】>【内部ページ編集I】>【商品詳細画面管理】へ
|
1 |
[INFO] |
を追記すると下記のように商品情報が一括で表示されます。
・他にもオプショングループ、セール期間、割引率など、登録している場合は設定している項目が表示されます。
・商品情報の登録は、「商品の登録」で設定できます。
参考：オンラインマニュアル「商品の登録」
・【独自商品コード】は、「基本デザイン設定」で表示可否を設定できます。
参考：オンラインマニュアル「基本デザイン設定」
[難易度 ★☆☆ ]
商品詳細ページで見せたくない商品の情報を非表示する方法
[INFO]タグを使っている場合
解決方法
[INFO]タグで出力される項目には、それぞれクラス名がついているので、CSSで非表示にすることができます。
表示したくない項目のCSSを参考に追記しましょう。
CSSを追加！
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
下記のスタイル指定を追記してください。
▼製造元を非表示にする
|
1 2 3 |
.M_production{ display:none; } |
▼定価（希望小売価格）を非表示にする
|
1 2 3 |
.M_consumer-price{ display:none; } |
▼商品別特殊表示を非表示にする
|
1 2 3 |
.M_addcode{ display:none; } |
▼ポイントを非表示にする
|
1 2 3 |
.M_point-wrap{ display:none; } |
▼数量欄を非表示にする
|
1 2 3 |
.M_quantity-wrap{ display:none; } |
・表示を調整したい場合にも上記のクラス名を参考に変更することができます。
・記載されていない項目のクラス名の確認方法は、下記の記事をご参照ください。
完了！
いかがでしたでしょうか。
購入者が知りたい情報を見やすく、ショップにあった表示にカスタマイズしてみましょう。
それではまた！
