Moving Add to Cart box

Hello,

I am trying to change the layout of my product description pages.

Please visit www dot total-eminence dot co dot uk

I basically want to move the "Add to Cart" button to under the attributes and on the left hand side of the page. I would also like the big gap between "Do you want this personalised" and "Personalised Instructions" removing as this just looks unsightly.

I am also toying with the idea of removing the box around "Add to Cart" and having a box around the whole of the attributes AND add to cart section. Thoughts and comments on this as well as how to do it would be appreciated!

Many Thanks

To move it's position under the attributes the best way to go is to move it in file :

includes/templates/yourtemplate/templates/tpl_product_info_display.php

(if this file doesn't exist then you need to create it as an override by copying includes/templates/default_template/templates/tpl_product_info_display.php)

The file is very well annotated so you should be able to see the code bloak for the Add to Cart box and the Attributes. But if you struggle then just post again.

Then you will want to edit the stylesheet.css file, probably, to fine-tune where the box is displayed.

I have already moved the add to cart box below the arrributes module in this page. It currently reads:

<!--bof Attributes Module -->
<?php
  if ($pr_attr->fields['total'] > 0) {
?>
<?php
/**
 * display the product atributes
 */
  require($template->get_template_dir('/tpl_modules_attributes.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_attributes.php'); ?>
<?php
  }
?>
<!--eof Attributes Module -->

<!--bof Add to Cart Box -->
<?php
if (CUSTOMERS_APPROVAL == 3 and TEXT_LOGIN_FOR_PRICE_BUTTON_REPLACE_SHOWROOM == '') {
  // do nothing
} else {
?>
            <?php
    $display_qty = (($flag_show_product_info_in_cart_qty == 1 and $_SESSION['cart']->in_cart($_GET['products_id'])) ? '<p>' . PRODUCTS_ORDER_QTY_TEXT_IN_CART . $_SESSION['cart']->get_quantity($_GET['products_id']) . '</p>' : '');
            if ($products_qty_box_status == 0 or $products_quantity_order_max== 1) {
              // hide the quantity box and default to 1
              $the_button = '<input type="hidden" name="cart_quantity" value="1" />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            } else {
              // show the quantity box
    $the_button = PRODUCTS_ORDER_QTY_TEXT . '<input type="text" name="cart_quantity" value="' . (zen_get_buy_now_qty($_GET['products_id'])) . '" maxlength="6" size="4" /><br />' . zen_get_products_quantity_min_units_display((int)$_GET['products_id']) . '<br />' . zen_draw_hidden_field('products_id', (int)$_GET['products_id']) . '<div class="buttonRow">' . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT) . '</div>';
            }
    $display_button = zen_get_buy_now_button($_GET['products_id'], $the_button);
  ?>
  <?php if ($display_qty != '' or $display_button != '') { ?>
    <div id="cartAdd">
    <?php
      echo $display_qty;
      echo $display_button;
            ?>
          </div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

But is still appearing as shown on the website. I have tinkered with the style sheet but don't seem to be able to make it move to the correct place!

This is what the source of the visible page looks like:

<!--bof Add to Cart Box -->
                  <div id="cartAdd">
    Add to Cart: <input type="text" name="cart_quantity" value="1" maxlength="6" size="4" /><br /><br /><input type="hidden" name="products_id" value="13774" /><div class="buttonRow"><input type="image" src="includes/templates/theme032/buttons/english/button_in_cart.gif" alt="Add to Cart" title=" Add to Cart " /></div>          </div>
  <!--eof Add to Cart Box-->

<!--bof Product details list  -->
<!--eof Product details list -->

<!--bof Attributes Module -->

So, the Add to Cart box is definitely above the attributes still. I suspect that you have edited the wrong file. In my first post I talked about the default file and the override version. As I say I am guessing that you have edited the wrong one.

What copy of the file did you modify, and where did you upload it to? Your site is still using the original version. ...Like Nick says:)

I edited the one at includes/templates/theme032/templates

theme032 being my active template.

Could it be related to the fact that all my products are not product type general. They are a different product type that works to create kit products but act the same to customers.

If so where is the file I would need to change for this?

Ah sorry stupid moment. There was another one named eptly for this use which appears to have moved the add to cart box.

Now its right at the bottom of the page however.

Which settings do I need in the css to make it appear on the left below the attributes (and move the rest of the page down to allow space for it!!)

Cracked it!!!
Thanks All!!

In your stylesheet_main.css, find the #cartAdd rule and change right to left:```
#cartAdd {float:left; text-align:center; margin:1em; border:1px solid #AEACA5; padding:1em;}

In your stylesheet.css, delete the #cartAdd {} rule, and add a new rule to keep the next/prev below the add box::```
/* ----------------- ADD TO CART BOX MOVE -------------- */

#cartAdd {position: relative; top: 20em; left:100px;}

.navNextPrevWrapper {clear: both;}