Product pag layout

I am trying to change the layout of my product page, but cant figure out where in the CSS(if in the CSS) to make the changes. I have attached a jpeg showing what I want to do. Any suggestions would be very much appreciated.

Thanks.

Thanks for the reply Nicolas. However, I am not very knowledgeable with php. I don't expect a php training class, but could you point me in the right direction with an example? I am going to read up on the subject tonight, but an example might give me an ah ha moment. Thanks again.

That's exactly what I needed. I wasn't able to get it exactly like I wanted, but pretty close. Thanks again.

I am not following the direction of this answer.


I would like to move the product price BELOW the description and cannot find yet where to do that.

which Display > View file do I edit? I am using (modified) beez20 template.

example:

instead of

$26.15 each
product #1

product #1
$26.15 each

ah ok the quotes helped, I did not see a "Show" file, I was looking for a "view". thanks

ok, I found that and am pretty sure that is not the file I was looking to edit. that seems to edit the individual product page (where you add the item to cart).

I want to edit this page:
/index.php/products/category/listing/cid-12/name-categoryname


that has this code in source:

<div class="hikashop_product" style="width:32%;">

				<div class="hikashop_container">

					<div class="hikashop_subcontainer">

					<div style="height:100px;text-align:center;clear:both;" class="hikashop_product_image">

			<a href="/link/link.php">

	<img src="/image/file/link.jpg"  height="100" width="100"  />		</a>

	</div>

	<span class="hikashop_product_price_full">

	<span class="hikashop_product_price">$26.15</span>  each</span><span class="hikashop_product_name">

			<a href="/link/link-174">

	product example text		</a>

	</span>

					</div>

				</div>

			</div>

<div class="hikashop_product" style="width:32%;">

				<div class="hikashop_container">

					<div class="hikashop_subcontainer">

					<div style="height:100px;text-align:center;clear:both;" class="hikashop_product_image">

			<a href="/link/link.php">

	<img src="/image/file/link.jpg"  height="100" width="100"  />		</a>

	</div>


<span class="hikashop_product_name">

			<a href="/link/link-174">

	product example text		</a>

	</span>

	*****<span class="hikashop_product_price_full">

	<span class="hikashop_product_price">$26.15</span>  each</span>*****

					</div>

				</div>

			</div>

<div class="hikashop_category" style="width:<?php echo $width;?>%;">
				<div class="hikashop_container">
					<div class="hikashop_subcontainer">
					<?php 
						$this->row =& $row;
						echo $this->loadTemplate($this->params->get('div_item_layout_type'));
						if(!empty($this->row->childs)){
							?>
							<ul class="hikashop_category_list">
							<?php 
							foreach($this->row->childs as $child){
								$link = hikashop::completeLink('category&task=listing&cid='.$child->category_id.'&name='.$child->alias.$this->menu_id);
								?>
								<li class="hikashop_category_list_item">
									<a href="<?php echo $link; ?>">
									<?php echo $child->category_name; ?>
									</a>
								</li>
								<?php 
								}
							?>
							</ul>

yes I have a listing of categories and then when I click on a category it goes to a listing (really a 3 column div based layout) of the products in that category. that is the page I am talking about wanting to move the price below the description. I have tracked that bit of code to the Category > listing_div file and then in that file the php (that is not appearing in my post above) calls this:


echo $this->loadTemplate($this->params->get('div_item_layout_type'));


I believe it is that "layout template" I want to edit, not any individual piece within it, but the actual item layout.

I want the listing_price to come after the listing_title.

please be patient because I think sometimes there is a bit of a language barrier. I try to speak simply but this stuff does not make that easy.

nicolas wrote:

As I said, you need to edit the file listing_img_title of the view product and NOT category.

<?php
}

?>
<span class="hikashop_product_name">
	<?php if($this->params->get('link_to_product_page',1)){ ?>
		<a href="<?php echo $link;?>">
	<?php }
		echo $this->row->product_name;
	if($this->params->get('link_to_product_page',1)){ ?>
		</a>
	<?php } ?>
</span>

<?php

if($this->params->get('show_price')){
	$this->setLayout('listing_price');
	echo $this->loadTemplate();
} 

?>

Hi after reading the thread I tryed to move the product description to the top.
I moved this code and it seems to work:

<span id="hikashop_product_description_main" class="hikashop_product_description_main">      <?php echo JHTML::_('content.prepare',preg_replace('#<hr *id="system-readmore" */>#i','',$this->element->product_description)); ?>    </span>

However after moving the prod description the text format has changed. I want it to be "paragraph" like before but now the font is much bigger.

what went wrong?

thansk
Chris

ok I got it I copied it into the section within </h2>

thanks
Chris