[ 解決済 ] ボタンの色について

VWSとは フォーラム Lightning [ 解決済 ] ボタンの色について

[ 解決済 ] ボタンの色について

  • このトピックには3件の返信、2人の参加者があり、最後にgundamにより2週、 2日前に更新されました。
4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #55748

    gundam
    参加者

    Lightning G3
    pro unit
    いずれも最新にしてあります。

    以前Lightning proでwoocommerceでの制作の場合、
    サイトのテーマのボタン色と、woocommerceのボタンの色は違っていました。
    リンク的なボタンと買い物をする的なボタンでの差別化があり良かったのですが
    G3の場合、サイトテーマ的な色のボタンが、woocommerceにも反映されています。
    現状、サイトでは青いボタンで統一、woocommerceの買い物系にボタンはwoocommerceデフォの赤に
    したいのですが
    全てのボタンが青になってしまい、買い物ボタンとの差別化ができていません。

    Lightning proのように分けることは出来ないのでしょうか?
    以上、よろしくお願いいたします。

    #55785

    うなこ
    モデレーター

    Lightning proのように分けることは出来ないのでしょうか?
    以上、よろしくお願いいたします。

    Lightning proの場合はwoocommerceのお買い物カゴに追加のボタンの色は、デザイン設定のキーカラー(暗) の色になっていたと思います。

    Lightningではキーカラー(暗) の項目がなくなりました。
    woocommerceのショップページでは、bodyタグにwoocommerceとクラス名がつきますので、これを利用してcssのカスタマイズで変えることができます。

    例えばCSSはこんな感じです。
    じっくり検証はしておりませんので、変わっていない部分があるかもしれませんが、こんな感じで追加していきます。

    .wc-block-grid__product-add-to-cart .add_to_cart_button.alt, .woocommerce #respond input#submit.alt, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color:#d33030;
    }
    /* hover時 */
    .wc-block-grid__product-add-to-cart .add_to_cart_button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{
    background-color:#d33030;
    }
    
    .woocommerce a.button, .woocommerce a:hover.button, .woocommerce button.button, .woocommerce input.button{
    background-color:#d33030;
    }

    ▼cssのカスタマイズに関しては以下が参考になりますので、よろしければ参考にしてみてください。

    できる!CSSカスタマイズ

    • この返信は2週、 6日前にうなこが編集しました。
    • この返信は2週、 6日前にうなこが編集しました。
    • この返信は2週、 6日前にうなこが編集しました。
    • この返信は2週、 6日前にうなこが編集しました。
    #55843

    gundam
    参加者

    うなこ様
    ありがとうございます。
    お返事遅くなりすみません。
    明日、書き込みを参考にしながら実践してみたいと思います。

    #55928

    gundam
    参加者

    うなこ様
    CSSを追加して、無事woocommerceだけ、ボタン色を変更出来ました。
    ありがとうございます。

    いつもありがとうございます。

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • このトピックに返信するにはログインが必要です。