Moving the Add to Cart Button

[icegems]

Has anyone managed to move the "Add to Cart" button below the "Options"?

For example, currently my product pages are flow like this:-

Product Details
Add to Basket
Size Options
Other Options

What I need the site to do is:-

Product Details
Size Options
Other Options
Add to Basket

People are missing the size options and therefore not adding to basket, they are missing the error message in red too and I do agree that the flow on this page isn't right - the options need to be seen and selected before the product is added to cart.

Has anyone changed this flow and is it possible?

[Red Devil]

Isn't this done via the Template Editor / Custom HTML / Product Detail Page?

EXISTING CODE

<h1>%product_title</h1>
[IF product_message]%product_message[/IF]
<div class="p">
<table class="grid">
<tr>
<td width="50%" align="center" style="padding-left: 10px; padding-right: 10px;" id="product_images">
<p>%product_images</p>
</td>
<td><img src="/images/spacerv.gif" alt=""></td><td class="vertical"><img src="/images/spacerv.gif" alt=""></td>
<td width="50%" align="left" style="padding-left: 10px" id="product_details">
[IF product_action]%product_action[/IF]
[IF product_options]%product_options[/IF]
[IF product_attributes]%product_attributes[/IF]
[IF product_availability]%product_availability[/IF]
[IF product_related]%product_related[/IF]
[IF product_brandlogo]<p align="center">%product_brandlogo</p>[/IF]
[IF product_brandcontent]%product_brandcontent[/IF]
[IF product_additional]%product_additional[/IF]
</td>
</tr>
</table>
</div>
[IF product_discount]<hr />
%product_discount[/IF]
[IF product_content]<hr />
%product_content[/IF]
[IF product_alsobought]<hr />
%product_alsobought[/IF]
[IF product_buttons]<hr />
%product_buttons[/IF] 

NEW CODE

<h1>%product_title</h1>
[IF product_message]%product_message[/IF]
<div class="p">
<table class="grid">
<tr>
<td width="50%" align="center" style="padding-left: 10px; padding-right: 10px;" id="product_images">
<p>%product_images</p>
</td>
<td><img src="/images/spacerv.gif" alt=""></td><td class="vertical"><img src="/images/spacerv.gif" alt=""></td>
<td width="50%" align="left" style="padding-left: 10px" id="product_details">
[IF product_options]%product_options[/IF]
[IF product_attributes]%product_attributes[/IF]
[IF product_action]%product_action[/IF]
[IF product_availability]%product_availability[/IF]
[IF product_related]%product_related[/IF]
[IF product_brandlogo]<p align="center">%product_brandlogo</p>[/IF]
[IF product_brandcontent]%product_brandcontent[/IF]
[IF product_additional]%product_additional[/IF]
</td>
</tr>
</table>
</div>
[IF product_discount]<hr />
%product_discount[/IF]
[IF product_content]<hr />
%product_content[/IF]
[IF product_alsobought]<hr />
%product_alsobought[/IF]
[IF product_buttons]<hr />
%product_buttons[/IF] 

[icegems]

Thanks for replying. No that didn't work as it moves the options to the very top. I have found a sort of solution which is better than it was but I have had to rename all the options/additions to make it fit - ideally I could have done with moving the add to cart button lower. This is the code I used.

<h1>%product_title</h1>
[IF product_message]%product_message[/IF]
<div class="p">
<table class="grid">
<tr>

<tr>
<td width="40%" align="center" style="padding-left: 0px; padding-right: 0px;" id="product_images">
<p><a href="%product_zoom_link" class="MagicZoomPlus" rel="zoom-position:inner;zoom-fade: true"><img src="%product_image_link" alt="%product_title"></a></p>
</td>

<td><img src="/images/spacerv.gif" alt=""></td><td class="vertical"><img src="/images/spacerv.gif" alt=""></td>
<td width="60%" align="left" style="padding-left: 10px" id="product_details">
<div class="p2" id="order">
<table class="alternate">

<tr>
<td align="left" style="padding: 5px 10px">
<p style="margin-top: 5px; margin-bottom: 5px; font: 20px Palatino, serif;">Ready To Buy?</p>
%product_price
[IF product_vat]<span class="gap">%product_vat</span>[/IF]
[IF product_points]<span class="gap">%product_points</span>[/IF]
</td>
</tr>
</table>

<div class="p2" id="order">
<table class="alternate">

<tr>
<td align="left" style="padding: 5px 10px">
[IF product_options]%product_options[/IF]<br>
<span class="gap">
<td align="right" style="padding: 15px 10px" id="add">
<span class="gap">
%product_add
</span>
</td>
</tr>
</table>

[IF product_notify]%product_notify[/IF]
</div>
[IF product_unavailable]%product_unavailable[/IF]

[IF product_attributes]%product_attributes[/IF]
[IF product_availability]%product_availability[/IF]
[IF product_related]%product_related[/IF]
[IF product_brandlogo]<p align="center">%product_brandlogo</p>[/IF]
[IF product_brandcontent]%product_brandcontent[/IF]


<br><a href="http://www.icegems.co.uk/user/delivery-options.gif" rel="lightbox"><img src="http://www.icegems.co.uk/user/delivery-options-link.gif" alt="Click to view delivery options" title="ICE Gems Delivery Info" /></a> 
<img src="/images/spacerv.gif" alt="">
<a href="http://www.icegems.co.uk/user/sizing-guide.gif" rel="lightbox"><img src="http://www.icegems.co.uk/user/sizing-guide-link.gif" alt="Click to view our sizing guide information" title="ICE Gems Sizing Guide" /></a>
<img src="/images/spacerv.gif" alt="">
<a href="http://www.icegems.co.uk/user/how-to-order.jpg" rel="lightbox"><img src="http://www.icegems.co.uk/user/how-to-order-link.gif" alt="Click to view ordering information" title="How To Order From ICE Gems" /></a>

[IF product_additional]%product_additional[/IF]
</td>
</tr>
</table>
</div>
[IF product_discount]<hr />
%product_discount[/IF]
[IF product_content]<hr />
%product_content[/IF]
[IF product_alsobought]<hr />
%product_alsobought[/IF]
[IF product_buttons]<hr />
%product_buttons[/IF]

You can see how it looks here - http://www.icegems.co.uk/childrens-i...-of-steel.html