Display product attributes in two columns (side by side)

[DivaVocals]

I really don't want to get this post off topic by answering your question here in this thread.. (Because this is REALLY apples and oranges..) Would you mind posting a separate topic on this so that you can get answers to your question and this post doesn't stray off-topic??

Hi! I have been searching and searching. I have tried all of the fixes that I can find in the forums, but none seem to be working for me.

I understand the difference between the Attributes and the Option Values and I apologize to the original poster for asking the same thing again.

Can someone take a look at this page.

http://www.graphxfairy.com/auction-t...ction-template

I am trying to put my Options Values in columns. I have already set the area in the admin correctly to reflect 3 images per row with the attribute style to 4.

I know I am missing something or I have some template override affecting this, but I can't seem to locate it.

Any ideas?

[fairy]

Of Course, and BTW thank you for posting your solution to the Attribute columns. I had been looking for that for quite some time.

[DivaVocals]

Of Course, and BTW thank you for posting your solution to the Attribute columns. I had been looking for that for quite some time.

Thanks.. and you're very welcome!!

[jsksathiya]

How to display 4 columns. Please help me!!!!!!!

[DivaVocals]

How to display 4 columns. Please help me!!!!!!!

The code I shared in the original post is only for two columns, and I while I understand how it was done, I didn't write the code (it was done for me). So I can't really help with this. You might try posting this as a NEW question so you can get assistance with this.. Feel free to reference this post if someone needs an example of how this was accomplished with two columns.

[gjh42]

Don't know what happened to the post I thought I made a few minutes ago...

You can get the four-column effect by using the stylesheet code from post 55, adapted to
width: 24%;
so that the individual attributes will fit four to a row.

You also will need to add
height: ##px; (where ## is the height you want)
to the .wrapperAttribsOptions rule to ensure that the floating happens smoothly.

This is a generic method, and will not be suitable to every situation.

[jsksathiya]

Thank you for your great replay

[First Action]

I'm a Zen-Newbie, so don't shoot me.

I recently created a Santa Letter item in my store, which featured 20 different background choices. I had setup background as a radio button item, but it would work for checkbox groups too. Since I had images for each, I had the option of setting the rows & columns.

Not sure if it would help you. But pizza toppings could have images.

Is there a way to do this with display only images. I have wooden swords that have many different styles that I want to display side by side instead of just vertically, but just can't figure it out. You can see it at the link below.

https://www.wholesalemartialartsequi...roducts_id=261

[DivaVocals]

Is there a way to do this with display only images. I have wooden swords that have many different styles that I want to display side by side instead of just vertically, but just can't figure it out. You can see it at the link below.

https://www.wholesalemartialartsequi...roducts_id=261

The short answer is I don't know, and that's NOT what my posted code was meant to do, You should search the forum or start a new topic to address your specific question.

Here is my original response to the post you quoted:

I was re-reading this, and wanted to add a few additional comments. Each single product attribute consists of two parts:
1. Option (Attribute) Name (i.e. Color)
2. Option (Attribute) Value (i.e. Blue, Red, Green)

My solution will place the attributes+it's associated values in two columns. (As you have already seen) It will not do anything about the layout of the attribute values.

You are looking for a solution that takes and individual attribute and change the default display from this:

Attribute (Color)
--- Attribute Value (Green)
--- Attribute Value (Blue)
--- Attribute Value (Red)
--- Attribute Value (Purple)

And display it like this:
Attribute Name (Color)
--- Attribute Value (Green) ----- --- Attribute Value (Blue)
--- Attribute Value (Red) -------- --- Attribute Value (Purple)

or something similar...

Solarflare is absolutely right. The way to achieve what you want is to use images for your attribute values. Once you have images for your attribute values, you can easily achieve what you want using the admin controls. If you don't want to use images, then you are looking at custome code.

I'm not sure you're gonna find help on this forum to create the code you want. I sought an outside resource to help me with the code I attached to the O/P because I never saw anyone post a solution. You may have to do the same if you REALLY don't want to use images and the existing admin controls/features. From my searches, I got the impression that the general consensus is that this is not a desireable/needed feature since there is a way to do what you want by creating and associating images with your attribute (options) values.

Good luck with your store!

[LinusIT]

One thing that has occurred to me is that it should be possible to get a two-column layout from the stock file just by using CSS.

/*eliminate hard break between attributes*/
.wrapperAttribsOptions+br.clearBoth {display: none;}/*allow floated attributes to sit side by side if desired*/
.wrapperAttribsOptions {float: left; width: 48%;}/*float attributes and make them half the available width*/

This basic code should make the attributes sit two to a row. Some supplemental rules may well be needed to make the attribute group play well with its surroundings.

The attributes will all need to be set to the same height so there is no snagging in the float.

I've used the same method that gjh42 suggested and thought I'd share my code. The only problem with gjh42 code is that it doesn't display the .clearBoth meaning the floats aren't cleared.

CSS:

.wrapperAttribsOptions h4 { width: 75px;}
.wrapperAttribsOptions {float:left;width:48%;height:115px;margin:0.3em 0;}/*115px for 5 product attributes*/

Create tpl_modules_attributes.php in TEMPLATES/YOURTEMPLATE/TEMPLATES with the following code

<div id="productAttributes">
<?php if ($zv_display_select_option > 0) { ?>
<h3 id="attribsOptionsText"><?php echo TEXT_PRODUCT_OPTIONS; ?></h3>
<?php } // show please select unless all are readonly ?>

<?php
    for($i=0;$i<sizeof($options_name);$i++) {
?>
<?php
  if ($options_comment[$i] != '' and $options_comment_position[$i] == '0') {
?>
<h3 class="attributesComments"><?php echo $options_comment[$i]; ?></h3>
<?php
  }
?>

<div class="wrapperAttribsOptions">
<h4 class="optionName back"><?php echo $options_name[$i]; ?></h4>
<div class="back"><?php echo "\n" . $options_menu[$i]; ?></div>
</div>


<?php if ($options_comment[$i] != '' and $options_comment_position[$i] == '1') { ?>
    <div class="ProductInfoComments"><?php echo $options_comment[$i]; ?></div>
<?php } ?>


<?php
if ($options_attributes_image[$i] != '') {
?>
<?php echo $options_attributes_image[$i]; ?>
<?php
}
?>
<?php
    }
?>


<?php
  if ($show_onetime_charges_description == 'true') {
?>
    <div class="wrapperAttribsOneTime"><?php echo TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION; ?></div>
<?php } ?>


<?php
  if ($show_attributes_qty_prices_description == 'true') {
?>
    <div class="wrapperAttribsQtyPrices"><?php echo zen_image(DIR_WS_TEMPLATE_ICONS . 'icon_status_green.gif', TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK, 10, 10) . '&nbsp;' . '<a href="javascript:popupWindowPrice(\'' . zen_href_link(FILENAME_POPUP_ATTRIBUTES_QTY_PRICES, 'products_id=' . $_GET['products_id'] . '&products_tax_class_id=' . $products_tax_class_id) . '\')">' . TEXT_ATTRIBUTES_QTY_PRICE_HELP_LINK . '</a>'; ?></div>
<?php } ?>
<br class="clearBoth" />
</div>

This will split the attribute groups into two columns.