Display product attributes in two columns (side by side)

I've seen a few posts here asking about this or something similar. I got some help from a few sources to get this working for me.. I thought I'd share my solution in case anyone else is looking for something similar. You need to set up the appropriate override for the tpl_modules_attributes.php file (includes/templates/YOUR_TEMPLATE/templates)

Product attributes by default appear in a vertical format based on the sort order for each attribute. For a few attributes, this is cool, but for more than a few attributes, it can make the product pages a little unwielding.. I needed to have attributes appear in two columns side by side. I wanted to keep this simple.. I figured that using the existing sort order features would allow me to use the admin controls to place the attributes where I wanted them to appear and the order they should appear in. Even numbered attributes appear in the left column, while odd numbered attributes appear on the right. (by number I mean the sort order number)

There is only one caveat.. I had a friend helping me, and I didn't want to bug him too much.. His orginal solution got me part way there, but didn't split the odd and even sort order numbers the way I wanted.. I figured out how to get his orginal solution to split the attributes between odd and even sort order numbers in two columns..:smartalec: However, I couldn't figure our how to get attributes with sort order "1" to appear correctly.. (This attribute always appeared in the left column with the even numbered attributes) So I worked around this by having my attibute sort order start with "2" (so now I am skipping/not using "1" or "0" as a sort order), and it solves the problem.. Even sort order numbers appear on the left, and odd sort order numbers appear on the right. Oh I also have the form field appear below the label just to make the final layout a little neater looking.

Hope someone else finds this useful..

Display product attributes in two columns (display attributes side by side)

One additional caveat.. The attributes will appear in the shopping cart in a vertical list with the even numbered attributes followed by the odd numbered attributes... For me this is fine.. Just wanted to let anyone using this know just in case.. I may one day look into adding a two column attribute display in the shopping cart too..

Attributes layout horizontal
Attributes layout two columns
Attributes layout side by side
Attributes layout pairs

Not sure how useful this coding will be but your sharing is appreciated.

Who knows, maybe somebody will run with it and create a "must have" module. :D

It's very useful IMO when you have product with over 10 attributes. My client didn't like the way the product pages looked with 10+ attributes lined up in a vertical stack. (and I tended to agree with her)

Many folks seem happy with the attributes layout as is (perhaps you are one of those satisfied folks:smile:), but IMO, for products with lots of attributes, the vertical stack looks a bit uninviting.. I shared my solution because in looking for a solution to this layout issue here on this forum, I found other people looking for somthing similar.. I'm sure it will be useful for someone who is looking to to what I was trying to do..

Thanks Diva
Havent tried it yet but just what I was looking for:smile:

You are very welcome.. Happy to share!

Sorry, but I need to revive this thread.

I tried the above solution, but it didn't work.

I have a listing of pizza toppings that I wanted to put into two columns. And below that I have a text box. All this solution did was make the text box appear to the right of the toppings. The toppings all remained in one column.

Does anybody else have a way to address this?

Chris

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.

Quote:

---

Originally Posted by innovafire

Sorry, but I need to revive this thread.

I tried the above solution, but it didn't work.

I have a listing of pizza toppings that I wanted to put into two columns. And below that I have a text box. All this solution did was make the text box appear to the right of the toppings. The toppings all remained in one column.

Does anybody else have a way to address this?

Chris

---

Yeah, they could. But I don't have images for them and don't want t go to the trouble. I'm really surprised that the option would be limited to making columns only out of image attributes.

Anybody else got an idea on this?

OK, here's the code for that file that should have created the two colum attributes (from the ZIP file above). I'm only just learning PHP, so I'm hoping someone that knows better can spot what needs to be changed.

<?php
/**
* Module Template
*
* Template used to render attribute display/input fields
*
* @package templateSystem
* @copyright Copyright 2003-2005 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_modules_attributes.php 3208 2006-03-19 16:48:57Z birdbrain $
*/
?>
<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') {
$output .= '<h3 class="attributesComments">'.$options_comment[$i].'</h3>';
}

