Here is how I changed my standard “out of the box” Magento Add to Cart button on the Product Details page from a form button to an image button.
To preface, I am on version 22.214.171.124.
Assuming that you are using the Default theme, the code you will need to modify is located here:
Search for this code in addtocart.phtml (As long as your version has the code below, it should work.):
<button type="button" class="form-button" onclick="productAddToCartForm.submit()"><span><?php echo $this->__('Add to Cart') ?></span></button>
If you want to use an image, change to this code:
<input type="image" src="<?php echo $this->getSkinUrl('images/addtocart.gif') ?>” onclick="productAddToCartForm.submit(); return false;"></button>
1. You must add your addtocart.gif to skin/frontend/default/default/images
2. This will only change the add to cart button from form to image on the Product Details page, not the list, or grid view category pages.
3. The “return false” part of my replacement code was contributed by another. It is necessary! If you do not add the return false part of the code the add to cart button will add two (2) items to the cart (at least in I.E.)
Hope this helps! I couldn’t find a post that made this so clear, so I thought I’d share. Let me know if this helped you. Thanks!
Click thumbnail to see full-size image