Changing the way product info is displayed

[pb4]

Hi,

I am not currently liking the way the products are displayed on my site - HERE
(images yet to be added)

Ideally I would like something like this



Making the price stand out more and things generally looking tidier. Is this possible? If yes what should I be changing? Is it a style sheet thing or can this be done from the admin or a bit of both?
Thanks

[eentje]

it's a stylesheet thing and a PHP thing both...

first of all you want to play with the tpl_product_info_display.php file so you have the three wrapperdiv's in place.

Then with CSS you get them neatly side by side.

Google a bit on three column layout CSS.

[gjh42]

It would just be a stylesheet matter if you had the stock product listing display. You appear to have done the "one single listing layout" mod, since your product listing is using the "all products" layout which strings all of the right-side elements vertically. You would need to reverse that, and then the job will be trivial.

tpl_product_info_display.php is irrelevant to the product listing; that is for the product info page.

[pb4]

Thanks for looking into this for me

It would just be a stylesheet matter if you had the stock product listing display. You appear to have done the "one single listing layout" mod, since your product listing is using the "all products" layout which strings all of the right-side elements vertically. You would need to reverse that, and then the job will be trivial.

tpl_product_info_display.php is irrelevant to the product listing; that is for the product info page.

Sorry but you have lost me What do I need to do to 'reverse'?!

Thanks

[gjh42]

If you had done this yourself, you would remember it, as it involves manually editing several files. Where did your template originally come from? Did you start from stock, or install a template? Perhaps it had this included - you could ask the source.

[gjh42]

Your stylesheet has this

.productListing-data+.productListing-data+.productListing-data, #listCell0-2 {display: none;}

which is hiding the stock price/add table cell. This is simply a matter of pasting a line in your stylesheet; getting the price and add button below the description had to involve some coding in /includes/modules/your_template/product_listing.php.

I don't know if the Clean Business Theme (your template's origin) has that as a stock feature, or what.

[pb4]

Thanks Glenn, the template I used for the Zen cart was the red passion one and I have combined the shop site a bit with my original non-shop site.

I'll look into this when I get a chance and see how it goes.

Thanks for your help.

[pb4]

Hi,

I managing to arrange the different elements but now have two Add boxes and two prices showing - here

How can I delete the centred ones below the description? Is this an Admin thing?

Thanks

[gjh42]

Nope - the elements below the description were hard-coded there by your template designer, and you will have to edit /includes/modules/your_template/product_listing.php to remove them.

[gjh42]

   <td class="productListing-data"><h3 class="itemTitle"><a href="http:...ducts_id=272">Single sided business card design</a></h3><div class="listingDescription">Single sided business card design: View your design online to give us feedback. Unlimited revisions.</div>&pound;20.00<br /><br />Add: <input type="text" name="products_id[272]" value="0" size="4" /><br /><br /></td>

This is the output; the actual file will have more code in it than this, and variables/constants in place of the text, but it will have the red </div>, and you should be able to delete most of the code after that.
You will find this section under the second case 'PRODUCT_LIST_NAME': heading halfway down the file or so.