How to rearrange the Product Listings?

Hi,

I'm using latest version 1.3.8 and am able to do most things from the admin panel. However I cannot see a way to rearrange the product listing.

Am using the classic template and on the product listing page when you click on category the product info is on one row. In that row there are 3 columns: product image, description, price.

I want to rearrange this so that the description and price (incl add x, and qty) are arranged below the product image. Why? well the product image is a snooker/pool cue and it looks much better that way.

My question then is how can I achieve this. I don;t think it can be done via the admin panel. So I need to look at my .css or the displays files.

Can anyway point in the right direction thanks.

I'm sorry if this question is answered elsewhere, promise I have spent several hrs trawling thru threads.

I'd appreciate any comments. Thanks.

abee

productlisting is set in tables

Is there another listing that looks correct?

new products, featured, All etc....
If so there is a thrread that discusses converting them by yellow1912

thanks for your post. We are focused mainly on the product info page.

Am still trying to see how I can rearrange the layout where the product image uses a seperate row with a second row that holds the other details such as prices descirption etc. I've uploaded a mockup of the desired layout here:

If i figure this out i will post here.

Thanks.

Provide a link to what it appears like currently
Place a single space to break link as in
http ://www.zen-cart.com/

Sure it currently looks like this.
http://www.simplyskills.co.uk/zcstore/index.php?main_page=product_info&cPath=1_5&products_id=1

thanks.

I think I found the answer here. which is very good start.

http://www.zen-cart.com/forum/showthread.php?t=107014

Looks like repositioning prod info elements means manually editing the relevant template file in my case tpl_product_info_display.php and moving the code blocks around to get the desired layout long with possibly some .css tweak.

If someone can elaborate on how this can be done even better.
Meantime am going to backup this file and have play around :smile: Will post a solution when I can it right.

Thanks.

Try starting with this - begging at where the main imgae starts
I think they are in the correct order by default
Adds are in red

<!--bof Main Product Image -->
<?php
  if (zen_not_null($products_image)) {
  ?>
<?php
/**
 * display the main product image
 */
   require($template->get_template_dir('/tpl_modules_main_product_image.php',DIR_WS_TEMPLATE, $current_page_base,'templates'). '/tpl_modules_main_product_image.php'); ?>
<?php
  }
?>
<br class="clearBoth" />
<!--eof Main Product Image-->

<!--bof Product Name-->
<h1 id="productName" class="productGeneral"><?php echo $products_name; ?></h1>
<!--eof Product Name-->

<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
<?php
// base price
  if ($show_onetime_charges_description == 'true') {
    $one_time = '<span >' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '</span><br />';
  } else {
    $one_time = '';
  }
  echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<br class="clearBoth" />
<!--eof Product Price block -->

<!--bof free ship icon  -->
<?php if(zen_get_product_is_always_free_shipping($products_id_current) && $flag_show_product_info_free_shipping) { ?>
<div id="freeShippingIcon"><?php echo TEXT_PRODUCT_FREE_SHIPPING_ICON; ?></div>
<?php } ?>
<!--eof free ship icon  -->

 <!--bof Product description -->
<?php if ($products_description != '') { ?>
<div id="productDescription" class="productGeneral biggerText"><?php echo stripslashes($products_description); ?></div>
<?php } ?>
<!--eof Product description -->
<br class="clearBoth" />

Thanks Kobra. I managed this by tweaking the stylesheet and setting the width=100% for the class #productMainImage.
Your solution I think is better fix. Will try it cheers.

I am also move the code blocks for the various product info elements in tpl_product_info_display.php
in whatever order to get the layout I wanted.