Make Add To Cart Button An Image

Well, I’ve been trying to make my add to cart button an image for some time now. I haven’t really spent a lot of time on it, but I finally decided to devote a few minutes and figure it out.



The only thing about this is that it might not work for all product display types. I’ve modified my product list and I had to create 2 new files to make this work for me.



I’d recommend you backing up your files, changing the code, and then experimenting on a test site. Don’t do this to your live site. If your product list isn’t compatible with this your customer will not be able to add products to their cart and obviously you won’t have any sales.



If your product list isn’t compatible let me know and I’ll do my best to help you.



Ok, now the instructions.



1.) Create an add to cart image. I called mine add_to_cart.jpg



2.) Create a file called:



skins/your-skin/customer/buttons/add_cart.tpl



In this file put:



{if $but_name && $but_role != "text" && $but_role != "act" && $but_role != "delete"} {* SUBMIT BUTTON *}



{/if}






3.) In your:



skins/your-skin/customer/buttons/add_to_cart.tpl



Change:


{if $settings.General.allow_anonymous_shopping == "Y" || $auth.user_id}
{include file="buttons/button.tpl" but_id=$but_id but_text=$but_text|default:$lang.add_to_cart but_name=$but_name but_onclick=$but_onclick but_href=$but_href but_target=$but_target but_role=$but_role|default:"text"}
{else}




To:


{if $settings.General.allow_anonymous_shopping == "Y" || $auth.user_id}
{include file="buttons/add_cart.tpl" but_id=$but_id but_text=$but_text|default:$lang.add_to_cart but_name=$but_name but_onclick=$but_onclick but_href=$but_href but_target=$but_target but_role=$but_role|default:"text"}
{else}




That is it.



Here is what my product details page looks like:









Here is what a grid list that I use to display my sale items looks like:









Here is what my product list looks like:









Hopefully this will help someone. If you have troubles either post on here or pm me.



Brandon

DO you know how to change add to cart button on homepage. I mean seperate button in homepage and in product page

Miracles,



I couldn’t figure out how to get 2 seperate buttons, but I’m sure there is a way. Maybe someone else will chime in?



Sorry,



Brandon

Thanks for the informative post.



Nice website, how did you replace the checkout button with a secure checkout image file ?, I’ve been trying to replicate this for the past hour with no luck.

Checkout my post at:



[url]http://forum.cs-cart.com/showthread.php?t=16202&highlight=checkout[/url]



I think I’m either the second or third post down.



Brandon

Thanks, exactly what I needed :slight_smile:

I can’t post here what I would do to you if you can figure out a way to do the same thing with the Wish List link! Been trying for the longest to change that from a text link.

Well I probably don’t really want to know what you want to do to me, but here is the solution anyways.



1.) Create a wish list button and save it to:



skins/your-skin/customer/images



2.) Create a file called:



skins/your-skin/customer/buttons/wishlist.tpl



In this file put:




{if $but_role == "text" || $but_role == "act" || $but_role == "edit" || ($but_role == "text" && $but_name)} {* TEXT STYLE *}



{/if}




Notice the wish-list-button.jpg near the end. This is where you would put your image name.



3.) Then change your:



skins/your-skin/customer/addons/wishlist/components/add_to_wishlist.tpl



From:


{* $Id: add_to_wishlist.tpl 6703 2009-01-03 14:05:52Z angel $ *}

{if $auth.user_id}
{include file="buttons/button.tpl" but_id=$but_id but_name=$but_name but_text=$lang.add_to_wishlist but_role="text" but_onclick=$but_onclick but_href=$but_href}
{else}
{assign var="c_url" value=$config.current_url|escape:url}
{include file="buttons/button.tpl" but_name="" but_text=$lang.add_to_wishlist but_role="text" but_href="$index_script?dispatch=auth.login_form&return_url=$c_url" but_onclick=""}
{/if}






To:


{* $Id: add_to_wishlist.tpl 6703 2009-01-03 14:05:52Z angel $ *}

{if $auth.user_id}
{include file="buttons/wishlist.tpl" but_id=$but_id but_name=$but_name but_text=$but_text|default:$lang.add_to_wishlist but_role=$but_role|default:"text" but_onclick=$but_onclick but_href=$but_href but_target=$but_target}
{else}
{assign var="c_url" value=$config.current_url|escape:url}
{include file="buttons/wishlist.tpl" but_name="" but_text=$lang.add_to_wishlist but_role=$but_role|default:"text" but_href="$index_script?dispatch=auth.login_form&return_url=$c_url" but_onclick=""}
{/if}






And that should be it. If there are any problems let me know.



Brandon

Hi Brandon,



Thanks for this - it’s really nice.

I did exactly as explained in your post, and the add to cart button on the search results and the homepage works just great. However, when it comes to the product page, you can see the button but nothing happens if you click on it.

Any ideas?

I’m not really sure to be honest. I know this works all the way up into 2.0.14. The first thing to do would be to clear your cache and try again. If that doesn’t work than make sure that you did everything right. All it takes is to just miss one thing when copying the code and the whole thing won’t work.



Brandon

Thanks Brandon.

Maybe this will help: when I view source of the original page, the code I get for the Add to cart button is this:

[QUOTE]











[/QUOTE]



And the code I get for the one with the new button is this:


[QUOTE]











[/QUOTE]



note that the new code is without the [ ] characters. I dont know if that means anything but this is the only difference I could find…



Any idea?

Issue solved!



The problem was a java script from shopping.com that disabled some features on the page.



Thanks.

Anyone know how I would go about replacing the “select options” text button with an image file?

Excellent! :slight_smile: Its work! Thank! )

Сan anyone tell how make rollover image button?

  1. In style.css add:



a.roll
{
display:block;
width:98;
height:21;
background:#fff url('/skins/YOURSKIN!!!/customer/images/add_cart_up.gif') no-repeat;
overflow:hidden;
cursor:link;
}
a.roll img
{
visibility:hidden;
}
a.roll:hover
{
background:0;
}
a.roll:hover img
{
visibility:visible;
border:0;
}




where add_cart_up.gif - rollower Add To Cart Button image



2. In file /skins/YOURSKIN/customer/buttons/add_cart.tpl

change

{if $but_name && $but_role != "text" && $but_role != "act" && $but_role != "delete"} {* SUBMIT BUTTON *}




to

{if $but_name && $but_role != "text" && $but_role != "act" && $but_role != "delete"} {* SUBMIT BUTTON *}




3. Clear cache - [url]
http://yoursite.com/index.php?cc[/url]



Done!

[quote name=‘Toxa’]1. In style.css add:



3. Clear cache - [url]http://yoursite.com/index.php?cc[/url]



Done![/QUOTE]



If you are running 2.0.15 you need to hit a dispatch admin page to clear the cache.

Brandon,

can you please also share continue shopping button too? Thanks you for the checkout button. really nice work.

I second that for the continue shopping button.

To replace the continue shopping button with an image I replaced the code in my:



skins/my-skin/customer/buttons/continue_shopping.tpl



with


{$lang.continue_shopping}



There might be a better way, but heck this works anyways.



Brandon