$output .= '
<div class="wrapperAttribsOptions">
<h4 class="optionName back">'.$options_name[$i].':</h4>
<br class="clearBoth" />
<div class="back">' . $options_menu[$i].'</div>
<br class="clearBoth" />
</div>';

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

if ($options_attributes_image[$i] != '') {
$output .= $options_attributes_image[$i];
}

$output .= '<br class="clearBoth" />';

if ($i%2) {
if($i==0){
$left_col .= $output;
} else {
$right_col .= $output;
}
} else {
$left_col .= $output;
}
$output ='';

}

?>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td width="50%"><?php echo $left_col; ?></td>
<td width="50%"><?php echo $right_col; ?></td>
</tr>
</table>


<?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 } ?>
</div>

Quote:

---

Originally Posted by innovafire

Sorry, but I need to revive this thread.

I tried the above solution, but it didn't work.

I have a listing of pizza toppings that I wanted to put into two columns. And below that I have a text box. All this solution did was make the text box appear to the right of the toppings. The toppings all remained in one column.

Does anybody else have a way to address this?

Chris

---

If your toppings are Option Values, this solution won't split those into two columns. This is meant to take the Option Names (along with their associated values) and place them into two columns.

Honestly this is ALL this solution was supposed to do.. My client has products that have MANY attributes (More than 10). Because there are so many attributes, it makes the product detail page quite long and unattractive. We wanted a way to display the attributes (and values) in two columns using the sort order for the Option Names as a simple method to help control the placement of the attributes (and values) within the two columns.

So in effect it takes a list like this:
Attribute 1
Attribute 2
Attribute 3
Attribute 4
Attribute 5
Attribute 6
Attribute 7

And displays it like this:
Attribute 1 Attribute 2
Attribute 3 Attribute 4
Attribute 5 Attribute 6
Attribute 7

Here's a sample of that illustrates what my client's website looked like before I applied this change (this is not my client's site, but a similar site):
http://www.lacelocs.com/custom-lace-...form-p-71.html

This is a test website, but you can see what this modification does when applied:
http://clients.overthehillweb.com/my...products_id=36

It is my understanding that the placement of Options Values is controlled via the admin. I saw LOTS of threads on that.. I was looking for something else, and hence why I had my friend help me create this down and dirty mod..

I hope that clarifies things for everyone..

Quote:

---

Originally Posted by solarflare

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.

---

Quote:

---

Originally Posted by innovafire

Yeah, they could. But I don't have images for them and don't want t go to the trouble. I'm really surprised that the option would be limited to making columns only out of image attributes.

Anybody else got an idea on this?

---

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!:smile:

I dropped this right in and it worked for me. Thanks a lot. :-)

Glad ya liked it.. :smile:

Really great, thank you!

One question, now that my size and colour attributes are side by side (ace!) there is a large space between 'Please choose:' and the the actual attributes. Any way to get rid of this space?

Thanks.

This is a little off topic, but I thought that possibly someone could answer this for me. In the product_info layout, the drop down on the attributes has a huge margin between them (100px). I've looked carefully at the layout and the style sheet and nothing I try seems to reduce this. I have the drop downs in a vertical format and I only want the margin about 25px between them. The top drop down should be able to go right over the top of the second when selected if necessary.

The other alternative was to get them into a two column layout, where the drop downs would appear side by side, but after reading this thread I don't believe this module will help in that area.

Are there any suggestions or could someone tell me what in the .css is controlling that margin.

Thanks in advance.

Busymum & rwoody

Since neither of you included a link to your site, I am only making a guess here, but both of your issues sound like stylesheet modifications are needed to correct your layout issues.. As you can see in my test site where I have this working, I don't have the spacing issues you are both referring to.

http://clients.overthehillweb.com/my...products_id=36

