「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマEGO.:商品名が長い場合のカートページの表示調整方法

Q.商品名が長いものをカートに入れると単価、金額が2段、3段表記になります。

誠に恐れ入りますが、テーマ側では上記箇所(商品タイトル箇所)について、一定の文字数で省略する仕様となっておらず、例えば、〇字数以降を「…」で表示することなどの実現にはテーマファイルのカスタマイズが必要となってまいります。
 
この記事では、商品名はすべて表示させたまま、CSSの調整方法をご案内いたします。

A.下記の方法でご対応ください。

TCDテーマ>サイト基本設定のカスタムCSSに入力してください。

・EGO. for Welcart
.p-wc-cart-page .p-wc-cart_table .productname { max-width: 300px; }

 
▼変更箇所イメージ ※EGO. for Welcart適用時のイメージ
変更箇所イメージ
▼調整後のイメージ ※カートページの商品名箇所に最大横幅300pxを設定しております。
変更箇所イメージ

・EGO. for WooCommerce
@media screen and (min-width: 769px){
th, .woocommerce table.shop_table td { max-width: 300px; }
}

 
▼変更箇所イメージ ※EGO. for WooCommerce適用時のイメージ
変更箇所イメージ
▼調整後のイメージ ※カートページの商品名箇所に最大横幅300pxを設定しております。
変更箇所イメージ

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事