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

　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