Usability - More attention to checkout buttons

Submitted by Abilnet on Thu, 03/27/2008 - 06:41

Contrib type:

Code/CSS Snippet

Status:

Initial upload

Moderation:

Not ready for moderation

Downloads

Compatibility:

Ubercart 1.x

View all releases

From business point of view, shopkeepers basically want their clients to:

Find a product
Add the pruduct(s) to the cart
Proceed to checkout and pay

What I was missing in the Ubercart / Drupal "out of the box" installation, was more attention to the selected "Add to cart" and "Checkout" -buttons. I found some carts, including the big boys, had already succeed in this by using beautiful orange colored buttons to get their clients to focus their attention to shopping, not just browsing. That's good for the business.

From customer point of view the motive of this button styling is to help clients to focus on easy shopping and to show them an easy path to actually pay the products.

A solution

After the help of many great guys here in Ubercart community, we finally ended up to a code snippet and background images by t3R0 to reach the goal:

#edit-checkout, #edit-continue,
div.add_to_cart input[type=submit],
input#edit-checkout,
#uc-paypal-wps-form #edit-submit {
color: #fff;
background: #7E0303 url('bgrad.png') repeat-x top center;
border: 1px solid #ff2400;
font-weight: bold;
cursor: pointer;
}
#edit-checkout:hover, #edit-continue:hover,
div.add_to_cart input[type=submit]:hover,
input#edit-checkout:hover,
#uc-paypal-wps-form #edit-submit:hover {
background: #7E0303 url('bgrad_hover.png') repeat-x top center;
}

How to use this snippet?

Add the code snippet above to the end of the "style.css" of your theme in use
Copy the attached "bgrad.png" and "bgrad_hover.png" -files to the same directory of your style.css

Hopefully this is useful for some of you guys, enjoy.

