Related Product in VirtueMart is great but It can break the layout of your design. I am not talking about the module - you have full control over the module - I am talking about the Related Proructs that display at the bottom of a product!

Its fixed to display 4 items in one row! So if your design's main-content area is narrow it could break and look like this:

You see the items expanded beyond the contents area and reached the sidebar on the right. I spent hours trying to figure where to control it from the administration panel without any success! I even downloaded the user manual but failed to find anything can fix it!

So, a new hack journy began VirtueMart URLs helps you to understand where you should start :

index.php?page=shop.product_details&flypage=flypage.tpl

So, the code that control the layout of this page is located on:

administrator/components/com_virtuemart/html/shop.product_details.php

This line control how many items you would like to display:

$q .= "AND FIND_IN_SET(jos_{vm}_product.product_id, REPLACE(related_products, '|', ',' )) LIMIT 0, 4";

It's set to 4. You can decrease the number to be 2 and the layout will be fixed! but thats not a practical solution! Says you want to display the 4 related products or even more!

There is another line display where exactly is the code for the Related Products part :

$related_products = $tpl->fetch( '/common/relatedProducts.tpl.php' );

You can find it on the template folder:

components/com_virtuemart/themes/default/templates/common/relatedProducts.tpl.php

<table width="100%" align="center">
	<tr>
		<?php 
			while( $products->next_record() ) { ?>
			<td valign="top"><?php echo $ps_product->product_snapshot( $products->f('product_sku') ) ?> </td>
		<?php } ?>
	</tr>
</table>

The while loop create a <td> for each new item. We need to modify this to end the row and start a new one when it reach the maximum value we specify. So, we set a new variable and call it $relatedproductcount and give it the number of maximum items per row. Using an if statement and an iterator we can edit the code to be like :

<table width="100%" align="center">
 <tr>
 <?php 
 $relatedproductcount = 0; 
 while( $products->next_record() ) { 
 if ($relatedproductcount == 2){ // SET this value to desired max items per row
 ?> 
 </tr><tr>
	 <td valign="top">
 	<?php echo $ps_product->product_snapshot( $products->f('product_sku') );
 	$relatedproductcount = 1;
 	} else {?>
 	<td valign="top">
 	<?php echo $ps_product->product_snapshot( $products->f('product_sku') );
 	$relatedproductcount++; } ?>
 	</td>
 	<?php  } ?>
 </tr>
</table>
 

You can see the results here

I don't really like modifying the core files and I belive what we did here is vital and should be controlled via the administration panel. I hope to see this in the future.

Note: I used VirtueMart version 1.1 I didnt test it on previous versions.

Thanks for reading!