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: 'SOLD OUT' ;font-size: 1.3em; color: #fff;}

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

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

 

 

Q.商品一覧のno image を非表示にするには?

 

 

記述するCSS

/*商品一覧ページ ブロック表示 no image を非表示にする*/
body > div.wrapper.wrapper--column-2.wrapper--product-list > div > div > section.__list.__list--block.p-product-block > ul > li.__item > a > div.__photo.__is-noimage{display:none;}
/*商品一覧ページ リスト表示 no image を非表示にする*/
body > div.wrapper.wrapper--column-2.wrapper--product-list > div > div > section.__list.__list--row > ul > li.__item > a > table > tbody > tr > td.__photo.__is-noimage{display:none;}

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