nopCommerce Link Associate Variant Product To Product Details Page

Add a View Details Button to Grouped Products

As a nopCommerce newbie I was looking for a way to link simple associated products on a group collection page to their individual product pages. As you can see by default nopCommerce only provides basic info for associated products: Product Name, Availability, Stock and Add to Cart.

This is rather poor UX especially for items that have a high ticket or are closely related. In those cases, a potential customer may want to read more details pre-purchase. The default is for them to copy the name and conduct a search. No, I’m not kidding.

The solution is to edit you grouped template [ProductTemplate.Grouped] and add the code below. You can link the name, image, add a details button or any combination therein which will allow you to link the associated products (as nopCommerce calls these in the admin and HTML notes) or variant products (as nopCommerce sus as a reference namespace) to their simple product details page.

I also suggest that rather than editing the default template you create a new template to hold your edits.

@Url.RouteUrl("Product", new {  productId = variant.Id, SeName = variant.SeName })>

Note: the url structure for this link is not enclosed in “”

@variant.Name

Written by

Nita G. has Digital DNA. Having worked as a developer, designer, PM & QA, the office joke is that NITA stands for Nocturnal Information Technology Android. Don't be surprised by 4am emails. She literally eats, breathes and sleeps this company.