Change Add to cart button

Hey guys, I think this should be pretty easy to do but I can’t seem to find it. I just want to change the add to cart button that comes with cs-cart to a button I have made for my client. Is there an easy way to do this? can I just insert the img src somewhere in the buy now tpl? or is this way down in the bowels of cart? Any help is appreciated guys!



Thanks again!

Take a look at this bit of code in styles.css:


.button-submit-action, .button-submit, .button-submit-big, .button, .button-action {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
[COLOR="Red"]background:#FF5F2E url(images/but_right_action.gif) no-repeat scroll right top;[/COLOR]
height:21px;




I think the text gets added in /skins/YOURSKIN/customer/buttons/button.tpl



I have not played with it but that should get you started.



Bob

I was told by support that single image cannot be used as add to cart button replacement on 2x. It consists of two images, right and left…


[quote name=‘jobosales’]Take a look at this bit of code in styles.css:


.button-submit-action, .button-submit, .button-submit-big, .button, .button-action {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
[COLOR="Red"]background:#FF5F2E url(images/but_right_action.gif) no-repeat scroll right top;[/COLOR]
height:21px;




I think the text gets added in /skins/YOURSKIN/customer/buttons/button.tpl



I have not played with it but that should get you started.



Bob[/QUOTE]

[quote name=‘Darius’]I was told by support that single image cannot be used as add to cart button replacement on 2x. It consists of two images, right and left…[/QUOTE]



If this is the case then would there be a way to use my button and just use the functions of the cs add to cart button? I know there is a way to do this, I don’t think I’ve seen one cs site that uses the original text buttons…



Thanks in advance guys!

[quote name=‘Herbaria’]If this is the case then would there be a way to use my button and just use the functions of the cs add to cart button? I know there is a way to do this, I don’t think I’ve seen one cs site that uses the original text buttons…[/QUOTE]

I just played around with this. As Darius said, you need to change both the left and right images and also change the background in styles.css.



You might be able to modify /skins/YOURSKIN/customer/buttons/button.tpl to use a single image. I think you would also need to modify /skins/basic/customer/views/products/components/buy_now.tpl.



It might be easier just to split your image into two parts and substitute those along with modifying the background color.



Bob

If your image is symmetrical you can use the same for the left and right and let them overlap. I have done it this way and it works perfectly.

Make sure you don’t create a button that is specific to “add to cart” unless you want to create a whole new css class and assign it. The css class “button-submit” is used in more than one place.



so far I found:



sign in

update

continue shopping

checkout

[url]http://demo2.cscartskins.com/index.php?demo_skin[C]=SilverBlack[/url]



Here I see add to cart as a single image, so this probably is possible to do…

If you use the Firefox browser, try downloading and using Firebug - makes life a lot easier when web designing.

[quote name=‘Darius’][url]http://demo2.cscartskins.com/index.php?demo_skin[C]=SilverBlack[/url]



Here I see add to cart as a single image, so this probably is possible to do…[/QUOTE]



Darius, empty your cart and then click “view cart” - your “continue shopping” button is too short now.

[quote name=‘moka’]Darius, empty your cart and then click “view cart” - your “continue shopping” button is too short now.[/QUOTE]



Its not mine

OK, I’ve got it to where the button I want will display, but it won’t add to the cart. What is the actual code to add a product to the cart?

Eureka! just had to wrap my buttons with the ajax form code and it works great now…thanks for the help guys!