こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回は、PCの商品詳細ページでオプション設定時に「表形式」で表示している場合の
「在庫ビジュアル(○△×)表示」をカスタマイズする方法をご紹介します!

こんなお悩みありませんか?

・オプション設定時に在庫ビジュアル(〇△×)表示を記号だけにしたいけどどうやるの?
・在庫ビジュアルの〇△×だけ非表示にすることもできる?

在庫ビジュアル(○△×)表示って?

【商品管理】>【商品の設定】>【在庫管理】

「在庫ビジュアル(○△×)表示機能の設定」で「〇△×」で表示を選択すると
残りの表示を「〇在庫あり」「△残りわずか」「×売り切れ」で表示します。

在庫ビジュアル(○△×)表示機能の設定

表示する場合は、【商品管理】>【商品の設定】>【商品の登録】
「数量」項目を「表示」にチェックを入れておく必要があります!

参考:オンラインマニュアル「在庫ビジュアル(○△×)表示機能の設定」

それでは次で「オプション表形式」の「在庫ビジュアル表示〇△×」表示のカスタマイズ
方法をみていきましょう!

オプション表形式については、オプション表形式って?をご参照ください。

[難易度 ★☆☆ ]
在庫の表示をカスタマイズしよう!

このような表示をカスタマイズしてみます。

オプション表形式の在庫ビジュアル

カスタマイズする場合は

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

に下記のCSSを追記してください。

記号〇△×だけを表示したい!

▼追記CSS

↓↓反映後
記号だけを表示

文字だけを表示したい!

▼追記CSS

↓↓反映後

文字だけを表示したい

・他にも下記のようにそれぞれclass名がついているので、スタイルを指定して表示の調整をすることができます。

 文字「.M_stock-status」、 〇「.M_instock-icon」
 △「.M_smallstock-icon」、 ×「.M_soldout-icon」

・CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記しましょう!

完了!

→できあがり
「ショップをみる」で確認してみましょう!

いかがでしたでしょうか。
CSS例を参考に〇△×を好みのビジュアルにカスタマイズしてみましょう!

それではまた!