I would suggest creating a thread in the stylesheet forum, and seeing if one of the experts there can help you figure out what changes are needed to get the layout to look the way you want.

Thank you for your response. In doing further research on the forums I did in fact find another person with a similar issue.

I edited the tpl_moduless_attributes.php to include a div ID for the div containing the class wrapperAttribsOptions. In the style sheet, I added a height to that div, setting it to my desired height; however, I noted that the first dropdown was still hung up. This is where the other post helped me. It was necessary to go into the product_info_display and modify the cart_display to absolute positioning, as the add to cart div was keeping the first dropdown from lining up the way I wanted it to.

The end result is that now on pages where I have multiple dropdowns, they are lined up very nicely allowing for a much nicer look on the page.

Here is a link to the site (we are still under construction), to the particular page that was really causing an issue for me. Site Example As you can see I have five attribute selections here, four drop downs and one text entry. With the old layout this page stretched out forever!!

Once again, thank you for your reply and I hope my solution helps someone else.

Thanks

Ruth

rwoody -- First off.. LOVE your site.. and I am very happy you found a solution to your product page layout issues..

However, I want to make sure it's clear to anyone reading this thread that your solution is unrelated to my two column attribute mod.. Your product pages are not using this mod, and so I feel it's important for me to note this for anyone reading this thread, who might visit your site..

Just want to make sure everyone reading this thread is on the same page..:smile:

You are correct, thus the reason in my first post I admitted I was off topic, but you folks were soooo close to my issue at the time, I just had to jump in.

Thanks for the kudos on the site. I have to tell you this has been "the" most challenging design I've ever done. Each of the main cats have a different flash image so it was really tough to come up with a way to make that happen. Waaaaay too many categories to even try to use individual style sheets and that really wouldn't have helped load all those flash modules.

Take care and thanks again for the mod. I did grab it for another site that I'm building and it works perrrrrrrfect !!! :smile:

Quote:

---

Originally Posted by rwoody

You are correct, thus the reason in my first post I admitted I was off topic, but you folks were soooo close to my issue at the time, I just had to jump in.

Thanks for the kudos on the site. I have to tell you this has been "the" most challenging design I've ever done. Each of the main cats have a different flash image so it was really tough to come up with a way to make that happen. Waaaaay too many categories to even try to use individual style sheets and that really wouldn't have helped load all those flash modules.

---

The different flash headers is definitely what I noticed, and I would love to know your "secret" for pulling it off.. So don't be surprised if you get a PM from me begging you to share your "recipe" :laugh:

Quote:

---

Originally Posted by rwoody

Take care and thanks again for the mod. I did grab it for another site that I'm building and it works perrrrrrrfect !!! :smile:

---

Glad ya liked it.. :smile:

I'll be looking forward to it. I will warn you, it is not for the faint of heart (the design, that is)...LOL But it works amazingly well.:D

Take care

Ruth

Quote:

---

Originally Posted by rwoody

I'll be looking forward to it. I will warn you, it is not for the faint of heart (the design, that is)...LOL But it works amazingly well.:D

Take care

Ruth

---

I can imagine.. Plus I NEED you to tell me how you got an animated favicon..

Now if this is something EVERYONE knows, then I apologize for being the one dense kid:blush:.. But I still have your site up just 'cause I'm FASCINATED!!!:laugh::laugh:

Isn't that just the coolist little thingy you've ever seen? Problem is if you're in IE it isn't showing up, so I have to play with that. I found this when I was out doing research and saved it for later...here you go favicons You just have to create your original graphic as always to use for this.

I'll give you a clue or if you have FF tools you'll get an even bigger clue...but there is "no" header file in this design.....:lookaroun

how can i add another column? i tried messing around with the code but i had no success. also i would like the atribute value to be on on the same row with the atribute name...

Thank you! just what I needed!:clap:

Quote:

---

Originally Posted by AgA

