Product Attribute Layout in shopping cart

[ktraving]

I'm looking at the below piece of code in the shopping-cart-product-line.tpl of a theme, which results in a rather undesired layout. Look at the image on snaggy.

	<td class="cart_description">
		<div class="narrow-screen">{l s='Description'}</div>
		<div class="floatL">
		{capture name=sep} : {/capture}
		{capture}{l s=' : '}{/capture}
			<p class="product-name"><a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}">{$product.name|escape:'html':'UTF-8'}</a></p>
			{if $product.reference}<small class="cart_ref">{l s='SKU'}{$smarty.capture.default}{$product.reference|escape:'html':'UTF-8'}</small>{/if}
			{if isset($product.attributes) && $product.attributes}<small><a href="{$link->getProductLink($product.id_product, $product.link_rewrite, $product.category, null, null, $product.id_shop, $product.id_product_attribute)|escape:'html':'UTF-8'}">{$product.attributes|escape:'html':'UTF-8'}</a></small>{/if}
		<div>
	</td>

What I would like, is to take each set of attributes and show the line by line.

 

Color: Red

Version: Advanced

Width: 1 meter

Height: 1 meter

 

Rather than a bunched up set up attributes.

 

But I can't seem to work our a way to loop through the attributes one by one. Any ideas?

 

Have a nice weekend,

 

K