X-Cart forums

[tahirfayyaz]

I am looking to make the add to cart button a lot bigger than the default button.

Do you what files I need to modify to add my own add to cart button image?

Thanks

Tahir

[ARW VISIONS]

is this for 4.1 branch?

Ash

[ARW VISIONS]

Moving to template editing. This forum is for product management only.

[tahirfayyaz]

Yes it is for the 4.1 branch. Do you know which templates I will need to edit?

[ARW VISIONS]

skin1/buttons/button.tpl

[tahirfayyaz]

What exactly do I edit in that file to only change the add to cart button as I do not want to mess up all the other buttons.

Thanks

Tahir

[ARW VISIONS]

*******MAKE A BACK UP FIRST*****************

first change the style of the add to cart button.

in skin1/customer/main/product.tpl

change this
{include file="buttons/add_to_cart.tpl" style="button" href="javascript: if(FormValidation()) document.orderform.submit();"}

to this
{include file="buttons/add_to_cart.tpl" style="atcButton" href="javascript: if(FormValidation()) document.orderform.submit();"}


then in buttons/button.tpl
change this

{if $style eq 'button' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
<td class="Button"{$reading_direction_tag}>
<font class="Button">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>
{elseif $image_menu}

to this

{if $style eq 'atcButton' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
<td class="atcButton"{$reading_direction_tag}>
<font class="atcButton">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>
{else if $style eq 'button' && ($config.Adaptives.platform ne 'MacPPC' || $config.Adaptives.browser ne 'NN')}
<table cellspacing="0" cellpadding="0" onclick="{$js_link}" class="ButtonTable"{if $title ne ''} title="{$title|escape}"{/if}>
{strip}
<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
<td class="Button"{$reading_direction_tag}>
<font class="Button">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2.gif" class="ButtonSide" alt="{$title|escape}" />
</td>
</tr>
{/strip}
</table>
{elseif $image_menu}

You will then need to add the new styles to the CSS highlighted in red ablove.

Then up load new iamges.

That's it. Simple!!! HA!

Changing the buttons can be bit of a hassle.

Ash

[tahirfayyaz]

Awesome thanks for your help on that will get it a try tonight.

Just one quick question. The current add to cart button uses actual text but the add to cart button that I have created will be just a image (see attached). Do I need to do anything differently in that case to what you have mentioned??

Tahir

[ARW VISIONS]

yes you should change this

<tr>
<td>
<{$img_type} src="{$ImagesDir}/but1newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
<td class="atcButton"{$reading_direction_tag}>
<font class="atcButton">{$button_title}</font>
</td>
<td>
<img src="{$ImagesDir}/but2newbutton.gif" class="atcSide" alt="{$title|escape}" />
</td>
</tr>

to this

<tr>
<td class="atcButton"{$reading_direction_tag}>
<div><img src="{$ImagesDir}/mybuttonimage.gif" alt= add to cart" />
</td>
</tr>