How to prevent first item from being selected by default in a dropdown attribute in nopCommerce

There is a really good feature offered by nopCommerce by which customers can customize a product via product attributes.  Product attributes allows a customer to customize a product or add various options to the product that they are interested in buying. This goes hand in hand with the list price as these selections dynamically changes the price (depending what what selections have been made by the online shoppers).

Product attributes also let store admins to define if they would like any option to be pre-selected by default. This kind of functionality allow store admins to make things easier for the online customers by listing the product along with the pre-selected options. This way, everything is ready to go and customer can simply click on “Add to cart” button.

In cases. when a pre-selection option is not being used and a dropdown menu is selected for a product attribute; by default the first value in the dropdown list will be selected. This is not a bug and believe it or not, it is by design.



In this example, there is “no” pre-selected option and this is how it will show up in the public store.

In this particular scenario, if a customer forgets to make the selection in “processor” attribute, the customer will be charges $10 extra for it. There is a workaround to this which can be done in the administration section. A store owner can add 3 attributes with first option being default value and other 2 with additional price.

But what about those store owners who would like to keep only the attribute values in a dropdown list and show nothing as default value?

Today, we will go over the process of how to prevent first item from being selected by default in a dropdown attribute in nopCommerce.

Go to: Open: Nop.Web\Views\Product\_ProductAttributes.cshtml


Look for this code:

@if (!attribute.IsRequired)
                               <option value="0">---</option>


Let’s replace the above code with this:

<option value="0">---</option>


Now, if you go to the public store and view the product page, you should see the product attribute dropdown menu like this:


That’s all – This change in the code will prevent first item from being selected by default.


 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *