「カートに入れる」ボタンを”売れるボタン”に変えるには

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
カートに入れるボタン

 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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

生まれ年ワインショップ

生まれ年ワインの魅力は何といっても、生きていた時間を飲むということです。自分と同じ年数を生きている飲食物なんて考えられますか?
大切な方の特別な記念日に、忘れられない生まれ年ワインを贈りませんか?

『生まれ年ワインショップ』へ

SNSでもご購読できます。

コメントを残す

*

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください