We've made some adjustments to tune the Product Options Grid format as recommended by Muhammad at Able:


1- Please open the file \Website\Views\Product\_BuyProductDialogOptionsList.cshtml

2- Search for these code lines

@if (Model.ShowMSRP)
{
<td class="col-xs-1 text-center">
<text>@Html.DisplayFor(model => model.Variants[i].MSRP)</text>
</td>
}
@if (Model.ShowPrice)
{
<td class="col-xs-1 text-center">
<span itemprop="price">@Html.DisplayFor(model => model.Variants[i].Price)</span>
</td>
}
<td class="col-xs-2 text-center">
<div class="row row-no-padding quantity">
<span class="product-quantity ">
<a class="btn btn-default" id="row-qty-minus">-</a>
<input type="text" min="1" max="999" value="1" class="form-control input-number resize-field addQty" id="modal-qty" />
<a class="btn btn-default" id="row-qty-plus">+</a>
</span>
</div>
</td>

3- Remove the text in Bold.
i-e col-xs-1 & col-xs-2

4- Save the file and see if your issue is resolved.


This has helped a great deal with the formatting. We requested a further adjustment to keep the Add to Cart & Add to Wishlist buttons horizontal instead of stacking. This works on Desktop, but causes a problem on mobile with the Quantity Spinners becoming dis-located.

<td class="@(AbleContext.Current.Store.Settings.WishlistsEnabled ? "col-xs-3" : "col-xs-2") text-right">

and replace it with

<td class="text-right">

We may need to keep a stacked format for the buttons in mobile, but horizontal on desktop.

-Jeff

Edited by user Thursday, September 26, 2019 10:10:02 AM(UTC)  | Reason: Not specified