PS. Some background discussion here and here.
PS. This snippet has been reported working well with FireFox2, Galeon2, MSIE7 and Opera 9 (with MSIE6 I'm not sure but if someone has a fix, appreciated!)

EDIT: removed link to "demo-site" (not relevant any more)

Preview	Attachment	Size
	bgrad_hover.png	242 bytes
	bgrad.png	249 bytes
	screenshot-checkout-button.png	3.62 KB

Thu, 03/27/2008 - 07:25

#1 View page

kulvik

Offline

Joined: 08/14/2007

Juice: 336

Nice We've done something

Nice We've done something similar on a couple of our sites. This looks like a good solution and it's always good that you guys take the time to post it here and make it avalable to everyone

Best regards,
Thomas Kulvik

Ny Media AS
www.nymedia.no
+47 4000 7955

Fri, 03/28/2008 - 14:28

#2 View page

Abilnet

Offline

Joined: 12/28/2007

Juice: 718

Re: Nice We've done something

Thanks Thomas, I believe some of your nice sites, can't remember which one, was actually one of the first Drupal / Ubercart sites where I saw nice buttons first time.

Sun, 08/24/2008 - 12:50

#3 View page

primo411

Offline

Joined: 07/22/2008

Juice: 23

Re: Re: Nice We've done something

Really nice ! I took it for my whole site. I had to make a little modifications to make it render well in IE:

input[type="submit"]{
	color: #fff;
	background: #F7931D url('images/bgrad.png') repeat-x top center;
	border: 1px solid #F7931D;
	/*border: none;*/
	font-weight: bold;
	cursor: pointer;
}
input[type="submit"]:hover{
	background: #F7931D url('images/bgrad_hover.png') repeat-x top center;
}

Sun, 08/24/2008 - 14:18

#4 View page

Abilnet

Offline

Joined: 12/28/2007

Juice: 718

Re: Re: Re: Nice We've done something

Thanks primo411, appreciated!

Tue, 09/02/2008 - 09:47

#5 View page

Ryan

Offline

Joined: 08/07/2007

Juice: 15450

Re: Re: Re: Re: Nice We've done something

Was the core file updated to include that modification? Also, is there anything that can be done to have the "highlighted" image load when the page loads? Right now when I first hover I get a default red color until the hover graphic loads for display.

Tue, 09/02/2008 - 10:26

#6 View page

primo411

Offline

Joined: 07/22/2008

Juice: 23

Re: Re: Re: Re: Re: Nice We've done something

Yes, you have tu use a well known technique: you just one image, in which you have at top the button and at bottom the mouse-over button. In your CSS, you just set up the background position to go up when the mouse is over, this way you have exactly the same result and the both images are loaded.

Thu, 05/06/2010 - 20:23

#7 View page

fivestars

Offline

Joined: 03/22/2010

Juice: 31

thanks and typo found

Hey,
Thanks for the great bit of css (which i'm no good at so this kind of stuff is fantastic)! I find it's still valuable after a year and half, and for D6/UC2! after much pondering and gnashing of teeth and pulling of hair and silly looks (I mentioned that I was no good at css?) as to why this worked on the Product, Cart, and Checkout pages, but *not* on the Review Order (where the final and most important Submit button is)

I think there's a typo, a missing comma between
#uc-paypal-wps-form #edit-submit
and
#uc-paypal-wps-form #edit-submit:hover

I think it should be:

#edit-checkout, #edit-continue,div.add_to_cart input[type=submit],input#edit-checkout,#uc-paypal-wps-form, #edit-submit {color: #fff;background: #7E0303 url('bgrad.png') repeat-x top center;border: 1px solid #ff2400;font-weight: bold;cursor: pointer;}#edit-checkout:hover, #edit-continue:hover,div.add_to_cart input[type=submit]:hover,input#edit-checkout:hover, #uc-paypal-wps-form, #edit-submit:hover {background: #7E0303 url('bgrad_hover.png') repeat-x top center; }

hope this saves some other newbie a bit of gnashing and pulling. thanks again!

Paul

Sat, 02/05/2011 - 05:46

#8 View page

Summit_drupal

Offline

Joined: 12/11/2010

Juice: 137

Have it working, would like larger lettertype and bigger button?

Hi,
I have the latest code working, and it is great!
Anyone has also great css to theme the other buttons?
I tried changing above css. How to get the buttons also changed related to:
#edit-update
#edit-cancel
#edit-back
#edit-submit-button

Can anyone help me please?

Right now my code is:

#edit-checkout, 
#edit-continue,div.add_to_cart input[type=submit],input
#edit-checkout,#uc-paypal-wps-form, #edit-submit {color: 
#fff;background: #7E0303 url('bgrad.png') repeat-x top center;border: 1px solid 
#ff2400;font-weight: bold;cursor: pointer;}#edit-checkout:hover, 
#edit-continue:hover,div.add_to_cart input[type=submit]:hover,input#edit-checkout:hover, 
#uc-paypal-wps-form, 
#edit-submit:hover {background: #000000 url('bgrad_hover.png') repeat-x top center; }

Thanks a lot in advance for your reply!

EDIT: I got it working, by just adding them to the code:

#edit-checkout, #edit-update, #edit-cancel, #edit-back, #edit-submit-button,
#edit-continue,div.add_to_cart input[type=submit],input
#edit-checkout,#uc-paypal-wps-form, #edit-submit {color: 
#fff; height:25px; background: #7E0303 url('bgrad.png')  repeat-x top center;border: 1px solid 
#ff2400;font-weight: bold;cursor: pointer;}
#edit-checkout:hover, #edit-update:hover, #edit-cancel:hover, #edit-back:hover, #edit-submit-button:hover,
#edit-continue:hover,div.add_to_cart input[type=submit]:hover,input#edit-checkout:hover, 
#uc-paypal-wps-form, 
#edit-submit:hover {height:25px; background: #000000 url('bgrad_hover.png') repeat-x top center; }

It is working!
Greetings,
Martijn

Wed, 05/23/2012 - 08:22

#9 View page

Anand yrh

Offline

Joined: 03/06/2009

Juice: 315

Re: Usability - More attention to checkout buttons

For my site it works with:

#update-checkout-buttons #edit-checkout{
    background: url('images/checkout-button.gif') no-repeat scroll 0 0 #FFFFFF;
    margin-left: 5px;
    padding: 5px 20px;
    color:transparent;
}

Just add all the parent and child IDs separated by commas.

Thanks,
AnAnD | www.myclicksstory.com

	User login
	Log in using OpenID: What is OpenID? Username or e-mail: * Password: * Remember me Log in using OpenID Cancel OpenID login Create new account Request new password

Ubercart

Usability - More attention to checkout buttons

Downloads

Navigation

User login