WelcartBasicの「カートに入れる」ボタンは、オレンジ色の四角いボタンです。(↓こんな感じ)
『生まれ年ワインショップ』では、これを緑で四隅を丸くして、サイズも少し大きくしたい!と思いました。
目次
売れる「カートに入れる」ボタンとは
よく耳にする「カートに入れる」ボタンの売れる法則は
- ボタンを大きく
- 「購入」などの直接的でプレッシャーを与える文字でなく、「カートに入れる」という文字に
- 赤は確かに目立つが購入率が良いのは緑のボタン
などです。
プレゼントワインショップでも、上記は実践していています。実際にA/Bテストを前頁で行ったわけではないですが、ボタンの文字については1つのページでのA/Bテストでは「カートに入れる」のほうが良いコンバージョン率でした。
「カートに入れる」ボタンのデザイン変更
ということで、このボタンのデザインされているファイルを探してみます。
カート用のCSSファイル
すると、usces_cart.cssファルに記載があるのをみつけました。真ん中より少し上の
/*---- cart-btn ---*/
.item-info .skubutton {
color: #fff;
font-family: FontAwesome;
font-weight: bold;
padding: .714286em 2.142856em;
background-color: #ff8c00;
border: none;
letter-spacing: 1px;
text-align: center;
-webkit-transition: .3s ease all;
-moz-transition: .3s ease all;
-o-transition: .3s ease all;
transition: .3s ease all;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
の部分のようです。
早速、子テーマ内にusces_cart.cssを作成し、次のコードを記載します。
/*---- cart-btn(「カートへ入れる」の色変更) ---*/
.item-info .skubutton {
font-size: 150%;
padding: .714286em 2.142856em;
padding: 1.014286em 2.142856em;
background-color: #080;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
角の丸みや色は、何度か調整して、上のように落ち着きました。
PCでマウスカーソルを載せた時に変わる色がオレンジ系のままなので、これも変えておきます。
.item-info .skubutton:hover {
background-color: #32cd32;
}
バッチリ変わりました!
カートで進んだ先のボタンもデザインを変える
おっと・・・カートに入れた後の「次へ」ボタンがオレンジのままです。なので、同じくusces_cart.cssに
/*----send( カート内で「次へ」ボタンの色変更) ---*/
.send input.to_customerinfo_button,
.send input.to_memberlogin_button,
.send input.to_deliveryinfo_button,
.send input.to_confirm_button,
.send input#purchase_button {
color: #fff;
background-color: #080;
}
.send input.to_customerinfo_button:hover,
.send input.to_memberlogin_button:hover,
.send input.to_deliveryinfo_button:hover,
.send input.to_confirm_button:hover,
.send input#purchase_button:hover {
background-color: #32cd32;
}
と
/*----send( カート内で「会員登録しながら次へ」ボタンの色変更) ---*/
#wc_customer .send input.to_reganddeliveryinfo_button {
color: #fff;
margin-top: .714286em;
background-color: #080;
}
#wc_customer .send input.to_reganddeliveryinfo_button:hover {
background-color: #32cd32;
}
を追加。
今度こそ、バッチリです。背景色は#32cd32の部分をお好きな色に、角の丸みはborder-radiusの部分をお好きなように変えて、お使い下さい。
お願い
検索でここにたどり着いた方は、自営業者さんでWelcartを導入しようと思っている方だと思います。役に立った方は、ビジネスでの贈り物に当店「生まれ年ワインショップ」もしくは、日本初のプレゼント専門ワインショップ「プレゼントワインショップ」をご利用いただけると嬉しいですm(__)m