How to change my "add to cart" button to an image?

[C.Perez]

Hi I hope someone here can help me.. My site is almost done http://www.phototrendi.com/5-estudio-iluminacion, but this is the only problem i dont know how to solve, I want to replace the "añadir al carrito" (add to cart), for a gif image i made... So to my very basic skills I think need to change this code, on my global.css

}
input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large {
   background-color: #87C504;
   color: #FFFFFF !important;
}

 

So I can be able to add a gif.. instead of that green block.

 

If i do this

}
input.exclusive_mini, input.exclusive_small, input.exclusive, input.exclusive_large, input.exclusive_mini_disabled, input.exclusive_small_disabled, input.exclusive_disabled, input.exclusive_large_disabled, a.exclusive_mini, a.exclusive_small, a.exclusive, a.exclusive_large, span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large {
   background: url('../img/agregar_carrito.png'));
   color: #FFFFFF !important;
   height:#43px
   width:182px
}

 

The image, does show but isn't the size of the image I made, and also the "pagar" (checkout) it gets replaced, but the text is still on top...

 

So I only want to be able to replace the "añadir al carrito" with an image I made, and also the "pagar"

 

As you may notice my knowledge doing this mods is very limited.. I really appreciate any help..

 

Thanks.

[cocothecat]

So have you made an image with the text already on it? I don't under stand the line

 

"The image, does show but isn't the size of the image I made, and also the "pagar" (checkout) it gets replaced, but the text is still on top..."

 

If you have your image but the text displays ontop you need to go into the .tpl and remove the code 'add to cart' and replace with ' ' although this should work within the admin also...

[C.Perez]

nevermind.. I just drop the idea.. cuz changing that button is beyond my skils.. because if i display the image in "add to cart" also on the checkout button is replaced.. And I dont know how to make a new rule or property lol... What i will like a lot is to add on top of my actual button, some icon...but again I don't know how to insert a new image on my theme, take a look at my site www.phototrendi.com , I'm almost done. only estudio e illuminacion (category) has products right now..

Edited June 10, 2012 by C.Perez (see edit history)

[cocothecat]

Well the button just looks like a bit of css so if you wanted the same button throught you just need to make a plain button and the store will add the text for you. You can change the text simply through the translastion page in the admin for the front office just rename all the 'add to cart'

 

If you want a static image then open up your product.tpl and shopping-cart.tpl (i think thats what its called) you need to search for the bit of code that uses this class:

 

class="exclusive ajax_add_to_cart_button"

 

then rename this class to something like:

 

add_to_cart_button_product

 

for all your product pages

 

and

 

then find

 

class="exclusive ajax"

 

for all your checkout buttons and renmae that to something like "checkout_button"

 

create both styles in the css and save. That should allow you to run two different buttons

 

The reason its bringing in the same version is because your editing the global exclusive class that controlls all the buttons on the site. I hope that helps