how can i add another column? i tried messing around with the code but i had no success. also i would like the atribute value to be on on the same row with the atribute name...

---

I wish I could help.. I didn't make this modification, a programmer friend of mine did this for me.. I just decided to share it with the community..

Quote:

---

Originally Posted by roy(irishtaxi)

Thank you! just what I needed!:clap:

---

You are very welcome.. Glad it worked for you..

Hi All,

Forgive me if my understanding of the requirement here is incorrect but the ability to specify number of columns for attribute images comes with Zen Cart (I use 1.3.8a).

This has already been discussed in this post.

Regards,
Vab

You need to read through this post again.. Your understanding of the requirement here is indeed incorrect.. I have explained what this mod does and what the before and after result looks like including sample sites so that it's clear.. This mod is not about the attribute IMAGES. I am very much aware that the ability to specify columns for attribute IMAGES is built in.. This mod is about the ATTRIBUTES themselves as a distinct entity..

As you may be aware, attributes only appear in one vertical stack. You add one and it appears... You add more, and they appear one right below the last.. This mod puts them in two columns side by side.. Nothing more.. Nothing less..

I LOVE this! Thank you so much! I have a small problem and it is because of my lack of any knowledge when it comes to building websites, CSS, PHP, etc...everything I have learned has been from these forums and the wonderful people that support them!:thumbsup:

When I did this, I now have my image on top of one of the columns, can you tell me how to fix this? I tried using FF web developer to find the coding in the CSS, but it told me no style information.

Site Here

I am still working on the site, and now I need to go in and fix the sort order according to your mod...so please forgive me as you look at it.

Thanks again!!!

ok...I spoke too soon. :blush: I went in and saw that the attributes are in a table, so I changed the table to 70% and voila! It worked. No more attributes hiding behind images.

Onto my next problem...the sort order does not seem to work. I have assigned an odd sort order number to all of the option names except the "click here to preview." The names are still in the original order, going from l-r then next row, l-r, etc...

What am I doing wrong? Cleared the cache and refreshed the page...still no change.

Thanks!:smile:

I have to be perfectly honest I cannot tell you why the sort order is working for you the way it is.. I am not a programmer, and had to have someone who knows PHP work this mod out for me.. I decided to share it with the community in case there were others who could benefit from it.. I had a very specific requirement in that I simple wanted the attributes to appear in two columns.. I never tested it to see if it would work the way you are using it.. (All attributes except one in one column)

Ok, trying to follow this (and not a programmer either), but will it work in 1.3.8? I really need something to wrangle lists of attributes (mostly color swatches)... Thanks!

If you are looking to put attributes in two columns then yes this will work in 1.3.7 & 1.3.8 (I have used it in both) BUT as I have stated previously, if you are talking about putting attribute VALUES in two columns Zen Cart supports this in the attribute management (from the admin)..

Looking at your site, I think my problem is I need the attribute selections (radio buttons) to do something other than a single column.

You are speaking of attribute VALUES. Remember an attribute has an attribute NAME and a set of 1 or more attribute VALUES.. Using an example from your site "Metal" is the attribute NAME". While Sterling Silver" & "Bronze" are the attribute VALUES.

Zen Cart natively supports putting the values in one or more columns using the attribute management. (from the store admin)

Quote:

---

Originally Posted by DivaVocals

You are speaking of attribute VALUES. Remember an attribute has an attribute NAME and a set of 1 or more attribute VALUES.. Using an example from your site "Metal" is the attribute NAME". While Sterling Silver" & "Bronze" are the attribute VALUES.

Zen Cart natively supports putting the values in one or more columns using the attribute management. (from the store admin)

---

Yes, but that only works for text attributes, not text plus image. :
http://moebiusenterprises.com/shop/i...oducts_id=1105

I need to put these in some other order than one long, annoying column.


:dontgetit

Quote:

---

Originally Posted by Moebiusenterprises

