Usability - More attention to checkout buttons

Contrib type: 
Code/CSS Snippet
Status: 
Initial upload
Moderation: 
Not ready for moderation

Downloads

Compatibility: 
Ubercart 1.x

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

  1. Find a product
  2. Add the pruduct(s) to the cart
  3. 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?

  1. Add the code snippet above to the end of the "style.css" of your theme in use
  2. 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)

PreviewAttachmentSize
bgrad_hover.pngbgrad_hover.png242 bytes
bgrad.pngbgrad.png249 bytes
screenshot-checkout-button.pngscreenshot-checkout-button.png3.62 KB
kulvik's picture
Offline
Uber DonorBug FinderEarly adopter... addicted to alphas.Cool profile pic award.Internationalizationizer
Joined: 08/14/2007
Juice: 336
Nice We've done something

Nice Smiling 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 Smiling

Best regards,
Thomas Kulvik

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

Abilnet's picture
Offline
Uber DonorBug Finder
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.

primo411's picture
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;
}

Abilnet's picture
Offline
Uber DonorBug Finder
Joined: 12/28/2007
Juice: 718
Re: Re: Re: Nice We've done something

Thanks primo411, appreciated!

Ryan's picture
Offline
Joined: 08/07/2007
Juice: 15453
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.

primo411's picture
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.

fivestars's picture
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

Summit_drupal's picture
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

Anand yrh's picture
Offline
Joined: 03/06/2009
Juice: 316
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