Move price and quantity side by side in product listing

I'm running Zen Cart 1.3.8a and would like to make my product listing clearer by re-orienting the price and quantity so that they sit side-by-side, rather than one on top of another.

As it stands, both these items sit in one column in an ugly and confusing manner. Ideally they would sit in separate columns (not an option in the admin area, so far as I'm aware). :frusty:

My product listing is at: http://www.smptheatre.co.uk/zen/inde...=index&cPath=1

This is how it currently stands:
http://www.smptheatre.co.uk/current.png

This is a mockup of how I would like it to be:
http://www.smptheatre.co.uk/ideal.png

Any suggestions?

Thanks!

1. [FONT=Arial][FONT=Arial]In the Admin, go to Configuration > Product Listing – the section labeled ‘Display Product Price/Add to Cart Column Width’ set it to 155px (Play Around with numbers Later. [/FONT][/FONT][FONT=Arial][FONT=Arial]This takes a bit of tweeking to have this fit on one single line – the table itself is of a dynamic width and so any information in the other cells might shift this around.[/FONT][/FONT][FONT=Arial][FONT=Arial])
   [/FONT][/FONT]
2. [FONT=Arial][FONT=Arial]In the file called ‘product_listing.php’ (can be found under includes/modules/product_listing.php) look for:[/FONT][/FONT]

PHP Code:

---


case 'PRODUCT_LIST_PRICE':
$lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';
$lc_align = 'right'; 


---

[FONT=Arial][FONT=Arial]Change It To:[/FONT][/FONT]

PHP Code:

---


case 'PRODUCT_LIST_PRICE':
// Changed By AA TECH DESIGN To Kill Break Between QTY and Price
// $lc_price = zen_get_products_display_price($listing->fields['products_id']) . '<br />';
$lc_price = zen_get_products_display_price($listing->fields['products_id']) ;
$lc_align = 'right'; 


---

[FONT=Arial][FONT=Arial]Note the lack of the <br /> tag on the 2nd line.

Now Also Find And Change:[/FONT][/FONT]

PHP Code:

---


$lc_text .= '<br />' . zen_get_buy_now_button($listing->fields['products_id'], $the_button, $products_link) . '<br />' . zen_get_products_quantity_min_units_display($listing->fields['products_id']); 


---

With The Following:

PHP Code:

---


// Removed Break and Added 2 Spaces so the QTY and Price are in one line by AA TECH DESIGN

$lc_text .= '&nbsp;&nbsp;' . zen_get_buy_now_button($listing->fields['products_id'], $the_button, $products_link) . '<br />' . zen_get_products_quantity_min_units_display($listing->fields['products_id']); 


---

That should do it for you. Good Luck. And Make Backups, Just In Case.

Regards,
AA TECH DESIGN

Awesome, it worked a treat - thanks.

No, Problem. I owe the community more than that. I hope others will find this useful as well.

Dear AATECH or any other problem solver,

We did what you suggested, but somehow our product listing still has breaks and will not show on one line. Also, the product names are linking to individual product pages, which we don't want. We want it to be similar to what emillarsen finally achieved.

http://www.miter-master.com/index.ph...=index&cPath=2

Thank you in advance for any thoughts or suggestions.

Well your fonts are too big and I think your table is causing it to move up a line. Also you difinitley missed something in the instructions we put before... go over it again...

- AA TECH DESIGN

Dear AATech and others great helpers.


I have same issue.. I following up the same instruction...
price and add button did works and became same line but not the cart "box". cart box is still under the line. I did play around
"Configuration > Product Listing – the section labeled ‘Display Product Price/Add to Cart Column Width" but makes no difference.

Please take a look at my attached photo.
What about the product photo?

Please help me..
thank you.:no:

Dear Digulu,

The problem you are having, just from looking at the picture you attached, is that the width of your site is too narrow, extend it and that should probably fix it....

- AA TECH DESIGN
http://aatechdesign.com

I'd be interested in your posting how you achieved including the discount quantities in the Product Listing ... :smile:

Thank you AATech! Could you please point me out where I can start? I mean I am not sure how to make my site wider since this is a template that I have applied. Could you please tell me which file am I suppose to edit? I am sorry I am not a graphic web or css development experience person. Again, your help is greatly appreciated.

My site is http://digulu.x10hosting.com/store/i...ndex&cPath=1_4


To Ajeh: please take a look at the forum thread # 57740 posted by Rainbow. I just followed the instruction

To Clarify a little bit:

I am using a fully working TemplateMonster Template.

My site is http://digulu.x10hosting.com/store/i...ndex&cPath=1_4

Actually mine TemplateMonster has 3 stylesheet files

\includes\templates\TM001\css\stylesheet.css
\includes\templates\TM001\css\stylesheet_main.css
\includes\templates\TM001\css\stylesheet_tm.css



So I went to each stylesheet and here is what I noticed.
In the stylesheet.css
Both navBreadCrumb and .centerColumn not found.

Found only
#mainWrapper {
text-align: left;
vertical-align: top;
}