Yes, but that only works for text attributes, not text plus image. :
http://moebiusenterprises.com/shop/i...oducts_id=1105

I need to put these in some other order than one long, annoying column.


:dontgetit

---

The attribute controller features allows you to put text values as well as text values+value images into columns.. I believe you are misunderstanding how the attribute value function works.. It's a common misunderstanding and the though UI is not completely straightforward it has a few clues to indicate that this can be done..:cool:

Please see page 1 of this post.. Another poster kinda explains this, and included a screenshot of the Zen Cart admin screen which shows how you can do both.. (http://www.zen-cart.com/forum/showpo...97&postcount=8)

I just tried it on my test site, and it does indeed work.. Please see my two test product links and you can see this implemented both ways:

Attributes with value images in two columns
http://clients.overthehillweb.com/my...products_id=33

Attributes without value images in two columns
http://clients.overthehillweb.com/my...products_id=27

Since some of this post is a little off topic from what my mod actually does, I thought I should re-iterate what my OP does for anyone else reading this thread.. My mod only takes the attribute name+value combo (with or without value images) and puts them into two columns..

ZenCart NATIVELY supports putting the attribute values (with or without images) into two columns. The links above show this in action WITHIN my mod. This is what the admin section that supports this looks like: http://www.zen-cart.com/forum/attach...9&d=1199347360

For more info on how attributes are managed/structured in Zen Cart please see: https://www.zen-cart.com/tutorials/index.php?article=57

Ok, I have gone to Option Name Manager and edited it and set the Attribute Images per Row to 3 but still it only does one loooooooong column of image swatches. Anyone have any idea why ? Here is the page I mean, if you look at the matt color options, I want them to line up in rows of 3 instead of one long single column. Is there something else I am missing ? This is the first time I have really had to add attribute images.

http://skrappin.com/~skrappin/shop/i...roducts_id=290

Tia !!!

Quote:

---

Originally Posted by Jbraz

Ok, I have gone to Option Name Manager and edited it and set the Attribute Images per Row to 3 but still it only does one loooooooong column of image swatches. Anyone have any idea why ? Here is the page I mean, if you look at the matt color options, I want them to line up in rows of 3 instead of one long single column. Is there something else I am missing ? This is the first time I have really had to add attribute images.

http://skrappin.com/~skrappin/shop/i...roducts_id=290

Tia !!!

---

You need to change the Attribute Style for Radio Buttons/Checkbox, try going with 4.

Thank you ses707 ! That did it ! I don't understand it but it worked and that's what matters I guess. :) I had 2 selected in that area, changed it to 4 and it works great.

Quote:

---

Originally Posted by Jbraz

Thank you ses707 ! That did it ! I don't understand it but it worked and that's what matters I guess. :) I had 2 selected in that area, changed it to 4 and it works great.

---

There are 5 built-in templates for the attributes, by changing that number you are telling it to display them using a different template with a different layout.

In that name of keeping this post ON TOPIC I thought I should re-iterate again what my little mod does for anyone else reading this thread.. My mod only takes the attribute name+value combo (with or without value images) and puts them into two columns..

ZenCart NATIVELY (WITHOUT my small mod) supports putting the attribute values (with or without images) into two columns. The links I've previously posted show this in action WITHIN my mod. This is what the admin section that supports attribute VALUES looks like: http://www.zen-cart.com/forum/attach...9&d=1199347360

For more info on how attributes are managed/structured in Zen Cart please read: https://www.zen-cart.com/tutorials/index.php?article=57

hello, i want only the text attributes in two colums, the other attributes remain to be in one colmn, is that possible to be done?

Quote:

---

Originally Posted by myworld20091

hello, i want only the text attributes in two colums, the other attributes remain to be in one colmn, is that possible to be done?

---

