4 replies [Last post]
rsrchmonkey's picture
Offline
Joined: 12/26/2007
Juice: 7
Was this information Helpful?

Hi everyone,
I'm new to ubercart, and would like to know how I can replace the 'Add to Cart' button with a graphical button that I've designed.

I'd also like to replace the 'View Cart' and 'Checkout' links with graphical buttons in the shopping cart. Any help would be greatly appreciated.

Thanks.

diegohermes's picture
Offline
Joined: 09/12/2007
Juice: 147
Re: How to modify 'Add to Cart' button?

The best way to do that is using CSS.

Use firebug to see the ids and classes of the objects and theme them as you like.

For the add to cart button, you can do something like that:

.add_to_cart .form-submit, #category-grid-products .form-submit {
       background:transparent url(../images/add_to_cart_button.gif) no-repeat scroll 0% 50%;
       border:medium none;
       cursor:pointer;
       text-indent:-5000px;
       width:78px;
}
rsrchmonkey's picture
Offline
Joined: 12/26/2007
Juice: 7
Thanks diegohermes, I just

Thanks diegohermes,
I just installed firebug and used it to inspect my site. I inspected the 'add to cart' button, but what file(s) do I have to modify in my drupal folder to make the changes you suggested stick? My level of programming is still basic.

diegohermes's picture
Offline
Joined: 09/12/2007
Juice: 147
Re: Thanks diegohermes, I just

You must modify the .css files of your theme, go to the \themes\yourtheme or \sites\all\themes\yourtheme and you will probably find the style.css, there you can put the code i suggest and many others.

I really recomend that you read about CSS, its easy to learn and with that you can custom the layout of your entire site.

rsrchmonkey's picture
Offline
Joined: 12/26/2007
Juice: 7
Re: Re: Thanks diegohermes, I just

Thanks again. It all clicks now, and I was able to change the button appearance. And I will definitely be reading up on CSS.