Styling Attribute Options

[mickyholmes]

Hello,
can someone please point me in the right direction?

I can't work out how to style the attributes for my product.... see screen shot attached.

Very simply, I'd like the dropdown to appear underneath the attribute name. Also, I'd like the 'Add this to my cart' button to appear below the list of options. Like this, if this makes sense!

Number of Adults
Dropdown Box Here

Number of Children
Dropdown Box Here

Number of Babies
Dropdown Box Here

Name and Age of Each Child
Dropdown Box Here

add this to my cart Here

I've no idea how to tackle this. Any pointers would be greatly appreciated.

Thanks,
Michael

[stevesh]

A link to a product info page with these attributes would help.

[mickyholmes]

of course....

http://www.santasweevillage.com/tick...&products_id=8

Hopefully I can get one day working perfectly then I can copy it to each of my categories.

Thanks Steve,
Michael

[mickyholmes]

....I made the textbox wide to force it onto a new line, maybe there's a better way to do this?

[gjh42]

Flexible Attributes in Plugins may make it easier to do what you want.

For the simple styling you asked about, add to your stylesheet:

.optionName+div {clear: left;}

To get the add to cart below the attributes, you will need to edit tpl_product_info_display.php and move the appropriate code block. The file is well commented and it should be straightforward.

[mickyholmes]

excellent stuff!

thanks for the advice,
Michael

[mickyholmes]

Hi gjh42,

editing the CSS worked perfectly to create the new line, thanks for the advice. I edited tpl_product_info_display.php and moved this block of code further down but it didn't seem to make any difference.

<!--bof Add to Cart Box -->
<!--MH I moved this from line 88 so that Add To Cart is below attributes -->
<?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;
            ?>
          </div>
  <?php } // display qty and button ?>
<?php } // CUSTOMERS_APPROVAL == 3 ?>
<!--eof Add to Cart Box-->

I'm not too concerned about the add to cart box, so no big deal.

Thanks again,
Michael

[gjh42]

Since #cartAdd is floated right and attributes are floated left, nothing stops either of them from rising to the bottom of the preceding element. Add to your stylesheet

#cartAdd {clear: both;}

[mickyholmes]

Hi,
I'm still struggling with this.... whenever I change the file tpl_product_info_display.php it doesn't seem to make any difference whatsoever to my product page.

I'm trying to move the checkout button to the bottom of the page (after the options) and remove the product name (3.30pm 1/12/2012), or even display the product name on a new line after the product image.

http://www.santasweevillage.com/tick...&products_id=8

I think I must be editing the wrong file... do I need to create another directory to override or something?

the path to the file I'm editing is ''includes/templates/template_default/templates/tpl_product_info_display.php'

I've created a new template called 'custom'.

Thanks for any advice,
Michael

[kobra]

I think I must be editing the wrong file... do I need to create another directory to override or something

You should be editing a copy of that file and uploading it to your
/includes/templates/custom/templates folder