Need help with Checkout Customisation

[clothingsavers]

In the image below you can see what I need:

 

 

 

The reason for this is 2 customers this past week did not know where to put the credit card information because in the screen resolution they had the credit card boxes did not show unless they scrolled down. They did not scroll down.

 

So I was thinking if there was a way to make the credit card information show right on top.

[sparky]

Try this... replace the code in your creditcard.tpl (in your theme dir)

<form method="post" action="creditcard.php">
<input type="hidden" name="action" value="submit">
<input type="hidden" name="invoiceid" value="{$invoiceid}">

<p><strong> »  {$LANG.creditcarddetails}</strong></p>
<p><input type="radio" name="ccinfo" value="useexisting" checked{if !$cardnum} disabled{/if} onClick="document.getElementById('ccinfonew').style.display='none';document.getElementById('ccinfoexisting').style.display='';" /> {$LANG.creditcarduseexisting} ({$cardnum})<br />
<input type="radio" name="ccinfo" value="new"{if !$cardtype} checked{/if} onClick="document.getElementById('ccinfonew').style.display='';document.getElementById('ccinfoexisting').style.display='none';" /> {$LANG.creditcardenternewcard}</p>
<div id="ccinfoexisting" style="display:none">
<table cellspacing="1" cellpadding="0" class="frame"><tr><td>
<table width="100%" cellpadding="2">
<tr><td width=120 class="fieldarea">{$LANG.creditcardcvvnumber}</td><td><input type="text" name="cccvv2" value="{$cccvv}" size="5"> <a href="#" onclick="window.open('images/ccv.gif','','width=280,height=200,scrollbars=no,top=100,left=100');return false">{$LANG.creditcardcvvwhere}</a></td></tr>
</table>
</td></tr></table>
</div>
<div id="ccinfonew" style="display:none">
<table cellspacing="1" cellpadding="0" class="frame"><tr><td>
<table width="100%" cellpadding="2">
<tr><td width=120 class="fieldarea">{$LANG.creditcardcardtype}</td><td><select name="cctype">
{foreach key=num item=cardtype from=$acceptedcctypes}
<option{if $cctype eq "{$cardtype}"} selected{/if}>{$cardtype}</option>
{/foreach}
</select></td></tr>
<tr><td class="fieldarea">{$LANG.creditcardcardnumber}</td><td><input type="text" name="ccnumber" size="30" value="{$ccnumber}"></td></tr>
<tr><td class="fieldarea">{$LANG.creditcardcardexpires}</td><td><input type="text" name="ccexpirymonth" size="2" maxlength="2" value="{$ccexpirymonth}">/<input type="text" name="ccexpiryyear" size="2" maxlength="2" value="{$ccexpiryyear}"> (MM/YY)</td></tr>
<tr><td class="fieldarea">{$LANG.creditcardcvvnumber}</td><td><input type="text" name="cccvv" value="{$cccvv}" size="5"> <a href="#" onclick="window.open('images/ccv.gif','','width=280,height=200,scrollbars=no,top=100,left=100');return false">{$LANG.creditcardcvvwhere}</a></td></tr>
<tr><td class="fieldarea">{$LANG.creditcardcardissuenum}</td><td><input type="text" name="ccissuenum" value="{$ccissuenum}" size="5" maxlength="3"></td></tr>
<tr><td class="fieldarea">{$LANG.creditcardcardstart}</td><td><input type="text" name="ccstartmonth" size="2" maxlength="2" value="{$ccstartmonth}">/<input type="text" name="ccstartyear" size="2" maxlength="2" value="{$ccstartyear}"> (MM/YY)</td></tr>
</table>
</td></tr></table>
</div>

<p><strong> »  {$LANG.creditcardyourinfo}</strong></p>

{if $errormessage}<div class="errorbox">{$errormessage|replace:'<li>':'  #  '}  #  </div><br />{/if}

<table cellspacing="1" cellpadding="0" class="frame"><tr><td>
<table width="100%" cellpadding="2">
<tr><td width=120 class="fieldarea">{$LANG.clientareafirstname}</td><td><input type="text" name="firstname" size=30 value="{$firstname}"></td></tr>
<tr><td class="fieldarea">{$LANG.clientarealastname}</td><td><input type="text" name="lastname" size=30 value="{$lastname}"></td></tr>
<tr><td class="fieldarea">{$LANG.clientareaaddress1}</td><td><input type="text" name="address1" size=40 value="{$address1}"></td></tr>
<tr><td class="fieldarea">{$LANG.clientareaaddress2}</td><td><input type="text" name="address2" size=30 value="{$address2}"></td></tr>
<tr><td class="fieldarea">{$LANG.clientareacity}</td><td><input type="text" name="city" size=30 value="{$city}"></td></tr>
<tr><td class="fieldarea">{$LANG.clientareastate}</td><td><input type="text" name="state" size=25 value="{$state}"></td></tr>
<tr><td class="fieldarea">{$LANG.clientareapostcode}</td><td><input type="text" name="postcode" size=10 value="{$postcode}"></td></tr>
<tr><td class="fieldarea">{$LANG.clientareacountry}</td><td>{$countriesdropdown}</td></tr>
<tr><td class="fieldarea">{$LANG.clientareaphonenumber}</td><td><input type="text" name="phonenumber" size="20" value="{$phonenumber}"></td></tr>
</table>
</td></tr></table>

<p align="center"><input type="submit" value="{$LANG.ordercontinuebutton}" name="continue"></p>
<p align="center"><img src="images/padlock.gif" align="absmiddle" /> {$LANG.creditcardsecuritynotice}</p>
</form>

{if $cardnum}
<script language="javascript">
document.getElementById('ccinfonew').style.display='none';
document.getElementById('ccinfoexisting').style.display='';
</script>
{else}
<script language="javascript">
document.getElementById('ccinfonew').style.display='';
document.getElementById('ccinfoexisting').style.display='none';
</script>
{/if}