Display product attributes in two columns (side by side)

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/index.php?main_page=product_info&cPath=109&products_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.

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?

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

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/index.php?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.

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

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 supportThis sounds awesome, and I am going to check this out..:smile:

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

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

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

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

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!

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.

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-templates/bling-sparkle-auction-templates/glittering-borders-auction-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?