CSS 商品一覧ページ

Q.商品一覧で並べ替えを非表示にするには?

 

 

記述するCSS

/*商品一覧で並べ替えを非表示*/
div.main.main--product-list section.__control div.__sort-control{display:none;}
     

カスタムCSSの設定は、デザイン > カスタムCSSのヘルプをご参照ください。

 

 

Q.商品一覧の商品画像で売り切れを表現するには?

 

 

記述するCSS

/* 商品一覧でのSOLD OUT表示を有効にする */
.p-product-block ul.__product li.__item.__is-soldout .__photo .__soldout { display: block; }
.main.main--product-list section.__list.__list--row ul.__product li.__item.__is-soldout a table tr td.__photo .__soldout { display: block; }
.p-product-block ul.__product li.__item.__is-soldout .__photo .__soldout:after {  content: '売り切れ' ;font-size: 1.3em; color: #fff;}

デフォルトではSOLD OUTの表記ですが赤字を変更することで文字列の変更が可能です。

     

カスタムCSSの設定は、デザイン > カスタムCSSのヘルプをご参照ください。