In the stylesheet_main.css

mainwrapper not found

I found only
#navBreadCrumb {padding:10px 0px 0px 0px; color:#ffffff; font-weight:bold; margin-bottom:2px;}
.centerColumn {}
.centerColumn table {}

In the stylesheet_tm.css
Both centerColumn, navBreadCrumb and mainWrapper are not found


What do I do next? Please help... should I upload my all css files in here?
:frusty:

Dear Digulu,

Everything seems to be runing okay, it's already on one line. Your computer monitor's resolution is probably set to low resolution (so you get a scroll bar at the bottom of your screen to move right and left) change your resolution to one higher and you can see for yourself.

Your template is already at 1200px which is wide enough and set to auto margins.

The main CSS for this is located in the folowing folder on your server:
store/includes/templates/theme227/css/stylesheet_tm.css

Line:

Code:

---


.main_t{width:1200px; margin:auto; text-align:left;}

---

Maybe make the font to the Quantity discounts table a little smaller to fit everything on the screen on a low-res monitor.

I think what you need to change is here.

Look in: store/includes/templates/theme227/css/stylesheet_main.css

Look for:

Code:

---



.tabTable td .listingDescription {padding:1px 5px 5px 0; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:15px; color:#72736e; text-align:left; font-weight:normal;}

---

Change to:

Code:

---



.tabTable td .listingDescription {padding:1px 5px 5px 0; font-family:Arial, Helvetica, sans-serif; font-size:10px; line-height:15px; color:#72736e; text-align:left; font-weight:normal;}

---

Hope that helps.

AA TECH DESIGN
http://aatechdesign.com

AATech:

You are genius!! How did you know what file to edit and where is the path? Wow.. I am amazed.. Wow.. I am a Linux person but yet I don't how you figure out my path...and files.

When I change the fonts of my table

Code:

---

.tabTable td .listingDescription {padding:1px 5px 5px 0; font-family:Arial, Helvetica, sans-serif; font-size:4px; line-height:15px; color:#72736e; text-align:left; font-weight:normal;}

---

From 15px to 12px. I think I did see font became a bit smaller so I tried with font size 4px. The font size stayed the same. I just wondering why.

Could I please ask you two more questions...

1) How do I move image (photo of product) higher so that Image, Item Title, Price, Addcart is same line. Line up together. Image looks like surrounded bye a square frame. I know how to reduce image size from Admin->Configuration->Image (image size reduced but not the square frame that frame the image).

2)How do I reduce the line spaces between products list.
I have attached a photo for better explaination.

Thank you very much again.
:clap:

Hi Digulu,

I'm glad you got it working... As for your other questions, they have to wait, I'm on my way to the CES show in Vegas and will be back late next week. Hopefully Ajeh can help you out on this.

AA TECH DESIGN
http://aatechdesign.com

Can anyone please help me? I posted earlier in #13. Question#1 and Question#2


Thank you

I have Zen Cart 1.39b can someone explain the code to me how to do side by side

AATech,

Thanks for your help to these guys, and I hope you could help me out too, or point me in the right direction.

1. How do I make attributes appear in product listings? Attributes are added by admin, but they only appear in the product info page, not on the listing.

2. Which brings me to my 2nd problem: How do I rearrange the product info page to make the attributes be prominently on top next to the name of the product?

I am planning a tire website, and one important attribute of a tire is the size which looks like 215/45/17--each number corresponds to an attribute, and would really look useful if they appear on the product listing alongside the name of the tire, and also in the product info.

Thanks in advance!