Sorry I dunno.. I wouldn't begin to know how to modify the product information page to work as you describe.:blush: The modified product information page I posted here was done for me by a friend who is a programmer. (It was something down and dirty he did for me.. it's not "perfect" but it got the job done) I decided to share it with the community in case anyone else found it useful.. You might wanna try making a request in the Commercial Help Wanted forum, and see if anyone can make this specific modification for you.. I can't imagine it would be a very expensive mod..

Hello,
Thank you for posting the attributes override file this is exactly what I need. I have one problem though, I'm new to Zen Cart and I'm not exactly sure where to put this file. I used the path you gave but I don't have that file to overwrite so do I just put your file in the (includes/templates/YOUR_TEMPLATE/templates) directory? I'm still not sure what the override is used for, I suspect its so when I download updates for Zen Cart my changes aren't lost.

Any clarification you can provide would be really appreciated.

Thanks again!!!

Quote:

---

Originally Posted by DivaVocals

I've seen a few posts here asking about this or something similar. I got some help from a few sources to get this working for me.. I thought I'd share my solution in case anyone else is looking for something similar. You need to set up the appropriate override for the tpl_modules_attributes.php file (includes/templates/YOUR_TEMPLATE/templates)

Product attributes by default appear in a vertical format based on the sort order for each attribute. For a few attributes, this is cool, but for more than a few attributes, it can make the product pages a little unwielding.. I needed to have attributes appear in two columns side by side. I wanted to keep this simple.. I figured that using the existing sort order features would allow me to use the admin controls to place the attributes where I wanted them to appear and the order they should appear in. Even numbered attributes appear in the left column, while odd numbered attributes appear on the right. (by number I mean the sort order number)

There is only one caveat.. I had a friend helping me, and I didn't want to bug him too much.. His orginal solution got me part way there, but didn't split the odd and even sort order numbers the way I wanted.. I figured out how to get his orginal solution to split the attributes between odd and even sort order numbers in two columns..:smartalec: However, I couldn't figure our how to get attributes with sort order "1" to appear correctly.. (This attribute always appeared in the left column with the even numbered attributes) So I worked around this by having my attibute sort order start with "2" (so now I am skipping/not using "1" or "0" as a sort order), and it solves the problem.. Even sort order numbers appear on the left, and odd sort order numbers appear on the right. Oh I also have the form field appear below the label just to make the final layout a little neater looking.

Hope someone else finds this useful..

Display product attributes in two columns (display attributes side by side)

---

Please see these posts to understand how overrides work:

Understanding the Override System - https://www.zen-cart.com/tutorials/i...hp?article=230

How do I set up the template overrides? - https://www.zen-cart.com/tutorials/index.php?article=36

Just came across this thread and have a couple of comments.

The poster trying to put most of the attributes in one column by using odd numbers for sort order will not be successful, because the mod code does not work on sort order number (1,2,5,7) but on sort order sequence (first, second, third...). So all attributes will be organized into two columns based on their place in the sequence, not the actual number assigned.

I have recently done a mod to allow individual control of attributes in the layout (essentially assigning each .wrapperAttribsOption an id based on the Option Name id). This does not work automatically on anonymous attributes; you need to style each attribute to get it in the left or right side, but you have total control over what goes where. The code changes were extremely simple. Support thread and temporary download link: Flexible Attributes support

Something combining the two might be good, allowing a combination of universal application and individual control.

Quote:

---

Originally Posted by gjh42

The poster trying to put most of the attributes in one column by using odd numbers for sort order will not be successful, because the mod code does not work on sort order number (1,2,5,7) but on sort order sequence (first, second, third...). So all attributes will be organized into two columns based on their place in the sequence, not the actual number assigned.

---

You are absolutely right, and perhaps I wasn't clear in my instructions when I posted this code change..

