Woocommerceのバリエーション表示のtable属性をカスタマイズして見やすくしたい

0
いいねをした人: 居ません

タグ: , , , , ,

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #96077
    西澤颯
    参加者
    9

    【お使いの Snow Monkey のバージョン】 15.18.1
    【お使いの Snow Monkey Blocks のバージョン】13.7.3
    【お使いの Snow Monkey Editor のバージョン】6.2.1
    【お使いのブラウザ】Google Chrome
    【当該サイトのURL】https://balloon-deko.com

    ### 実現したいこと
    いつもありがとうございます。

    Woocommerceのバリエーション表示のtable属性をカスタマイズして見やすくしたいです。

    https://balloon-deko.com/product/balloon-box-color/

    こちらの商品なのですが、色のカスタマイズを細かくできるようにするために
    バリエーションを増やしたのですが、
    そうするとtableが醜くなってしまって…。

    https://balloon-deko.com/product/%e3%83%90%e3%83%ab%e3%83%bc%e3%83%b3%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9/

    こんな感じでシンプルに見やすくしたいのですが、
    教えていただいてもよろしいでしょうか…?

    何卒よろしくお願いいたします。

    0
    いいねをした人: 居ません
    #96084
    GONSY
    参加者
    495

    こんにちは。

    これはCSSのみで実現できると思います。

    table.variations th.label, table.variations td.value {
    	width: 100%;
    	display: block;
    	text-align: left;
    }

    この場合は以下のようになります。

     

    .product form.cart .variations select {
    	max-width: 145px;
    	/* selectの幅を任意の数値で指定 */
    }
    table.variations th.label {
    	text-align: left;
    }

    この場合は以下のようになります。

     
    見やすいのは前者でしょうか。
    CSS table レスポンシブ」などでGoogle検索すると、参考になる記事がたくさん出てくると思います。
    お試しくださいませ。

    2
    いいねをした人:
    #96100
    西澤颯
    参加者
    9

    できました!
    CSSで解決できるんだろうな…。
    と思いつつもこのコードが分からなかったので
    とても助かりました。

    できるだけ自分で解決できるように頑張っていきます👍

    0
    いいねをした人: 居ません
    #96151
    キタジマ タカシ
    参加者
    1386

    @西澤さん
    解決済みの場合はトピックを閉じていただけると助かります!

    1
    いいねをした人:
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • トピック「Woocommerceのバリエーション表示のtable属性をカスタマイズして見やすくしたい」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