Moving the Add to Cart Button

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • icegems
    Senior Blueparker
    • Oct 2009
    • 1167
    #1

    Moving the Add to Cart Button

    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?
    Tags: None
    • Red Devil
      Senior Blueparker
      • Oct 2009
      • 2569
      #2
      Isn't this done via the Template Editor / Custom HTML / Product Detail Page?

      EXISTING CODE

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

      NEW CODE

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

        Comment

        • icegems
          Senior Blueparker
          • Oct 2009
          • 1167
          #3
          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.

          Code:
          <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

            Comment

            Previous template Next
            Working...