Many e-Commerce websites offer different features that keeps the online customers engaged in the store. One of these features is “Continue Shopping” button that you may have see on many sites and the main aim of this button is to take the online shoppers back to the product catalog or homepage so that they can browse other items.
Adding the “Continue Shopping” button to the empty cart page in nopCommerce can be quite useful in order to make it convenient for online customers to go back to homepage to look for other products.
This requires a little bit of work in the code as nopCommerce does not offer this feature out of the box.
The default nopCommerce empty cart page looks like this:
Let us go to this location in the code: Nop.Web/Views/ShoppingCart/OrderSummary.cshtml
Copy the “OrderSummary.cshtml” file and paste it in your store current theme folder like this:
Themes/DefaultClean/Views/ShoppingCart/OrderSummary.cshtml
(You will have to create the folder “ShoppingCart” in your theme views)
Open the “OrderSummary.cshtml” file and find this code at the bottom of the page:
else { @T("ShoppingCart.CartIsEmpty") } @Html.Widget("order_summary_content_after") </div>
We will be adding this button code here:
<input type="submit" name="continueshopping" value="@T("ShoppingCart.ContinueShopping")" class="button-2 continue-shopping-button" />
So, your “else” section should look like this (at the bottom of the page):
else { @T("ShoppingCart.CartIsEmpty") using (Html.BeginRouteForm("ShoppingCart", FormMethod.Post, new { enctype = "multipart/form-data" })) { <div class="buttons"> <div class="common-buttons"> <input type="submit" name="continueshopping" value="@T("ShoppingCart.ContinueShopping")" class="button-2 continue-shopping-button" /> </div> </div> } } @Html.Widget("order_summary_content_after") </div>
That’s it – Now, simply run your website and go to empty cart page. You should see the “Continue Shopping” button like this:
Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!