Customizing Add to Cart Box

[Ranch Dog]

I'm a newbie working with the latest version of ZC plus have added Back In Stock Notifications and Wish List. I also added some custom buttons so that everything would align within the add to cart box. When a product is in stock, here is what my ATCB looks like.



When the product is out of stock, the box has quite a bit of spacing between the buttons.



In this example the product has been added to a wish list and all the button functions as they should. I would like to tighten up the spacing between the buttons. This is just a formatting issue as everything works.

Here is what the Add to Cart Box portion of my tpl_product_info_display.php (public_html/store/includes/templates/CUSTOM/templates) reads:

<!--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']) . zen_image_submit(BUTTON_IMAGE_IN_CART, BUTTON_IN_CART_ALT);
            }
    $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;
      // BEGIN BACK_IN_STOCK_NOTIFICATIONS 1 of 2
if (!is_null($product_back_in_stock_notification_form_link)) {
  echo '<p>' . $product_back_in_stock_notification_form_link . '</p>';
}
// END BACK_IN_STOCK_NOTIFICATIONS 1 of 2
            ?><br class="clearBoth" />

<?php 
// (un): start wishlist link
echo '<a href="' . zen_href_link(UN_FILENAME_WISHLIST, zen_get_all_get_params(array('action', 'products_id')) . 'products_id='.(int)$_GET['products_id'].'&action=un_add_wishlist') . '">' . zen_image_button(UN_BUTTON_IMAGE_WISHLIST_ADD, "Add this item to you wish list") ?> </a>
          
   
  </div> 
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>

<!--eof Add to Cart Box-->

As always, you help is appreciated! I could not have gotten my store up and running without the help I've received here!

[kobra]

As this will most likely be css and not code a link to this will assist

[Ranch Dog]

As this will most likely be css and not code a link to this will assist

kobra,

I assume you are referencing store/includes/templates/CUSTOM/css/stylesheet.css. If so, there is quite a bit of references to "cart" within it. This one seemed logical but I don't see anything here:

/*Shopping Cart Display*/
#cartAdd {
	float: right;
	text-align: center;
	margin: 1em;
	border: 1px solid #000000;
	padding: 1em;
	}

What section should I being looking at in this file?

[Celtic]

Ranch Dog,

What we need is a link to your website

[kobra]

Ditto Celtic's post and mine
Snippets of disjointed code are of no assistance at this stage

[Ranch Dog]

Here you go:
www ranchdogmolds.com/store

[kobra]

Here is the "view code" from my actual web page.

POST YOUR !@##$$#@@ page link!!!!

[Celtic]

Ranch Dog,

The problem is in this bit of code...

      // BEGIN BACK_IN_STOCK_NOTIFICATIONS 1 of 2
if (!is_null($product_back_in_stock_notification_form_link)) {
  echo '<p>' . $product_back_in_stock_notification_form_link . '</p>';
}
// END BACK_IN_STOCK_NOTIFICATIONS 1 of 2
            ?><br class="clearBoth" /> 

You need to get rid of the <p>, </p> and probably the <br class="clearBoth"> to close up the gaps.

(As Kobra suggested, it would have helped to have a direct link to a product on your site that was out of stock so we could have gone directly to the problem.)

[Ranch Dog]

Celtic,

I appreciate your help. Removing the '<p>' and '</p>' caused the out of stock product pages to go to a blank, white page for the entire product display so I put them back. Removing them did not cause any change on the in stock display.

Removing the <br class="clearBoth"> caused no change to the out of stock product pages but on the in stock pages in horizontally aligned the add to cart and wish list button.

I'm sorry about the mix up on what you guys wanted to post. I have no experience at this. I'm going to leave well enough alone and not ask any more question.

POST YOUR !@##$$#@@ page link!!!!

That says a heck of a lot about you kobra, you are a first class jerk!

[kuroi]

As Kobra said several times and Celtic reiterated, we need to see your site to help you with this sort of problem.

In particular we need to see how your HTML and CSS are interacting with each other. This is simply not possible from small, incomplete snippets.

There's lots of willing help here for new users, but you have to let us help you, or we'll lose interest pretty fast.