Add to cart button

i'm wondering how to change the add to cart button image, it is so small, i would prefer a wide rectangle one if possible, i tried to replace the image file, but it only show a small tall rectangle, can somebody help me please thank you,

You need to change the images button_left.png and button_right.png

Then in the stylesheet, in .button span, you need to change the padding
The default is padding: 4px 12px 5px 5px;

It goes round like a clock, so first is top, then right, bottom and left.

To widen the button you could therefore try padding: 4px 24px 5px 17px;

Hi Chones, glad to hear from you again & thanks for your replied the button i mention are not the one when viewing the product then add to cart, but the one in the Latest Product/Featured, with the (Little Plus Sign at each product's right bottom) +.

Ah, sorry. You need to change the styles for .button_add_small

If you're making it much bigger it might be worth also adding some text in each template too. Instead of Use Hope that helps.

Hi Chones,
It helps You are genius Thank you very much for your help, it fits perfectly what i wanted to much appreciate

Hi Chones, I found this thread and was hoping you could help me as well. I want to take that same tiny little "add to Cart" button, replace it with a much more reasonably sized (and themed) button, and drop it down one line so it is under the product price instead of to the right of the product's price.

Can you point me to the right files and changes for this, other than simply replacing the button?

I also want to replace the Add to Cart button on the detailed product page with a variation on this same button, but as that one seems to be composed of several elements I'm not sure what all needs changing.

Any help will be greatly appreciated!

Hi Sidecutter, the small Add to cart is added using this code You will find it, or something very similar, in the category template, product template, and most of the module templates.
You can change it to a big button by copying one of the other buttons - so basically giving it the class "button" and adding a <span>, like this. Notice I also removed the title, and used it for the text on the button instead.

Hi Chones,

Thank you. What I actually want to do though is substitute an image of my own which already exists, and has the text embedded in it as part of the image, not to have it replicate the large button button which is created on the fly by the cart. I want to use this same button in place of the one the cart generates on the product page. Would it help if I was to do a quick mockup in photoshop?

Hi Sidecutter,

Just edit the .button_add_small style in the stylesheet, and give it enough padding so that it is big enough to show your whole image e.g. padding: 5px 12px 5px 12px;

That should do it.

That doesn't fix the button on the actual product page though, or move the button in the product previews (homepage, category list of products, etc) down under the price...

To move it under the price you'll need to edit the category template, latest_ome template etc. and add a <br /> before the button. Or firstly you could try adding display: block; to the style.

The Add to Cart on the Product page is a different button - it has the class "button" like the search button and the continue button on information pages etc.

If you want to change that, but not all the others, you'll need to give it a new class in the product template, then add your own styles for that class in your stylesheet.