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

このトピックには3件の返信、2人の参加者があり、最後にgundamにより3年、 2ヶ月前に更新されました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

投稿者

投稿
2021年9月7日 2:16 PM #55748

gundam
参加者

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

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

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

2021年9月8日 9:35 AM #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カスタマイズ
- この返信は3年、 2ヶ月前にうなこが編集しました。
- この返信は3年、 2ヶ月前にうなこが編集しました。
- この返信は3年、 2ヶ月前にうなこが編集しました。
- この返信は3年、 2ヶ月前にうなこが編集しました。
2021年9月9日 1:08 PM #55843

gundam
参加者

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

2021年9月11日 4:18 PM #55928

gundam
参加者

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

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

投稿