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

[gundam]

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

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

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

[うなこ]

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年、 7ヶ月前にうなこが編集しました。
• この返信は2年、 7ヶ月前にうなこが編集しました。
• この返信は2年、 7ヶ月前にうなこが編集しました。
• この返信は2年、 7ヶ月前にうなこが編集しました。

[gundam]

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

[gundam]

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

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

[投稿者]

投稿