The intent of this was to allow me to automatically place attributes in two columns. The use of odd and even sort order numbers allowed us to identify which items should go in which column. (I wish I could figure out why this does not work when the sort order number is 1 or 0 - more out of curiosity than necessity:smile:) This code was NEVER meant to be used any other way. So to re-iterate the way the code in the top post works is as follows.
Attributes normally appear like this:
Attribute 1
Attribute 2
Attribute 3
Attribute 4
Attribute 5
Attribute 6

They appear vertically in the order of the the sort order number assigned to each attribute. (Sort order 1 is before sort order 2)

My down and dirty mod arranges them in the same order but instead of appearing in a vertical stack, they will appear in two columns from left to right. They still appear in the order based on their sort order number, it's just that the WAY they appear that changes. So based on my example above this is how the attributes will appear:
Attribute 1 - Attribute 2
Attribute 3 - Attribute 4
Attribute 5 - Attribute 6

Again Glenn is absolutely right, if you are trying to use this code to do anything OTHER than make your attributes appear in two columns, this may not be the mod you need..

Quote:

---

Originally Posted by gjh42

I have recently done a mod to allow individual control of attributes in the layout (essentially assigning each .wrapperAttribsOption an id based on the Option Name id). This does not work automatically on anonymous attributes; you need to style each attribute to get it in the left or right side, but you have total control over what goes where. The code changes were extremely simple. Support thread and temporary download link: Flexible Attributes support

---

This sounds awesome, and I am going to check this out..:smile:

Quote:

---

Originally Posted by gjh42

Something combining the two might be good, allowing a combination of universal application and individual control.

---

Yes I would have to agree that having both options would be very much desired..

This question of displaying items in a two-column list has been widely discussed in forums and blogs, with a lot of creatively simple methods posted. It would not be hard to add a class to the even- or odd-numbered attributes, which could be used to generically put them in two columns unless there is individual styling to override that. It would also be optional and easily switched on or off, as the two-column layout would be created just with stylesheet rules.

**deleted**

Quote:

---

Originally Posted by gjh42

This question of displaying items in a two-column list has been widely discussed in forums and blogs, with a lot of creatively simple methods posted. It would not be hard to add a class to the even- or odd-numbered attributes, which could be used to generically put them in two columns unless there is individual styling to override that. It would also be optional and easily switched on or off, as the two-column layout would be created just with stylesheet rules.

---

Now if only I knew HOW to do it.. :laugh::laugh: Seriously, I might take a look at this code.. At the time I had it done I needed a quick down and dirty solution, and my friend churned this out in the span of two IMs for me..:laugh: I know he used tables 'cause that was easy to do.. To make it tableless I guess it's simply a matter of me wrapping the code that's between the two <td> tags around some new style IDs (one for left and one for right) and then adding the corresponding style attributes to the stylesheet.. This would make my old down and dirty fix a tableless solution.. I would probably use some variation of one of the CSS Play tableless layouts.. (I've used variations of these layouts to re-organize some of the items on the product detail pages before)

One thing Glenn.. can you be so kind as to help me solve the mystery as to why my code does not work (ignores) attributes where the sort order number is either "0" or "1"??? I've tried a bunch of things, and ultimately gave up figuring this out just to keep my hair and my sanity.. But I still sure am curious about WHY..

I spent some time earlier analyzing and notating that code (only to have it all erased when I mistakenly did a search in that tab), and couldn't find anything that should have been affected by the sort order number entered in admin.

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.

Code:

---

