Customise the VirtueMart 1.1 Related Products display

The default layout for the VirtueMart 1.1 Related Products display is a maximum of 4 products displayed in a horizontal row.

It’s quite easy to change this and also to display rounded corners i.e <div><div><div><div> layout but you need to change the core files.

The default layout of the Related Products is quite “clonky”.

Open file joomla_root/components/com_virtuemart/themes/default/templates/common/relatedProducts.tpl.php in any text editor.
In this case we will make the display fold at 3 products, if you want more or less just change the ($relItem == 3) parameter. The original file is as so –

<?php if( !defined( ‘_VALID_MOS’ ) && !defined( ‘_JEXEC’ ) ) die( ‘Direct Access to ‘.basename(__FILE__).’ is not allowed.’ ); ?>
<hr/>
<h3><?php echo $VM_LANG->_(‘PHPSHOP_RELATED_PRODUCTS_HEADING’) ?></h3>
<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 changes we need to make are to count the number of products and insert a new table row when we reach our required target number.
The relevant changes are within the table –

<table width=”100%” align=”center”>
<tr>
<?php $relItemNo = 0; ?>
<?php
while( $products->next_record() ) {
if ($relItem == 3) {
echo “</tr>\n<tr>”;
$relItem = 0;
}
?>
<td valign=”top”>
<?php echo $ps_product->product_snapshot( $products->f(‘product_sku’) ) ?>
</td>
<?php $relItem++;
}
?>
</tr>
</table>

If as well we want to surround the individual products in divs e.g. for a rounded corners border etc then we do this in this file as well. Simply add a class and the necessary divs to the table cell, you will have to adjust your css to suit –

<td valign=”top”>
<div>
<div style=”width:210px;height:160px;”>
<div style=”width:210px;height:160px;”><div><div></br>
<?php echo $ps_product->product_snapshot( $products->f(‘product_sku’) ) ?>
</div></div></div>
</div>
</div>
</div>
</td>

To increase the number of related products shown we need tp change another file.
Open file joomla_root/administrator/components/com_virtuemart/html/shop.product_details.php in any text editor and go to line 85.
Change the number of returned results in the query –

$q .= “AND FIND_IN_SET(#__{vm}_product.product_id, REPLACE(related_products, ‘|’, ‘,’ )) LIMIT 0, 4”;

to for example 6

$q .= “AND FIND_IN_SET(#__{vm}_product.product_id, REPLACE(related_products, ‘|’, ‘,’ )) LIMIT 0, 6”;

Original article from: http://www.gjcwebdesign.com/virtuemart-related-products-customise.html