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

How do I change the add to cart CSS button for an image add to cart button? 
 
pepipe
Jr. Member
 
Total Posts:  7
Joined:  2008-07-04
 

I search around the forum and see many having problems with this.

I find a way to do this, don’t know if the best way but it works. I found 3 places where this button appears: The product page (when you click a product), the category product listing pages and in the cart page (cross shell products).

1 - edit the product page: app\design\frontend\default\default\template\catalog\product\view\addtocart.phtml:

search for:

<button class="form-button" onclick="productAddToCartForm.submit()"><span><?php echo $this->__('Add to Cart'?></span></button>
within the <span> put
<img src="<?php echo $this->getSkinURL('button address within skin folder')?>" />

2 - edit listing page: app\design\frontend\default\default\template\catalog\product\list.phtml

again search for:

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

3 - edit the cart page: app\design\frontend\default\default\template\checkout\cart\crosssell.phtml

search:

<button class="form-button" onclick="setLocation('<?php echo $this->getAddToCartUrl($_item) ?>')" type="button"><span><?php echo $this->__('Add to Cart'?></span></button>
and do the same thing.

Now we got a problem, our buttons still got the CSS styles so we have to create other CSS class:
change class="form-button" to your class name.
Note: If you don’t see the link cursor put in your CSS class

cursor:pointer;

And voilá it’s done.

If anyone knows a better way please teach smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
Leo27
Sr. Member
 
Total Posts:  127
Joined:  2008-10-08
 

Hello pepipe!

Thanks for the tip, it actually works, did all you mentioned and I have know an image instead off the css form.

But I steel have a problem!
I steel have a border that persists to keep there, I’ll show you in the attachment file!
If you have any idea on how to remove it, i’ll apreciate.

Thanks,

Best Regards
Leonel Nunes

 
Magento Community Magento Community
Magento Community
Magento Community
 
Leo27
Sr. Member
 
Total Posts:  127
Joined:  2008-10-08
 

Well, it solved a little with “border:0” , but I steel have it…

 
Magento Community Magento Community
Magento Community
Magento Community
 
Leo27
Sr. Member
 
Total Posts:  127
Joined:  2008-10-08
 

Ok, problem solved with a backgorund!

But now I have another problem.
If you view one category that is in list or grid view by default and you change it to the other, your made add to cart button is replaced by the default css one.

Did you have the same problem?
Did you found what file is missing to change?

Best regards
L. Nunes

 
Magento Community Magento Community
Magento Community
Magento Community
 
Leo27
Sr. Member
 
Total Posts:  127
Joined:  2008-10-08
 

Bahhh, forgot to change one

app\design\frontend\default\default\template\catalog\product\list.phtml

All fine now smile

Best regards
L. Nunes

 
Magento Community Magento Community
Magento Community
Magento Community
 
vikram123
Jr. Member
 
Total Posts:  2
Joined:  2008-12-09
 
Leo27 - 15 November 2008 08:42 AM

Bahhh, forgot to change one

app\design\frontend\default\default\template\catalog\product\list.phtml

All fine now smile

Best regards
L. Nunes

paste this image in you skin images folder

and it will be done

 
Magento Community Magento Community
Magento Community
Magento Community
 
vikram123
Jr. Member
 
Total Posts:  2
Joined:  2008-12-09
 
Leo27 - 14 November 2008 12:51 PM

Well, it solved a little with “border:0” , but I steel have it…

paste this image in your skin images folder and it will be solved

 
Magento Community Magento Community
Magento Community
Magento Community
 
gdelfava
Member
 
Avatar
Total Posts:  35
Joined:  2008-10-09
Queenstown, South Africa
 

Changing the code to the following to remove the border around the image button:

<class="right" onclick="productAddToCartForm.submit(); return false;" href="#">
<
img class="v-middle" style="margin: 0pt 0pt 0pt 5px;" alt="Add to Cart" src="insert button locaton here"/>
</
a>
 
Magento Community Magento Community
Magento Community
Magento Community
 
Chelramsey
Member
 
Total Posts:  33
Joined:  2008-12-01
 

Thanks for this. I did all the steps with updating all the pages and was able to get rid of the background around my button and all that good stuff by finding this line in the boxes.css:

.add-to-cart-box .form-button { floatleft}

and changing it to:

.add-to-cart-box .form-button { background#ffffff; border: 0px; float: left;}

As a note I am using the Default template, though heavily modified.

 
Magento Community Magento Community
Magento Community
Magento Community
 
gustav30
Jr. Member
 
Total Posts:  24
Joined:  2009-07-07
 

Hello,
Just curious, I applied the steps and I have an image button now with no border.  But my button doesn’t behave like an anchor link.  When you mouse-over it the cursor does not change.  I’ve tried adding a hover state in the CSS and making a new class but doesn’t seem to be working.  Can you let me know if you had this problem and what you did to resolve?

Thanks in advance.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Flaxton
Sr. Member
 
Avatar
Total Posts:  137
Joined:  2010-06-03
Houston
 

For anyone wondering if this still is the way to do it… it is. I am on PE 1.8 and this worked for me.

 
Magento Community Magento Community
Magento Community
Magento Community
 
wastedtalent
Jr. Member
 
Total Posts:  15
Joined:  2010-09-16
 
Flaxton - 15 December 2010 11:47 AM

For anyone wondering if this still is the way to do it… it is. I am on PE 1.8 and this worked for me.

Excellent. Thanks for confirming Flaxton, I was wondering just that. I will be using this technique soon.

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