/*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.

Quote:

---

Originally Posted by gjh42

I spent some time earlier analyzing and notating that code (only to have it all erased when I mistakenly did a search in that tab), and couldn't find anything that should have been affected by the sort order number entered in admin.

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.

Code:

---

/*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.

---

Thanks for the response.. :smile: Guess I'll be doing some experimenting some more with this.. I like the idea of a CSS solution.. And thank you for the correct wording that I could never seem to get out of my mouth...:laugh: "make the attributes sit two to a row"

Quote:

---

Originally Posted by DivaVocals

I've seen a few posts here asking about this or something similar. I got some help from a few sources to get this working for me.. I thought I'd share my solution in case anyone else is looking for something similar. You need to set up the appropriate override for the tpl_modules_attributes.php file (includes/templates/YOUR_TEMPLATE/templates)

Product attributes by default appear in a vertical format based on the sort order for each attribute. For a few attributes, this is cool, but for more than a few attributes, it can make the product pages a little unwielding.. I needed to have attributes appear in two columns side by side. I wanted to keep this simple.. I figured that using the existing sort order features would allow me to use the admin controls to place the attributes where I wanted them to appear and the order they should appear in. Even numbered attributes appear in the left column, while odd numbered attributes appear on the right. (by number I mean the sort order number)

There is only one caveat.. I had a friend helping me, and I didn't want to bug him too much.. His orginal solution got me part way there, but didn't split the odd and even sort order numbers the way I wanted.. I figured out how to get his orginal solution to split the attributes between odd and even sort order numbers in two columns..:smartalec: However, I couldn't figure our how to get attributes with sort order "1" to appear correctly.. (This attribute always appeared in the left column with the even numbered attributes) So I worked around this by having my attibute sort order start with "2" (so now I am skipping/not using "1" or "0" as a sort order), and it solves the problem.. Even sort order numbers appear on the left, and odd sort order numbers appear on the right. Oh I also have the form field appear below the label just to make the final layout a little neater looking.

Hope someone else finds this useful..

Display product attributes in two columns (display attributes side by side)

---

Just wanted to say a big THANK YOU for your contribution above I really needed this for my website and stumbled across your post. Needless to say, you are very kind to have posted this and I can assure you if and when I find an answer to something someone else might need I will return the favour. Cheers, my friend and all the best!

Quote:

---

Originally Posted by cwhittaker

Just wanted to say a big THANK YOU for your contribution above I really needed this for my website and stumbled across your post. Needless to say, you are very kind to have posted this and I can assure you if and when I find an answer to something someone else might need I will return the favour. Cheers, my friend and all the best!

---

P.S. If by any chance you know how to change the distance of the text to the checkbox I would really appreciate it. The text currently sits right up against the checkbox.

Probably something like

.wrapperAttribsOptions label {margin: 0.3em;}

If that doesn't do it, post a link to your site so we can give an exact answer for you.

Quote:

---

Originally Posted by cwhittaker

Just wanted to say a big THANK YOU for your contribution above I really needed this for my website and stumbled across your post. Needless to say, you are very kind to have posted this and I can assure you if and when I find an answer to something someone else might need I will return the favour. Cheers, my friend and all the best!

---

You are very welcome.. Glad you found it helpful..:smile:

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?

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??

Quote:

---

Originally Posted by fairy

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?

---

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

Quote:

---

Originally Posted by 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.

---

Thanks.. and you're very welcome!!

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

Quote:

---

Originally Posted by jsksathiya

:blink: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.

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.

Thank you for your great replay

Quote:

---

Originally Posted by solarflare

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

Quote:

---

Originally Posted by First Action

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:

Quote:

---

Originally Posted by DivaVocals

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!:smile:

---

Quote:

---

Originally Posted by gjh42

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.

Code:

---

/*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:

Code:

---

.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

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.

Or you can just add a rule with {clear: both;} for whatever element comes next in your page, like
#productTellFriendLink {clear: both;}
and not have to have another override file in your template folder...

i realy love to make product page tables like this page....

http://stockgsm.com/index.php?main_p...11a3a35bd6ef03

can any one help me?

Quote:

---

Originally Posted by aftab1003

i realy love to make product page tables like this page....

http://stockgsm.com/index.php?main_p...11a3a35bd6ef03

can any one help me?

---

Your question is off-topic for this particular thread (which is discussing a different layout method/technique for the attributes section of the products page).

If you want help with your question, please re-post it in the appropriate section of the forum and I'm sure the members of this great community will be happy to help you..