Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Change Add to Cart Button to an Image
 
walltoolsllc
Sr. Member
 
Total Posts:  146
Joined:  2008-08-21
 

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 1.3.2.4.

Assuming that you are using the Default theme, the code you will need to modify is located here:

app/design/frontend/default/default/template/catalog/product/view/addtocart.phtml

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>

Notes:

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!

Image Attachments
addtocart-preview.gif
 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

Hi constructaid
thank you for your tips

My button works without the tag </button> at the end!

<input type="image" src="/shop/images/addtocart.png" onclick="productAddToCartForm.submit(); return false;">

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

To put also the button in list and grid mode it is necessary edit this file:

MAGENTO-FOLDER/app/design/frontend/YOUR-THEME/default/template/catalog/product/list.phtml

search

<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')"><span><?php echo $this->__('Add to Cart'?></span></button>

and replace

<input type="image" src="<?php echo $this->getSkinUrl('images/addtocart.gif') ?>” onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')">

2 times, because this string is specified for list and grid mode

 
Magento Community Magento Community
Magento Community
Magento Community
 
moobaa
Sr. Member
 
Total Posts:  171
Joined:  2009-10-05
 

Nice, thanks!

Can you give me some info about the “share” box you’ve got there as well…

Cheers,
Todd

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 
moobaa - 23 May 2010 07:09 PM

Nice, thanks!

Can you give me some info about the “share” box you’ve got there as well…

Cheers,
Todd

Hi Todd
I used a free extension
http://www.magentocommerce.com/magento-connect/_Fluxe/extension/2333/magento-social-bookmarking

 
Magento Community Magento Community
Magento Community
Magento Community
 
78racing
Jr. Member
 
Avatar
Total Posts:  10
Joined:  2010-06-09
 

Tried the codes above and could not get them to work, mainly could not add item to cart, got an error. Here is the code that I used in Magento 1.4.1

File Location - app/design/frontend/base/default/template/catalog/product/list.phtml

Find and Change this line(code is in there two times);

<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>” class="button btn-cart” onclick="setLocation(’<?php echo $this->getAddToCartUrl($_product) ?>’)"><span><span><?php echo $this->__('Add to Cart') ?></span></span></button></p>

Change to This;
<input type="image" src="http://www.yourdomainname.com/skin/frontend/default/default/images/addtocart.jpg" onclick="setLocation(’<?php echo $this->getAddToCartUrl($_product) ?>’)">

Hope this helps someone, also I could not get it to work without the complete image url

 
Magento Community Magento Community
Magento Community
Magento Community
 
jfk2002
Jr. Member
 
Total Posts:  5
Joined:  2011-02-04
 

---

 
Magento Community Magento Community
Magento Community
Magento Community
 
suziebou
Jr. Member
 
Avatar
Total Posts:  23
Joined:  2009-10-11
UK
 

I too have Magento 1.4.1.1 and the code above works great on the product page but fails to work on list.phtml or any category page with more than one product.

Does anyone know how to get this to work on list.phtml?

Many thanks,

 
Magento Community Magento Community
Magento Community
Magento Community
 
zenmastar
Jr. Member
 
Total Posts:  6
Joined:  2013-04-05
 

ADD HOVER EFFECT TO THIS ADD TO CART BUTTON

For ppl who want to add a hover effect for this add to cart button, this is the code i used on addtocart.phtml

<input type="image" onmouseout="this.src='http://TEST.com/skin/frontend/default/theme445/images/product_addtocart.gif'" onmouseover="this.src='http://TEST.com/skin/frontend/default/theme445/images/product_addtocart_hover.gif'" src="http://TEST.com/skin/frontend/default/theme445/images/product_addtocart.gif" onclick="productAddToCartForm.submit(); return false;">

Hope this work for you!

UPDATE: CHECK MY POST BELOW TO SEE HOW I ALIGN THE ADD TO CART BUTTON TO WHERE I WANTED IT

Image Attachments
HOVER_ADD_TO_CART.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
zenmastar
Jr. Member
 
Total Posts:  6
Joined:  2013-04-05
 

FOR ALIGMENT FOR ADD TO CART BUTTON

ALIGNMENT FOR ADD TO CART BUTTON
1. Open firefox and use Firebug to highlight the Add to Cart button to locate the code(check below image to see example)
2.  Open style.css with Notepad++
3.  Go to the bottom of the style.css
4.  Insert code

.add-to-cart .qty-block {
     margin
-right174px;
}

5.  Just adjust the px until you have it where you want it.  For me it was margin-right 174px; (Depending on your website use different margin CSS to adjust your position)

Image Attachments
FIREBUG_LOCATE_CODE.jpg
 
Magento Community Magento Community
Magento Community
Magento Community
 
baby_in_magento
Member
 
Total Posts:  57
Joined:  2013-10-02
 

Hi,

I am using 1.7 version .

Please check this link “http://www.linbide.co.nz/product.php?p=1”,

Under the buy column, there is a image if we click the image “ products are adding to shopping cart”.

Can anyone give me the phtml code for an image, so if i click on image, it must add the products to the shopping cart.

Thanks in Advance.

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top